切圖崽的自我修養(yǎng)－提高項目加載速度

yanwei 發(fā)布于2019-08-01 15:25 / 2579人閱讀

摘要：前言我的項目沒問題，是用戶的網(wǎng)絡環(huán)境不夠好前端作為一個最貼近用戶的技術工種，毫無疑問應該把戶體驗放在第一位而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學，所以如何優(yōu)化自己的項目，提高頁面的加載速度成為重中之重資源的下載及解析對前

前言

我的項目沒問題，是用戶的網(wǎng)絡環(huán)境不夠好

前端作為一個最貼近用戶的技術工種，毫無疑問應該把戶體驗放在第一位. 而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學，所以如何優(yōu)化自己的項目，提高頁面的加載速度成為重中之重.

資源的下載及解析

對前端同學來說，弄清楚頁面上資源的下載和解析順序是及其重要的，知道了它們的加載順序，就知道對于特定的場景，應該如何去優(yōu)化. 一般來說，頁面上的資源無非這么幾種:

Html

Css

Img

資源加載的特性

Html: 邊下載邊解析，最終形成DOM樹

Css: 邊下載邊解析，解析成css樹，并且每加載一個新的css文件，都會重新整合之前下載的css生成新Css樹，最終構建完的css樹會和DOM樹結合成Render樹，并被瀏覽器渲染

JS: 下載完再立即逐行解析執(zhí)行

Img: 當HTML解析到等標簽的時候會像服務器發(fā)起下載對應img的請求，下載是并行的

資源加載的相互影響

那么各資源的下載和解析對其他的資源的下載和解析是否存在影響呢？

Html: Html不管是下載還是解析都不會影響后續(xù)資源的下載和解析，當自身解析到link標簽時，會并行下載css資源. 解析到img標簽時，會并行下載img資源

Css: Css的下載不會影響后續(xù)資源的下載和解析，Css的解析雖然不會影響到后續(xù)資源的下載，但會影響到后續(xù)資源的解析

Js: Js無論是下載還是解析都會阻塞后續(xù)資源的下載及解析

Img: Img的下載和呈現(xiàn)對后續(xù)資源的下載和解析無影響

( 特別注意，是"后續(xù)資源" )

罪魁禍首

從上我們可以知道，資源的相互阻塞主要來自于css和js

首先是js, 只要html解析到了script標簽，就開始下載js，這個標簽后的所有資源的下載和解析全部停滯. js下載完成之后，會立刻執(zhí)行，執(zhí)行的時候，同樣會堵塞后續(xù)資源的下載和執(zhí)行.直到該js執(zhí)行完成 (原因在于js可能會改變dom結構和css屬性導致重繪，所以在js下載和執(zhí)行的時候對對后續(xù)的dom的建立顯得很沒必要)

然后是css, css解析的時候，會阻礙后續(xù)所有資源的解析.特別是js, js雖然是下載完就立刻執(zhí)行，但其實它必須要等到它之前的css全部解析完畢之后才能解析.

所以我們可以看出來，Css和Js都會影響到后續(xù)文件的下載和解析

優(yōu)化目標

當用戶能夠在1-2秒內打開頁面，看到信息的展示，或者能夠開始進行下一步的操作，用戶會感覺速度還好，可以接受. 而頁面如果在2-5秒后才進入可用的狀態(tài)，用戶的耐心會逐漸喪失. 而如果一個界面超過5秒甚至更久才能顯示出來，這對用戶來說基本是無法忍受的，也許有一部分用戶會退出重新進入，但更多的用戶會直接放棄使用。

對于頁面呈現(xiàn)來說，不管是pc端還是移動端，最最重要一點是能讓用戶盡可能快的看到盡可能多的樣式和內容. 所以業(yè)界有了所謂1秒鐘法則:

2g網(wǎng)絡：1秒內完成dns查詢、和后臺服務器建立連接
3g網(wǎng)絡：1秒內完成首字顯示（首字時間）
wifi網(wǎng)絡：1秒內完成首屏顯示（首屏時間）

優(yōu)化措施

我們想讓用戶盡快地看到盡可能多的內容和樣式，除了保證各加載資源在滿足需求的情況下體積盡可能的小，還要保證各資源正確的加載順序，防止資源的相互阻塞:

減少html中不必要的標簽(比如div, 加快dom樹的生成)

把css放在頭部(以便能夠更快的生成css樹，從而盡快地dom樹結合成render樹，從而能夠以最快的速度被瀏覽器渲染出來)

js放在尾部(或者用 window.onload 等到頁面完全加載完成之后再執(zhí)行)

減少資源文件大小(壓縮img,css,js)

將大img切成多份小img加快加載速度(由于img是并行加載)

同時，由于在http請求的發(fā)送和回應上會消耗很大一部分時間，所以如何盡量減少 http請求也是優(yōu)化的大頭:

合并css文件

打包合并js文件

采用sprite合成img

結語

總之，優(yōu)化是一個很好的習慣. 但是，從工程的角度來講，過度優(yōu)化有時會造成很高昂的代價. 所以，一個好的工程師，不僅僅知道該怎么優(yōu)化，更重要的是知道這里該不該優(yōu)化.

以上是從一些很通用且淺顯的角度來分析如何優(yōu)化自己的項目.后續(xù)會慢慢講到更多的優(yōu)化技巧，比如js的延遲加載，按需加載等等，敬請期待

云服務器 GPU云服務器切圖崽速度提高提高寶塔vps速度提高webrtc傳輸速度

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/49900.html

切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預加載遮罩大法我們經(jīng)常用中實際上前言優(yōu)化！又是優(yōu)化！切圖崽們作為整個web應用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

ygyooo 2019-08-29 10:57 評論0 收藏0
切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預加載遮罩大法我們經(jīng)常用中實際上前言優(yōu)化！又是優(yōu)化！切圖崽們作為整個web應用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

AaronYuan 2019-08-19 18:44 評論0 收藏0
切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個應用的紐帶，連接著用戶行為和機器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項目開發(fā)中常見的圖片加載優(yōu)化方式預加載遮罩大法我們經(jīng)常用中實際上前言優(yōu)化！又是優(yōu)化！切圖崽們作為整個web應用的紐帶，連接著用戶行為和機器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個最佳的平衡點. ...

xiaochao 2019-08-01 15:26 評論0 收藏0
切圖崽的自我修養(yǎng)－使用模塊化JS

摘要：之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到規(guī)范推出之后，模塊化才真正迅猛發(fā)展起來。因為有了模塊化的概念，才有了按需加載的概念。前言我們來玩樂高積木吧模塊化Js已經(jīng)成為了老生常談，不過在JavaScript設計之初，由于定位的問題并沒有提供類的功能，開發(fā)者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼。之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一...

littleGrow 2019-08-19 18:43 評論0 收藏0
切圖崽的自我修養(yǎng)－使用模塊化JS

摘要：之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一些嘗試，直到規(guī)范推出之后，模塊化才真正迅猛發(fā)展起來。因為有了模塊化的概念，才有了按需加載的概念。前言我們來玩樂高積木吧模塊化Js已經(jīng)成為了老生常談，不過在JavaScript設計之初，由于定位的問題并沒有提供類的功能，開發(fā)者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼。之前的閉包也好，自執(zhí)行函數(shù)也好，都是模塊化的一...

justjavac 2019-08-01 15:27 評論0 收藏0