#前端性能優化概覽 ##網站優化是多方面的 **后端** 1. 架構 2. 數據庫優化 3. PHP優化 4. 數據緩存 5. 網頁緩存 靜態化 與URL路由 **網絡** **前端** ob_flush(): flush(); ##網頁緩存 網頁緩存和靜態化 提升服務器負載能力 緩存策略: 1、時間過期 2、更新時刪除緩存讀取時生成 3、更新時重新生成緩存 訪問量不同的頁面如何緩存?比如名人的微博與普通人的微博 if ($total < 100 || $total % 10 == 0) URL路由可能是偽靜態化 1、SEO友好 2、便于理解、收藏 3、安全 示例:url路由與網頁緩存 **網頁優化是多方面的** 1、后端 2、網絡 CDN、域名 3、前端 ##前端優化 1、減少數據傳輸 不減少頁面元素如果減少數據量? 2、優化資源加載 同樣的內容應該如何優化? 3、代碼級優化 -- HTML、CSS、JavaScript 性能相差多少? 4、需要后端如何配合? ** 減少資源傳輸 ** 如何減少? 少傳輸、傳輸小的、不傳輸 1、減少請求數 除了合并還有其他方式能減少請求數嗎? 2、減少傳輸數據體積 3、使用緩存 減少資源傳輸 1、減少請求數 a)合并請求(CSS、JS、image-sprite) jsversion.php 2、減少傳輸數據體積 除了壓縮還能從哪些方面入手? 3、使用緩存 減少資源傳輸 1、減少請求數 a)合并請求(CSS、JS、image-sprite) b)css3 (shadow border-radius gradient rotate) c)部分image采用data-uri(示例img_datauri.html) d)按需加載 圖片按需加載(示例img_lazyload) js/css按需加載 2、減少傳輸數據體積 除了壓縮還能從哪些方面入手? a)壓縮(gzip、GCCompiler、YUICompressor)(示例jsmin) b)簡化頁面結構(首屏內容輸出) c)減少cookie(獨立靜態資源域名) d)合適的圖片壓縮比和類型(gif、png、jpg) e)響應式設計(media query、ua) 3、使用緩存 a)靜態資源外鏈 b)http cache header(Cache-Control、Expires、Vary、Last- Modified、Etag)需要服務器配合 c)Web Storage(Session Storage、Local Storage) d)Hijax(History+Ajax) e)CDN 優化資源加載 如何優化? 用戶先看到一部分、加大并發下載 1、盡早輸出后端緩沖區 2、CSS、JS加載順序 3、異步加載策略 4、并行加載策略 1、盡早輸出后端緩沖區 優先輸出header,瀏覽器下載資源是多線程的 2、CSS、JS加載順序 CSS放頁面頭部,JS放頁面底部 2、CSS、JS加載順序 a)瀏覽器會等待JS執行完畢,再執行接下來的渲染 b)CSS是并行加載的 c)CSS放前面防止頁面渲染抖動和閃爍 d)CSS放前面減少瀏覽器重繪和重排,提高效率 示例:long_js.html 3、異步加載策略 a)JS異步加載方式(defer/async/insert into head) b)異步加載不會阻塞瀏覽器渲染 c)按需加載,延遲加載或者交互再加載 4、并行加載策略(示例multi_down.html) 采用不同的靜態域名,瀏覽器對同一域名請求數有限制 代碼優化 1、HTML a)減少DOM數量 b)減少層級 c)不做錯誤嵌套 2、CSS a)優化選擇器。從右到左原則。 效率:id、類、標簽、子、屬性、偽選擇器、通配符 CSS從右到左原則 效率不高 body * { } ul li a { } #main-nav > li { } 看著快其實慢 ul#top_nav { } 畫蛇添足 改進 .li-a { } .main-li { } #top_nav { } 3、編寫高效的JS 作用域、DOM操作、事件代理、時間分片 作用域鏈 少用全部變量 示例:scope_vs.html 高效JS-訪問DOM a)JS與DOM的橋梁,JS訪問DOM代價較大 b)最小化DOM訪問,局部變量緩存 c)html collections不是js數組,length動態更新,必要時轉換成js 數組效率更高 示例:dom_vs.html、html_collection.html 高效JS-DOM樹與渲染樹 a)什么是DOM樹與渲染樹?什么是重繪與重排版? b)什么時候需要重排版: 元素尺寸內容位置、可見元素、重口尺寸、初始化 c)訪問這些屬性需要馬上執行完渲染隊列: offsetTop、offsetLeft、offsetWidth、offsetHeight clientTop。。。 scrollTop。。。 d)JS修改DOM如何提高效率? a)合并一次修改 b)從文檔移除,修改后再插入文檔 隱藏 內存構建 示例:dom_add.html 高效JS-事件托管 a)不要寫事件句柄在DOM元素上 事件句柄發生在onload或domready,用戶不會100%點擊 b)采用事件托管,合并管理 事件托管可以利用冒泡用少量句柄實現 事件托管把動作處理和靜態頁面分離,修改方便 第四章 更高效的代碼執行 高效JS-避免長時間JS腳本 a)調用棧限制 b)用戶感知(超過100ms) c)分拆執行 示例:work.html 需要服務器端配合處理 1、gzip壓縮 web服務器開啟 2、緩存 服務器頁面輸出http頭信息 3、并發、按需 服務器端動態配置域名,靈活配置資源 4、頁面靜態化 提高負載、SEO、便于理解、安全。偽靜態化 5、減少請求 服務器端合并文件、調用壓縮 版本控制? CSS、JS壓縮之版本控制 好的版本處理: a)瀏覽器不需要刷新 b)容易回滾 c)修改才生成新的版本 d)合并處理同樣遵循上面3條 如何做到? CSS、JS壓縮之版本控制 簡單處理方式: 1、a.html引用<script src=“a.js?v=1.0.1”></script> 2、a.html引用<script src=“a-1.0.1.js”></script> 哪種方式好? 如何上線? 如何回滾? 如何維護? CSS、JS壓縮之版本控制 Hash處理方式: 開發時<script src=“a.js”></script> 上線替換<script src=“a-xxxxxx.js”></script> a)手工版本維護 b)基于目錄修改時間