今天微博看到了寒冬大神的面試題，覺得挺有意思的，這里就做一點解答
http://weibo.com/1196343093/Bhj510t50談談你對CSS布局的理解
講講輸入完網址按下回車，到看到網頁這個過程中發生了什么。
談談你對Web前端組件化的理解，Web Component會帶來怎樣的影響
談談你對前端資源下載性能優化的經驗和思考
現在有很多的MV*框架，你對它們有什么看法
iOS體驗好在哪里，Web能趕上么？
網頁游戲怎么做？
Hybrid技術應當如何應用？
你最愛的前端框架是什么，為什么？
首先老師的題目都很大，不好答，我這里技術有缺陷，答得不好大家不要噴我，可以好好教育我嘛
<!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"> 導航 </div></body></html>這里從理論上說，便是觸發了siderbar元素的定位特性，其BFC與文檔流不相關了當然，這里siderbar可以使用float實現，但是float本身應該用于處理文字與圖片包裹的需求，我們本著職責分離的想法就別那樣干了而且使用float還會引起元素坍塌，這里還要費勁去處理清除浮動
這個就是妄想設置行內元素高度的結果，獨立的inline元素出現時，會為其創建一個line boxes作為容器（文字框）一行文字一個line Boxes，一行高度由其中最高的行內元素確定，上例中有一個height為0的img，卻為其生成了一個高度為10的行高下面的代碼中，div會被行內元素撐開，其高度會由span中line-height高者決定<div> <span id="span1">主體 </span><span id="span2">導航 </span></div>
請求返回后，便進入了我們關注的前端模塊
簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而Javascript又可以根據DOM API操作DOM上面的文字描述的很簡單，事實上發生的事情，卻很復雜，這里與代碼實現也很有關聯，但是有幾個關鍵點：頁面一定會等所有的HTML結構與CSS加載下來才渲染（webkit內核）比如我們這里使用fiddler限制其外鏈加載，我們為其限速為10s<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">導航 </span> </div> <link href=" http://kb.cnblogs.com/style/common.css" rel="stylesheet" /></body></html>
我們看到事實上62ms后頁面整體dom結構就加載好了，這個時候我們是可以使用js操作dom結構的，但這里一個重點是：CSS外鏈加載會阻塞js的執行，并且重置CSS會引起瀏覽器的回流或者重繪，也就是：css外鏈會阻塞整個頁面的渲染（顯示），但是其DOM結構是可操作的，中間如果有阻塞性的操作，比如alert的話會強制瀏覽器繪制頁面上面的特性與css外鏈的順序無關，并且有幾個樣式相關的操作，便會執行幾次，最終采用最近或者優先級最高的樣式<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">導航 </span> </div> <script> document.getElementById('span2').innerHTML = '測試'; 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) { }}最終這兩個文件會和到一起，兩個文件之間也可通信，而通信的橋梁是.net一個個被人詬病的組件，比如：
① button組件
② datalist
③ label組件
④ 偉大的gridview
各個組件在C#層面上會擁有一個ID進行約束，.cs文件便可以根據該ID為其注冊各個事件，這個與javascript的模型便非常類似了
View分離的第一個優點便是，用戶的界面變得干凈了，不會有代碼混雜的現象，第二個優點便是業務端的代碼可以再分離，從而多了數據層、業務層等各個概念
而組件的出現讓.net變成了世界上開發最快的語言，這點誰也不可否認，而這些都是前端MVC出現或者組件出現的意義
與asp當初的情況一致，js進行dom操作或者字符串拼接的目的事實上就是想形成一個可供展示的View，前端jser已經再也不能忍受這種代碼了：
很多時候，我們想將對應的模板單獨的放到一個地方，每次樣式若是有更改，只需要更改那個文件即可，只要與之呼應的“ID”不丟失即可，比如這樣的結構和代碼：
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>這樣做的道理是，這個樣子做到了表現與行為分離，我們分得開，然后回根據基類的一個機制，讓他們最終合到一塊，以完成功能
這里我們依舊需要強調一個前提：“ID”關聯不可丟失，否則“行為”將不可表現，只要兩者間關聯不丟，這里便可輕松滿足以下邏輯：
① CSS名修改（非標識性CSS名）
② 標簽改變
③ 描述性文字改變
......
重構一書有說，重復性或者類似重復性的代碼應該抽象為一個方法，程序員也不傻，在重復使用需要提示框需求后便會學會形成alert組件
組件的出現是代碼抽象，代碼重用的標識，這個樣子既可以減少工作量也可以減少代碼容量，而組件的實現與MVC思維的很好詮釋
比如以下代碼：
View Code
新聞熱點
疑難解答
