前端優化的一些小技巧

減小HTTP請求次數或者減小請求數據的大小

頁面中每發送一次HTTP請求，都須要完成請求+響應這個完整的HTTP事務，會消耗一些時間，也可能會致使HTTP連接通道的堵塞，爲了提升頁面加載速度和運行的性能，咱們應該減小HTTP的請求次數和減小請求內容的大小（請求的內容越大，消耗的時間越長）

一、採用CSS雪碧圖（CSS Sprit / CSS 圖片精靈）技術，把一些小圖合併在一張大圖上，使用的時候經過背景圖片定位，定位到具體的某一張小圖上

.pubBg{
	background:url('../img/sprit.png') no-repeat;
	background-size:x y; /*和原圖的大小保持一致*/
}
.box{
	background-position:x y; /*經過背景定位，定位到具體的位置，展現不一樣的圖片便可*/
}
...

<div class='pubBg box'></div>
複製代碼

二、真實項目中，咱們最好把CSS或者JS文件進行合併壓縮；尤爲是在移動端開發的時候，若是CSS或者JS內容不是不少，咱們能夠採起內嵌式，以此減小HTTP請求的次數，加快頁面加載速度；

1）CSS合併成一個，JS也最好合併成一個 2）首先同過一些工具（例如：webpack）把合併後的CSS或者JS壓縮成 xxx.min.js，減小文件大小 3）服務器端開啓資源文件的GZIP壓縮 ... 經過一些自動化工具完成CSS以及JS的合併壓縮，或者再完成LESS轉CSS，ES6轉ES5等操做，咱們把這種自動化構建模式，稱之爲前端「工程化」開發

三、採用圖片懶加載技術，在頁面開始加載的時候，不請求真實的圖片地址，而是用默認圖佔位，當頁面加載完成後，在根據相關的條件依次加載真實圖片（減小頁面首次加載HTTP請求的次數）

真實項目中，咱們開始圖片都不加載，頁面首次加載完成，先把第一屏幕中能夠看見的圖片進行加載，隨着頁面滾動，在把下面區域中可以呈現出來的圖片進行加載

根據圖片懶加載技術，咱們還能夠擴充出，數據的懶加載 1）開始加載頁面的時候，咱們只把首屏或者前兩屏的數據從服務器端進行請求（有些網站首屏數據是後臺渲染好，總體返回給客戶端呈現的） 2）當頁面下拉，滾動到哪一個區域，在把這個區域須要的數據進行請求（請求回來作數據綁定以及圖片延遲加載等） 3）分頁展現技術採用的也是數據的懶加載思想實現的：若是咱們請求獲取的數據是不少的數據，咱們最好分批請求，開始只請求第一頁的數據，當用戶點擊第二頁（微博是下拉到必定距離後，再請求第二頁數據...）的時候在請求第二頁數據...

四、對於不常常更新的數據，最好採用瀏覽器的304緩存作處理（主要由服務器端處理）

例如： 第一次請求CSS和JS下來，瀏覽器會把請求的內容緩存起來，若是作了304處理，用戶再次請求CSS和JS，直接從緩存中讀取，不須要再去服務器獲取了（減小了HTTP請求次數）

當用戶強制刷新頁面（CTRL+F5）或者當前緩存的CSS或者JS發生了變更，都會重新從服務器端拉取

...

對於客戶端來說，咱們還能夠基於localStorage來作一些本地存儲，例如：第一次請求的數據或者不常常更新的CSS和JS，咱們均可以把內容存儲在本地，下一次頁面加載，咱們從本地中獲取便可，咱們設定必定的期限或者一些標識，能夠控制在某個階段從新從服務器獲取

五、使用字體圖標代替一些頁面中的位圖（圖片），這樣不只作適配的時候方便，並且更加輕量級，並且減小了HTTP請求次數（相似於雪碧圖）

六、若是當前頁面中出現了AUDIO或者VIDEO標籤，咱們最好設置它們的preload=none：頁面加載的時候，音視頻資源不進行加載，播放的時候再開始加載（減小頁面首次加載HTTP請求的次數）

preload=auto：頁面首次加載的時候就把音視頻資源進行加載了 preload=metadata：頁面首次加載的時候只把音視頻資源的頭部信息進行加載 ...

七、在客戶端和服務器端進行數據通訊的時候，咱們儘可能採用JSON格式進行數據傳輸

[優點] 1）JSON格式的數據，可以清晰明瞭的展現出數據結構，並且也方便咱們獲取和操做 2）相對於很早之前的XML格式傳輸，JSON格式的數據更加輕量級 3）客戶端和服務器端都支持JSON格式數據的處理，處理起來很是的方便

