今天微博看到了寒冬大神的面試題，覺得挺有意思的，這里就做一點(diǎn)解答
http://weibo.com/1196343093/Bhj510t50談?wù)勀銓?duì)CSS布局的理解
講講輸入完網(wǎng)址按下回車，到看到網(wǎng)頁這個(gè)過程中發(fā)生了什么。
談?wù)勀銓?duì)Web前端組件化的理解，Web Component會(huì)帶來怎樣的影響
談?wù)勀銓?duì)前端資源下載性能優(yōu)化的經(jīng)驗(yàn)和思考
現(xiàn)在有很多的MV*框架，你對(duì)它們有什么看法
iOS體驗(yàn)好在哪里，Web能趕上么？
網(wǎng)頁游戲怎么做？
Hybrid技術(shù)應(yīng)當(dāng)如何應(yīng)用？
你最愛的前端框架是什么，為什么？
首先老師的題目都很大，不好答，我這里技術(shù)有缺陷，答得不好大家不要噴我，可以好好教育我嘛
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> * { margin: 0; padding: 0; } div { border: 1px solid black; } #sidebar { position: absolute; left: 0; top: 0; width: 95px; } #content { margin-left: 100px; } </style> <script src="../jquery-1.7.1.js" type="text/javascript"></script></head><body> <div id="content"> 主體 </div> <div id="sidebar"> 導(dǎo)航 </div></body></html>這里從理論上說，便是觸發(fā)了siderbar元素的定位特性，其BFC與文檔流不相關(guān)了當(dāng)然，這里siderbar可以使用float實(shí)現(xiàn)，但是float本身應(yīng)該用于處理文字與圖片包裹的需求，我們本著職責(zé)分離的想法就別那樣干了而且使用float還會(huì)引起元素坍塌，這里還要費(fèi)勁去處理清除浮動(dòng)
這個(gè)就是妄想設(shè)置行內(nèi)元素高度的結(jié)果，獨(dú)立的inline元素出現(xiàn)時(shí)，會(huì)為其創(chuàng)建一個(gè)line boxes作為容器（文字框）一行文字一個(gè)line Boxes，一行高度由其中最高的行內(nèi)元素確定，上例中有一個(gè)height為0的img，卻為其生成了一個(gè)高度為10的行高下面的代碼中，div會(huì)被行內(nèi)元素?fù)伍_，其高度會(huì)由span中l(wèi)ine-height高者決定<div> <span id="span1">主體 </span><span id="span2">導(dǎo)航 </span></div>
請(qǐng)求返回后，便進(jìn)入了我們關(guān)注的前端模塊
簡(jiǎn)單來說，瀏覽器會(huì)解析HTML生成DOM Tree，其次會(huì)根據(jù)CSS生成CSS Rule Tree，而Javascript又可以根據(jù)DOM API操作DOM上面的文字描述的很簡(jiǎn)單，事實(shí)上發(fā)生的事情，卻很復(fù)雜，這里與代碼實(shí)現(xiàn)也很有關(guān)聯(lián)，但是有幾個(gè)關(guān)鍵點(diǎn)：頁面一定會(huì)等所有的HTML結(jié)構(gòu)與CSS加載下來才渲染（webkit內(nèi)核）比如我們這里使用fiddler限制其外鏈加載，我們?yōu)槠湎匏贋?0s<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> div { border: 1px solid black; } a { color: Red; } </style></head><body> <div> <a id="span1" >主體 </a><span id="span2">導(dǎo)航 </span> </div> <link href=" http://kb.cnblogs.com/style/common.css" rel="stylesheet" /></body></html>
我們看到事實(shí)上62ms后頁面整體dom結(jié)構(gòu)就加載好了，這個(gè)時(shí)候我們是可以使用js操作dom結(jié)構(gòu)的，但這里一個(gè)重點(diǎn)是：CSS外鏈加載會(huì)阻塞js的執(zhí)行，并且重置CSS會(huì)引起瀏覽器的回流或者重繪，也就是：css外鏈會(huì)阻塞整個(gè)頁面的渲染（顯示），但是其DOM結(jié)構(gòu)是可操作的，中間如果有阻塞性的操作，比如alert的話會(huì)強(qiáng)制瀏覽器繪制頁面上面的特性與css外鏈的順序無關(guān)，并且有幾個(gè)樣式相關(guān)的操作，便會(huì)執(zhí)行幾次，最終采用最近或者優(yōu)先級(jí)最高的樣式<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> div { border: 1px solid black; } a { color: Red; } </style></head><body> <div> <a id="span1" >主體 </a><span id="span2">導(dǎo)航 </span> </div> <script> document.getElementById('span2').innerHTML = '測(cè)試'; alert(1) </script> <script> alert(2) </script> <link href=" http://kb.cnblogs.com/style/common.css" rel="stylesheet" /></body></html>
① index.apsx
② index.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="_00綜合_11mvc_index" %>
public partial class _00綜合_10doc_write_index : System.Web.UI.Page{ PRotected void Page_Load(object sender, EventArgs e) { }}最終這兩個(gè)文件會(huì)和到一起，兩個(gè)文件之間也可通信，而通信的橋梁是.net一個(gè)個(gè)被人詬病的組件，比如：
① button組件
② datalist
③ label組件
④ 偉大的gridview
各個(gè)組件在C#層面上會(huì)擁有一個(gè)ID進(jìn)行約束，.cs文件便可以根據(jù)該ID為其注冊(cè)各個(gè)事件，這個(gè)與javascript的模型便非常類似了
View分離的第一個(gè)優(yōu)點(diǎn)便是，用戶的界面變得干凈了，不會(huì)有代碼混雜的現(xiàn)象，第二個(gè)優(yōu)點(diǎn)便是業(yè)務(wù)端的代碼可以再分離，從而多了數(shù)據(jù)層、業(yè)務(wù)層等各個(gè)概念
而組件的出現(xiàn)讓.net變成了世界上開發(fā)最快的語言，這點(diǎn)誰也不可否認(rèn)，而這些都是前端MVC出現(xiàn)或者組件出現(xiàn)的意義
與asp當(dāng)初的情況一致，js進(jìn)行dom操作或者字符串拼接的目的事實(shí)上就是想形成一個(gè)可供展示的View，前端jser已經(jīng)再也不能忍受這種代碼了：
很多時(shí)候，我們想將對(duì)應(yīng)的模板單獨(dú)的放到一個(gè)地方，每次樣式若是有更改，只需要更改那個(gè)文件即可，只要與之呼應(yīng)的“ID”不丟失即可，比如這樣的結(jié)構(gòu)和代碼：
View Code<div class="cui-pop-box"> <div class="cui-hd"> <%=title%> </div> <div class="cui-bd"> <div class="cui-error-tips"> <%=content%></div> <div class="cui-roller-btns"> <% for(var i = 0, len = btns.length; i < len; i++ ) {%> <div class="cui-flexbd <%=btns[i].className%>"> <%=btns[i].name%></div> <% } %> </div> </div></div>這樣做的道理是，這個(gè)樣子做到了表現(xiàn)與行為分離，我們分得開，然后回根據(jù)基類的一個(gè)機(jī)制，讓他們最終合到一塊，以完成功能
這里我們依舊需要強(qiáng)調(diào)一個(gè)前提：“ID”關(guān)聯(lián)不可丟失，否則“行為”將不可表現(xiàn)，只要兩者間關(guān)聯(lián)不丟，這里便可輕松滿足以下邏輯：
① CSS名修改（非標(biāo)識(shí)性CSS名）
② 標(biāo)簽改變
③ 描述性文字改變
......
重構(gòu)一書有說，重復(fù)性或者類似重復(fù)性的代碼應(yīng)該抽象為一個(gè)方法，程序員也不傻，在重復(fù)使用需要提示框需求后便會(huì)學(xué)會(huì)形成alert組件
組件的出現(xiàn)是代碼抽象，代碼重用的標(biāo)識(shí)，這個(gè)樣子既可以減少工作量也可以減少代碼容量，而組件的實(shí)現(xiàn)與MVC思維的很好詮釋
比如以下代碼：
View Code
新聞熱點(diǎn)
疑難解答
圖片精選
