Web 性能優化

KavenFan 發布于2019-08-23 12:14 / 1407人閱讀

摘要：然而腳本需要查詢信息，所以腳本還必須等待樹構建完才可以執行。這將相當于阻塞了腳本，腳本阻塞了樹構建。是這樣子的關聯才對。

前記 好久都沒有寫博客了，罪過罪過，不能懶不能懶，這次記錄一下web的性能優化方法，說到性能優化，就不得不從當你輸入網址按下回車的那一刻說起 性能分治法 把大問題分成小問題分別處理 按下回車發生了什么

當然是先去緩存中看看啦

緩存沒有，那就先DNS查詢找IP地址

找到IP地址先建立TCP鏈接

建立后就可以發送HTTP請求了

后臺處理，我們等待

接收HTML文件

DOCTYPE 確定解析的語法

逐行解析

有些標簽在不同瀏覽器上顯示

CSS同時下載，解析一個接一個（IE同時4個，谷歌同時6個）

JS并行下載，解析按順序，但是JS執行一定阻塞HTMl渲染

之后就是構建DOM樹，CSS和JS了

解決方法 1、緩存 DNS查詢后會留下緩存，下次訪問后就會無需查詢，另外設置響應頭Cache-Control，使文件緩存，這樣只要網站文件不更改就可以使用緩存 2、DNS查詢 DNS查詢會耗費時間，所以，我們要優化就要減少DNS查詢，盡量減少域名 3、建立TCP鏈接 每次發送HTTP請求都建立TCP連接的話就太耗費時間了，所以我們可以使用連接復用，只需要在HTTP請求頭加上keep-alive，在HTTP/2.0 甚至可以使用多路復用 4、發送HTTP請求 我們都知道發送請求是會帶上cookie的，所以減少cookie體積可以加快發送速度，另外，瀏覽器是可以同時發送多個請求，但是相同域名發送請求會有限制，所以我們可以增加域名，但是這樣就和第一步的解決方法沖突了，于是我們需要自己來權衡利弊 5、接收響應 設置ETag，這樣只要響應文件未更改，就可以返回一個304表示未更改，使用以前的文件，也可以使用Gzip壓縮文件，降低文件大小，接收到后再解壓文件，這樣可以加快下載速度 6、DOCTYPE 不能寫錯，這是確定渲染語法的，必須要寫 7、CDN加速 使用CDN可以增加同時請求數量，也可以減少cookie體積，因為沒有cookie。使用CDN可以加速，內容緩存在就近的地方，動態DNS，IP就近返回，內容分布網絡，請求快 8、CSS放在head，JS放在body最后 之所以把link標簽放抬頭而script放body尾部，是因為瀏覽器遇到script標簽時，會去下載并執行js腳本，從而導致瀏覽器暫停構建DOM。然而JS腳本需要查詢CSS信息，所以JS腳本還必須等待CSSOM樹構建完才可以執行。這將相當于CSS阻塞了JS腳本，JS腳本阻塞了DOM樹構建。是這樣子的關聯才對。

云服務器 GPU云服務器 web性能優化性能優化優化系統性能網站性能優化

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

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

前端性能優化

摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。優化向：單頁應用多路由預渲染指南 Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

Dean 2019-08-21 18:19 評論0 收藏0
Web 性能優化：理解及使用 JavaScript 緩存

摘要：想閱讀更多優質文章請猛戳博客一年百來篇優質文章等著你這是性能優化的第篇，上一篇在下面看點擊查看性能優化使用分離數據的正確方法性能優化圖片優化讓網站大小減少性能優化緩存事件來提高性能性能優化種優化和加快網站速度的方法隨著我們的應用程序的不斷增 showImg(https://segmentfault.com/img/bVbp4cY?w=947&h=424); 想閱讀更多優質文章請猛戳Gi...

endiat 2019-08-23 16:09 評論0 收藏0
web性能優化

摘要：性能優化是一個比較大的一個問題，不是一天兩天就能學會的，需要在日常中思考和學習。毫秒必爭，前端網頁性能最佳實踐這是一篇講關于性能優化的。和的壓縮對頁面引用的樣式和文件進行壓縮，合并一些和文件減少請求等，也是性能優化的一個方法。 web性能優化是一個比較大的一個問題，不是一天兩天就能學會的，需要在日常中思考和學習。先收藏一篇文章，以后有時間在慢慢研究。毫秒必爭，前端網頁性能最佳實踐這是一...

Brenner 2019-08-23 15:23 評論0 收藏0
web性能優化

摘要：性能優化是一個比較大的一個問題，不是一天兩天就能學會的，需要在日常中思考和學習。毫秒必爭，前端網頁性能最佳實踐這是一篇講關于性能優化的。和的壓縮對頁面引用的樣式和文件進行壓縮，合并一些和文件減少請求等，也是性能優化的一個方法。 web性能優化是一個比較大的一個問題，不是一天兩天就能學會的，需要在日常中思考和學習。先收藏一篇文章，以后有時間在慢慢研究。毫秒必爭，前端網頁性能最佳實踐這是一...

iamyoung001 2019-08-02 14:17 評論0 收藏0
[譯] 唯快不破：Web 應用的 13 個優化步驟

摘要：譯文地址譯唯快不破應用的個優化步驟前端的逆襲知乎專欄原文地址時過境遷，應用比以往任何時候都更具交互性。使用負載均衡方案我們在之前討論緩存的時候簡要提到了內容分發網絡。換句話說，元素的串形訪問會削弱負載均衡器以最佳形式歡迎關注知乎專欄 —— 前端的逆襲歡迎關注我的博客，知乎，GitHub。譯文地址：【譯】唯快不破：Web 應用的 13 個優化步驟 - 前端的逆襲 - 知乎專欄原文地...

haobowd 2019-08-19 18:37 評論0 收藏0