網站性能優化

分享幾個資源

• Front-End Performance Checklist 2019
• 2019 前端性能優化年度總結

原理

漸進加載

PerformanceNavigationTiming interface

瀏覽器進程

關鍵渲染路徑（Critical Rendering Path）

the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites.

幾個概念

對象模型（Object Model）

渲染樹構建，佈局和繪製

渲染阻塞（Rendering Blocking）

解析阻塞（Parser Blocking）

分析關鍵渲染路徑性能

優化關鍵渲染路徑

其餘

• prefetch 和 preload
• async 和 defer
• console.time的使用 performance.mark 的使用

基本思路

網站性能優化實戰——從12.67s到1.06s的故事

• 減小請求數
• 減小資源體積
• 提高網絡傳輸速率

1. 瀏覽器緩存 瀏覽器默認的緩存是放在內存內的，但咱們知道，內存裏的緩存會由於進程的結束或者說瀏覽器的關閉而被清除，而存在硬盤裏的緩存纔可以被長期保留下去。不少時候，咱們在network面板中各請求的size項裏，會看到兩種不一樣的狀態：from memory cache 和 from disk cache，前者指緩存來自內存，後者指緩存來自硬盤。而控制緩存存放位置的，不是別人，就是咱們在服務器上設置的Etag字段。在瀏覽器接收到服務器響應後，會檢測響應頭部（Header），若是有Etag字段，那麼瀏覽器就會將本次緩存寫入硬盤中。

之因此拉取緩存會出現200、304兩種不一樣的狀態碼，取決於瀏覽器是否有向服務器發起驗證請求。 只有向服務器發起驗證請求並確認緩存未被更新，纔會返回304狀態碼。

webpack打包

• js壓縮
• html壓縮
• css壓縮
• gzip

etag on;   //開啓etag驗證
expires 7d;    //設置緩存過時時間爲7天
複製代碼

【！！！特別注意！！！】在咱們配置緩存時必定要切記，瀏覽器在處理用戶請求時，若是命中強緩存，瀏覽器會直接拉取本地緩存，不會與服務器發生任何通訊，也就是說，若是咱們在服務器端更新了文件，並不會被瀏覽器得知，就沒法替換失效的緩存。因此咱們在構建階段，須要爲咱們的靜態資源添加md5 hash後綴，避免資源更新而引發的先後端文件沒法同步的問題。 2. 壓縮 PS：這裏有一個技巧，在咱們書寫HTML元素的src 或 href 屬性時，能夠省略協議部分，這樣也能簡單起到節省資源的目的。

gzip on;
gzip_types text/plain application/javascriptapplication/x-javascripttext/css application/xml text/javascriptapplication/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
複製代碼

圖片處理

• 不要縮放圖片
• sprite
• iconfont
• webp

書籍推薦

• 大型網站性能監測、分析與優化

vue、nuxt項目優化