国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

切圖崽的自我修養－提高項目加載速度

yanwei / 2572人閱讀

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

前言 
我的項目沒問題，是用戶的網絡環境不夠好

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

資源的下載及解析

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

Html

Css

Js

Img

資源加載的特性

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

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

JS: 下載完再立即逐行解析執行

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

資源加載的相互影響

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

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

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

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

Img: Img的下載和呈現對后續資源的下載和解析無影響

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

罪魁禍首

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

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

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

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

優化目標

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

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

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

優化措施

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

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

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

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

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

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

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

合并css文件

打包合并js文件

采用sprite合成img

結語

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

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

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

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

相關文章

  • 切圖崽的自我修養－優化圖片加載流程

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

    ygyooo 評論0 收藏0

  • 切圖崽的自我修養－優化圖片加載流程

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

    AaronYuan 評論0 收藏0

  • 切圖崽的自我修養－優化圖片加載流程

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

    xiaochao 評論0 收藏0

  • 切圖崽的自我修養－使用模塊化JS

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

    littleGrow 評論0 收藏0

  • 切圖崽的自我修養－使用模塊化JS

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

    justjavac 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<