1. 性能優(yōu)化1

1.1 頁(yè)面重構(gòu)怎么操作？

網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡(jiǎn)化結(jié)構(gòu)、添加可讀性，而在網(wǎng)站前端保持一致的行為。
也就是說(shuō)是在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化，在擴(kuò)展的同時(shí)保持一致的UI。

對(duì)于傳統(tǒng)的網(wǎng)站來(lái)說(shuō)重構(gòu)通常是：

表格(table)布局改為DIV+CSS
使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS、如對(duì)IE6有效的)
對(duì)于移動(dòng)平臺(tái)的優(yōu)化
針對(duì)于SEO進(jìn)行優(yōu)化
深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面

減少代碼間的耦合
讓代碼保持彈性
嚴(yán)格按規(guī)范編寫(xiě)代碼
設(shè)計(jì)可擴(kuò)展的API
代替舊有的框架、語(yǔ)言(如VB)
增強(qiáng)用戶體驗(yàn)
通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中

壓縮JS、CSS、image等前端資源(通常是由服務(wù)器來(lái)解決)
程序的性能優(yōu)化(如數(shù)據(jù)讀寫(xiě))
采用CDN來(lái)加速資源加載
對(duì)于JS DOM的優(yōu)化
HTTP服務(wù)器的文件緩存

1.2 什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

優(yōu)雅降級(jí)：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)針對(duì)舊版本的IE進(jìn)行降級(jí)處理了,使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全不能用。
如：border-shadow

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開(kāi)始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁(yè)面增加不影響基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用。
如：默認(rèn)使用flash上傳，但如果瀏覽器支持 HTML5 的文件上傳功能，則使用HTML5實(shí)現(xiàn)更好的體驗(yàn)；

1.3 前端性能優(yōu)化的方法？

（1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip，CDN托管，data緩存 ，圖片服務(wù)器。

（2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)

（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

（4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。

（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。

（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳。

（8） 避免在頁(yè)面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示比div+css布局慢。

對(duì)普通的網(wǎng)站有一個(gè)統(tǒng)一的思路，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫(kù)操作、減少磁盤IO。向前端優(yōu)化指的是，在不影響功能和體驗(yàn)的情況下，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器，程序能直接取得的結(jié)果不要到外部取得，本機(jī)內(nèi)能取得的數(shù)據(jù)不要到遠(yuǎn)程取，內(nèi)存能取到的不要到磁盤取，緩存中有的不要去數(shù)據(jù)庫(kù)查詢。減少數(shù)據(jù)庫(kù)操作指減少更新次數(shù)、緩存結(jié)果減少查詢次數(shù)、將數(shù)據(jù)庫(kù)執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存、減少讀寫(xiě)文件次數(shù)等。程序優(yōu)化永遠(yuǎn)要優(yōu)化慢的部分，換語(yǔ)言是無(wú)法“優(yōu)化”的。

1.4 頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成

注：這題勝在區(qū)分度高，知識(shí)點(diǎn)覆蓋廣，再不懂的人，也能答出幾句，
而高手可以根據(jù)自己擅長(zhǎng)的領(lǐng)域自由發(fā)揮，從URL規(guī)范、HTTP協(xié)議、DNS、CDN、數(shù)據(jù)庫(kù)查詢、
到瀏覽器流式解析、CSS規(guī)則構(gòu)建、layout、paint、onload/domready、JS執(zhí)行、JS API綁定等等；

詳細(xì)版:

1. 瀏覽器會(huì)開(kāi)啟一個(gè)線程來(lái)處理這個(gè)請(qǐng)求，對(duì) URL 分析判斷如果是 http 協(xié)議就按照 Web 方式來(lái)處理;
2. 調(diào)用瀏覽器內(nèi)核中的對(duì)應(yīng)方法，比如 WebView 中的 loadUrl 方法;
3. 通過(guò)DNS解析獲取網(wǎng)址的IP地址，設(shè)置 UA 等信息發(fā)出第二個(gè)GET請(qǐng)求;
4. 進(jìn)行HTTP協(xié)議會(huì)話，客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭);
5. 進(jìn)入到web服務(wù)器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務(wù)器;
6. 進(jìn)入部署好的后端應(yīng)用，如 PHP、Java、JavaScript、Python 等，找到對(duì)應(yīng)的請(qǐng)求處理;
7. 處理結(jié)束回饋報(bào)頭，此處如果瀏覽器訪問(wèn)過(guò)，緩存上有對(duì)應(yīng)資源，會(huì)與服務(wù)器最后修改時(shí)間對(duì)比，一致則返回304;
8. 瀏覽器開(kāi)始下載html文檔(響應(yīng)報(bào)頭，狀態(tài)碼200)，同時(shí)使用緩存;
9. 文檔樹(shù)建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件（比如css、js）,同時(shí)設(shè)置了cookie;
10. 頁(yè)面開(kāi)始渲染DOM，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等，頁(yè)面顯示完成。

簡(jiǎn)潔版:

1. 瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求；
2. 服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
3. 瀏覽器對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語(yǔ)法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
4. 載入解析到的資源文件，渲染頁(yè)面，完成。

1.5 平時(shí)如何管理你的項(xiàng)目？

先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；

編寫(xiě)習(xí)慣必須一致（例如都是采用繼承式的寫(xiě)法，單樣式都寫(xiě)成一行）；

標(biāo)注樣式編寫(xiě)人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

頁(yè)面進(jìn)行標(biāo)注（例如 頁(yè)面 模塊 開(kāi)始和結(jié)束）；

CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）；

JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。

圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來(lái)的管理

推薦文章

Web性能的方方面面

推薦電子書(shū)

前端常見(jiàn)面試題匯總