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