真實項目中，並非全部的數據都要基於JSON，咱們儘量這樣作，可是對於某些特殊需求（例如：文件流的傳輸或者文檔傳輸），使用JSON就不合適了

八、採用CDN加速

CDN：分佈式（地域分佈式）

關於編寫代碼時候的一些優化技巧

除了減小HTTP請求次數和大小能夠優化性能，咱們在編寫代碼的時候，也能夠進行一些優化，讓頁面的性能有所提高（有些很差的代碼編寫習慣，會致使頁面性能消耗太大，例如：內存泄漏）

一、在編寫JS代碼的時候，儘可能減小對DOM的操做（VUE和REACT框架在這方面處理的很是不錯）

在JS中操做DOM是一個很是消耗性能的事情，可是咱們又不可避免的操做DOM，咱們只能儘可能減小對於它的操做

[操做DOM弊端] 1）DOM存在映射機制（JS中的DOM元素對象和頁面中的DOM結構是存在映射機制的，一改則都改），這種映射機制，是瀏覽器按照W3C標準完成對JS語言的構建和DOM的構建（其實就是構建了一個監聽機制），操做DOM是同時要修改兩個地方，相對於一些其它的JS編程來講是消耗性能的 2）頁面中的DOM結構改變或者樣式改變，會觸發瀏覽器的迴流（瀏覽器會把DOM結構從新進行計算，這個操做很耗性能）和重繪（把一個元素的樣式從新渲染） ...

二、編寫代碼的時候，更多的使用異步編程

同步編程會致使：上面東西完不成，下面任務也作不了，咱們開發的時候，能夠把某一個區域模塊都設置爲異步編程，這樣只要模塊之間沒有必然的前後順序，均可以獨立進行加載，不會受到上面模塊的堵塞影響（用的很少）

尤爲是AJAX數據請求，咱們通常都要使用異步編程，最好是基於promise設計模式進行管理（項目中常用 fetch、vue axios 等插件來進行AJAX請求處理，由於這些插件中就是基於promise設計模式對ajax進行的封裝處理）

三、在真實項目中，咱們儘量避免一次性循環過多數據（由於循環操做是同步編程），尤爲是要避免while致使的死循環操做

四、CSS選擇器優化

1）儘可能減小標籤選擇器的使用 2）儘量少使用ID選擇器，多使用樣式類選擇器（通用性強） 3）減小選擇器前面的前綴，例如：.headerBox .nav .left a{ } （選擇器是從右向左查找的） ...

五、避免使用CSS表達式

/*CSS表達式*/
.box{
	background-color:expression((new Date()).getHours()%2?'red':'blue')
}
複製代碼

六、減小頁面中的冗餘代碼，儘量提升方法的重複使用率：「低耦合高內聚」

七、最好CSS放在HEAD中，JS放在BODY尾部，讓頁面加載的時候，先加載CSS，在加載JS（先呈現頁面，在給用戶提供操做）

八、JS中避免使用eval

1）性能消耗大 2）代碼壓縮後，容易出現代碼執行錯亂問題

九、JS中儘可能減小閉包的使用

1）閉包會造成一個不銷燬的棧內存，過多的棧內存累積會影響頁面的性能 2）還會容易致使內存的泄漏

閉包也有本身的優點：保存和保護，咱們只能儘可能減小，可是無可避免

十、在作DOM事件綁定的時候，儘可能避免一個個的事件綁定，而是採用性能更高的事件委託來實現

事件委託（事件代理） 把事件綁定給外層容器，當裏面的後代元素相關行爲被觸發，外層容器綁定的方法也會被觸發執行（冒泡傳播機制致使），經過事件源是誰，咱們作不一樣的操做便可

十一、儘可能使用CSS3動畫代替JS動畫，由於CSS3的動畫或者變形都開啓了硬件加速，性能比JS動畫好

十二、編寫JS代碼的時候儘量使用設計模式來構建體系，方便後期的維護，也提升了擴充性等

1三、CSS中減小對濾鏡的使用，頁面中也減小對於FLASH的使用

關於頁面的SEO優化技巧

一、頁面中杜絕出現死連接（404頁面），並且對於用戶輸入一個錯誤頁面，咱們要引導到404提示頁面中（服務器處理的）

二、避免瀏覽器中異常錯誤的拋出

儘量避免代碼出錯 使用TRY CATCH作異常信息捕獲 ...

三、增長頁面關鍵詞優化