[toc] ## 減少http請求次數和大小 ### 雪碧圖 采用CSS雪碧圖(CSS Sprit/CSS 圖片精靈)技術，把一些小圖合并在一張大圖上，使用的時候通過背景圖片定位，定位到某一張小圖上 ``` .pubBg{ background:url("../img/sprit.png") no-repeat; background-size:和原圖大小保持一致 } .box{ background-position:x y; /* 通過背景定位，定位到具體的位置，展示不同的圖片即可 */ } ``` ``` <div class="pubBg box"></div> ``` ### 懶加載 在頁面開始加載的時候，不請求真實圖片地址，而是用默認圖片占位，當頁面加載完成后，再根據相關條件依次加載真實圖片（減少頁面首次加載HTTP請求的次數）。 ``` 真實項目中，我們開始圖片都不加載，頁面首次加載完成，先把第一屏幕中可以看見的圖片進行加載，隨著頁面滾動，再把下面區域中能夠呈現出來的圖片進行加載。 根據圖片懶加載技術，我們還可以擴充出，數據的懶即在 1)開始加載頁面的時候，我們只把首屏或則前兩屏的數據從服務器端進行請求（有些網站首屏數據是后臺渲染好，整體返回給客戶端呈現的） 2)當頁面下拉，滾動到哪個區域，再把這個區域需要的數據進行請求（請求回來做數據綁定以及圖片延遲加載等） 3)分頁展示技術采用的也是數據的懶加載思想實現的，如果我們請求的數據是很多的數據，我們最好分批請求 4)對于不經常更新的數據，最好采用瀏覽器的304緩存做處理 第一次請求css和jsx下來，瀏覽器會把請求的內容緩存起來，如果做了304，用戶再次請求css和js直接從緩存中讀取，不需要再去服務器獲取了（減少了http請求次數） 當用戶強制刷新頁面（CTRL+F5）或則當前緩存的CSS或則JS發生了變動，都會從新從服務器拉取 ``` ### 緩存 對于不經常更新的數據，最好采用瀏覽器的304緩存做處理 第一次請求css和jsx下來，瀏覽器會把請求的內容緩存起來，如果做了304，用戶再次請求css和js直接從緩存中讀取，不需要再去服務器獲取了（減少了http請求次數） 當用戶強制刷新頁面（CTRL+F5）或則當前緩存的CSS或則JS發生了變動，都會從新從服務器拉取 ### localstorage 對于客戶端來說，我們還可以基于localStorage來做一些本地存儲，例如：第一次請求的數據或則不經常更新的CSS和JS，我們都可以把內容存儲在本地，下一次頁面加載，我們從本地獲取即可，我們設定一定的期限，或則表示，可以控制在某個階段重新從服務器獲取 ### 真實項目中，我們最好把CSS或則JS文件進行合并壓縮 尤其在移動端開發的時候，如果CSS或則JS內容不是很多，我們可以采取內嵌式，告別外鏈式，以此減少http請求次數，加載頁面加載速度。 >1)CSS合并成一個，JS也最好合并成一個 >2)首先通過一些工具(例如:webpack)把合并后的CSS或則JS壓縮成xxx.min.js，減小文件大小 >3)服務器端開啟資源文件的GZIP壓縮 >... >通過一些自動化工具完成CSS以及JS的合并壓縮，或則再完成LESS轉CSS、ES6轉ES5等操作。我們把這種自動化的構建模式，稱之為前端“工程化”開發 ### 在客戶端和服務器端進行數據通信的時候，我們盡量采用JSON格式進行數據傳輸 ``` 1)JSON格式的數據，能夠清晰明了的展示出數據結構，而且也方便我們獲取和操作 2)相對于很早以前的XML格式傳輸，JSON格式的數據更加輕量級 3)客戶端和服務器端都支持JSON格式的處理，處理起來非常的方便 真實項目中，并不是所有的數據都要基于JSON，我們盡可能這樣做，但是對于某些特殊需求（例如：文件流的傳輸或則文檔的傳輸），使用JSON就不合適了 ``` ### preload ``` 如果當前頁面中出現了AUDIO或則VIDEO標簽，我們最好設置它們的preload=none，頁面加載時，音視頻不進行加載，數據播放的時候再加載（介紹頁面首次加載HTTP請求的次數） ``` ``` preload = auto：頁面首次加載的時候就把音視頻資源進行加載了 preload = metadata 頁面首次加載的時候只把音視頻資源的頭部信息進行加載 ``` ### 使用字體圖標代替一些頁面中的位圖（圖片） 這樣不僅做適配的時候方便，而且更加輕量級，而且減少了HTTP請求次數 ### 采用CDN加速 >CDN:服務器(地域分布式) ## 關于編寫代碼時候的一些優化技巧 >除了減少HTTP請求次數和大小可以優化性能，我們在編寫代碼的時候，也可以進行一些優化，讓頁面的性能有所提升（有些不好的代碼編寫習慣，會導致頁面性能消耗太大，例如：內存泄漏） > >1、在編寫JS代碼的時候，盡量減少對DOM的操作，但是我們又不可避免操作DOM，我們只能盡量減少對它的操作 > >[操作DOM弊端] >1)DOM存在映射機制（JS中的DOM元素對象和頁面中的DOM機構是存在映射的，一改則都改），這種映射機制，是瀏覽器按照w3c標準完成的對JS語言的構建和對DOM的構建（其實就是構建了一個監聽機制） >2)操作DOM是同時要修改兩個地方，相對于一些其它的JS編程來說是消耗性能的 > >2)頁面中的DOM結構改變或則樣式改變，會觸發瀏覽器的回流（瀏覽器會把DOM結構重新進行計算，這個操作很耗性能）和重繪（把一個元素的樣式重新渲染） >2、編寫代碼的時候，更多的使用異步編程 >同步編程會導致：上面東西完不成，下面任務也做不了，我們開發的時候，可以把某一個區域模塊都設置為異步編程，這樣只要模塊之間沒有必要的先后順序，都可以獨立進行加載，不會受到上面模塊的堵塞影響（用的不多） > >尤其是AJAX數據請求，我們一般要使用異步編程，最好是基于promise設計模式運行管理（項目中使用fetch axios等插件來進行AJAX請求處理，這些插件中就是基于promise設計模式對ajax進行的處理） >3、在真實項目中，我們盡可能避免一次性循環過多數據（因為循環操作是同步編程），尤其是要避免while循環導致的死循環操作 >4、CSS選擇器優化 >1)盡量減少對標簽選擇器的使用 >2)盡可能少使用ID選擇器，多使用樣式類選擇器（通用型強） >3)減少使用選擇器時候前面的前綴，例如：.headerBox.nav .left a{}，（選擇器是從右向左查找的） >5、 避免使用CSS表達式 ``` .box{ background-color:expression((new Date()).getHours()%2?'red':'blue') } ``` >6、 減少頁面中的冗余代碼，盡可能提高方法的重復使用率：“低耦合高內聚” >7、 最好CSS放在HEAD中，JS放在BODY尾部，讓頁面加載的時候，先加載CSS，再加載JS（先呈現頁面，再給用戶提供操作） >8、JS中避免使用eval >1）性能消耗大 >2）代碼壓縮后，容易出現代碼執行錯亂 >9、JS中盡量減少閉包的使用 >1)閉包會形成一個不銷毀的棧內存，過多的棧內存累積會影響頁面的性能 >2）還會容易導致內存的泄漏 > >閉包也有自己的優勢：保存和保護，我們只能盡量減少，但是無可避免 >10、 在做DOM事件綁定的時候，盡量避免一個個的事件綁定，而是采用性能更高的事件委托 >11、 盡量使用CSS3動畫代替JS動畫，因為CSS3的動畫或則變形開啟了硬件加速，性能比JS動畫好 >12、 編寫JS代碼的時候盡可能使用設計模式來構建體系，方便后期的維護，也提供了擴充性等。 >13、 CSS中減少對濾鏡的使用，頁面中也減少對FLASH的使用 ## SEO優化技巧 1、頁面中杜絕出現死鏈接（404頁面），而且對于用戶輸入一個錯誤頁面，我們要引導到404提示頁面中（服務器處理） 2、避免瀏覽器中異常錯誤的拋出 >盡可能避免代碼出錯 >使用TRY CATCH做異常信息捕獲 3、 增加頁面關鍵詞優化 雅虎36條 JS108條