資訊專欄INFORMATION COLUMN
摘要：前言我的項目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好前端作為一個最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗放在第一位而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學(xué)，所以如何優(yōu)化自己的項目，提高頁面的加載速度成為重中之重資源的下載及解析對前
前言
我的項目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好
前端作為一個最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗放在第一位. 而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學(xué)，所以如何優(yōu)化自己的項目，提高頁面的加載速度成為重中之重.
對前端同學(xué)來說，弄清楚頁面上資源的下載和解析順序是及其重要的，知道了它們的加載順序，就知道對于特定的場景，應(yīng)該如何去優(yōu)化. 一般來說，頁面上的資源無非這么幾種:
Html
Css
Js
Img
Html: 邊下載邊解析，最終形成DOM樹
Css: 邊下載邊解析，解析成css樹，并且每加載一個新的css文件，都會重新整合之前下載的css生成新Css樹，最終構(gòu)建完的css樹會和DOM樹結(jié)合成Render樹，并被瀏覽器渲染
JS: 下載完再立即逐行解析執(zhí)行
Img: 當(dāng)HTML解析到等標(biāo)簽的時候會像服務(wù)器發(fā)起下載對應(yīng)img的請求，下載是并行的
那么各資源的下載和解析對其他的資源的下載和解析是否存在影響呢？
Html: Html不管是下載還是解析都不會影響后續(xù)資源的下載和解析，當(dāng)自身解析到link標(biāo)簽時，會并行下載css資源. 解析到img標(biāo)簽時，會并行下載img資源
Css: Css的下載不會影響后續(xù)資源的下載和解析，Css的解析雖然不會影響到后續(xù)資源的下載，但會影響到后續(xù)資源的解析
Js: Js無論是下載還是解析都會阻塞后續(xù)資源的下載及解析
Img: Img的下載和呈現(xiàn)對后續(xù)資源的下載和解析無影響
( 特別注意，是"后續(xù)資源" )
從上我們可以知道，資源的相互阻塞主要來自于css和js
首先是js, 只要html解析到了script標(biāo)簽，就開始下載js，這個標(biāo)簽后的所有資源的下載和解析全部停滯. js下載完成之后，會立刻執(zhí)行，執(zhí)行的時候，同樣會堵塞后續(xù)資源的下載和執(zhí)行.直到該js執(zhí)行完成 (原因在于js可能會改變dom結(jié)構(gòu)和css屬性導(dǎo)致重繪，所以在js下載和執(zhí)行的時候?qū)罄m(xù)的dom的建立顯得很沒必要)
然后是css, css解析的時候，會阻礙后續(xù)所有資源的解析.特別是js, js雖然是下載完就立刻執(zhí)行，但其實它必須要等到它之前的css全部解析完畢之后才能解析.
所以我們可以看出來，Css和Js都會影響到后續(xù)文件的下載和解析
當(dāng)用戶能夠在1-2秒內(nèi)打開頁面，看到信息的展示，或者能夠開始進(jìn)行下一步的操作，用戶會感覺速度還好，可以接受. 而頁面如果在2-5秒后才進(jìn)入可用的狀態(tài)，用戶的耐心會逐漸喪失. 而如果一個界面超過5秒甚至更久才能顯示出來，這對用戶來說基本是無法忍受的，也許有一部分用戶會退出重新進(jìn)入，但更多的用戶會直接放棄使用。
對于頁面呈現(xiàn)來說，不管是pc端還是移動端，最最重要一點是能讓用戶盡可能快的看到盡可能多的樣式和內(nèi)容. 所以業(yè)界有了所謂1秒鐘法則:
2g網(wǎng)絡(luò)：1秒內(nèi)完成dns查詢、和后臺服務(wù)器建立連接
3g網(wǎng)絡(luò)：1秒內(nèi)完成首字顯示（首字時間）
wifi網(wǎng)絡(luò)：1秒內(nèi)完成首屏顯示（首屏?xí)r間）
我們想讓用戶盡快地看到盡可能多的內(nèi)容和樣式，除了保證各加載資源在滿足需求的情況下體積盡可能的小，還要保證各資源正確的加載順序，防止資源的相互阻塞:
減少html中不必要的標(biāo)簽(比如div, 加快dom樹的生成)
把css放在頭部(以便能夠更快的生成css樹，從而盡快地dom樹結(jié)合成render樹，從而能夠以最快的速度被瀏覽器渲染出來)
js放在尾部(或者用 window.onload 等到頁面完全加載完成之后再執(zhí)行)
減少資源文件大小(壓縮img,css,js)
將大img切成多份小img加快加載速度(由于img是并行加載)
同時，由于在http請求的發(fā)送和回應(yīng)上會消耗很大一部分時間，所以如何盡量減少 http請求也是優(yōu)化的大頭:
合并css文件
打包合并js文件
采用sprite合成img
總之，優(yōu)化是一個很好的習(xí)慣. 但是，從工程的角度來講，過度優(yōu)化有時會造成很高昂的代價. 所以，一個好的工程師，不僅僅知道該怎么優(yōu)化，更重要的是知道這里該不該優(yōu)化.
以上是從一些很通用且淺顯的角度來分析如何優(yōu)化自己的項目.后續(xù)會慢慢講到更多的優(yōu)化技巧，比如js的延遲加載，按需加載等等，敬請期待
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/49900.html
摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上 前言 優(yōu)化！ 又是優(yōu)化！ 切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...
摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上 前言 優(yōu)化！ 又是優(yōu)化！ 切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...
摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應(yīng)用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實際上 前言 優(yōu)化！ 又是優(yōu)化！ 切圖崽們作為整個web應(yīng)用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...
摘要：之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到規(guī)范推出之后，模塊化才真正迅猛發(fā)展起來。因為有了模塊化的概念，才有了按需加載的概念。 前言 我們來玩樂高積木吧 模塊化Js已經(jīng)成為了老生常談，不過在JavaScript設(shè)計之初，由于定位的問題并沒有提供類的功能，開發(fā)者需要模擬出類似的功能，來隔離、組織復(fù)雜的JavaScript代碼。之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一...
摘要：之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到規(guī)范推出之后，模塊化才真正迅猛發(fā)展起來。因為有了模塊化的概念，才有了按需加載的概念。 前言 我們來玩樂高積木吧 模塊化Js已經(jīng)成為了老生常談，不過在JavaScript設(shè)計之初，由于定位的問題并沒有提供類的功能，開發(fā)者需要模擬出類似的功能，來隔離、組織復(fù)雜的JavaScript代碼。之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一...
閱讀 2469·2021-09-22 16:01
閱讀 3217·2021-09-22 15:41
閱讀 1240·2021-08-30 09:48
閱讀 565·2019-08-30 15:52
閱讀 3387·2019-08-30 13:57
閱讀 1771·2019-08-30 13:55
閱讀 3742·2019-08-30 11:25
閱讀 821·2019-08-29 17:25
