前端頁面渲染優化

1.禁止使用iframe（阻塞父文檔onload事件）；
*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

2.禁止使用gif圖片實現loading效果（下降CPU消耗，提高渲染性能）；
三、使用CSS3代碼代替JS動畫（儘量避免重繪重排以及迴流）css3平面動畫開啓translateZ(0)，打開瀏覽器3d加速，在必定程度可緩解卡頓。不宜多用；

四、對於一些小圖標，可使用base64位編碼，以減小網絡請求。但不建議大圖使用，比較耗費CPU；
小圖標優點在於：
1.減小HTTP請求；
2.避免文件跨域；
3.修改及時生效；

五、頁面頭部的<style></style> 會阻塞頁面；（由於 Renderer進程中 JS線程和渲染線程是互斥的）；
六、頁面頭部<script</script> 會阻塞頁面；（由於 Renderer進程中 JS線程和渲染線程是互斥的）；
七、頁面中空的 href 和 src 會阻塞頁面其餘資源的加載 (阻塞下載進程)；

八、網頁Gzip，CDN託管，data緩存 ，圖片服務器；
九、前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
十、用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。
十一、當須要設置的樣式不少時設置className而不是直接操做style。
十二、少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
1三、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
1四、圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

1五、 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。
對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。
向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，
能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，
本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。
減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），
減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。

1六、經過改變src的狀況下**.MP3（不一樣於mp3）在移動端有可能不能播放。