性能测试—前端性能1
不同的瀏覽器工作的方式是不一樣的,大體上瀏覽器的核心是瀏覽器引擎:IE是Trident、Firefox是Gecko、safari和chrome則是webkit。
一、瀏覽器打開URL的過程
當我們輸入一個URL,到頁面的展現,這個過程中都發生了什么呢?
1、輸入網址www.baidu.com
2、檢查緩存——有可用緩存就呈現頁面
3、如果沒有緩存則DNS解析——獲得URL所在網站的IP地址
4、發起TCP連接,建立連接
5、發送請求
6、等待響應
7、接受請求
8、關閉連接
9、檢查狀態碼
10、呈現頁面(HTML文檔)
可以用前端性能工具查看頁面:Firebug、Httpwatch等等。簡單上一個圖
二、提高前端性能的方法
1、減少HTTP請求數量
每一個請求都要經過“建立連接—發送數據—斷開連接”的過程,所以減少請求數可提高性能。
避免重定向
2、用好瀏覽器的緩存機制
以下技術可有助于利用緩存:
(1)保證服務端返回資源的響應頭帶有Expires信息,使得資源可以緩存
(2)用引用方式使用樣式表和JS腳本。
3、利用GZIP壓縮機制
只針對文本類資源有效
使用合并的圖片文件
4、提高瀏覽器的下載的并發度
把CSS文件放在HTML文檔開頭
這樣做的目的是提高用戶的感官,讓頁面盡早的開始顯示。將樣式表放在開頭,一開始就下載下來,避免新樣式帶來的重繪和新渲染。
把JS放在HTML文檔最后
?在某些瀏覽器上,JS文件的下載和執行會阻止其他頁面資源文件的下載和執行,所以把JS文件放在最后,保證JS文件不會阻止其他元素的下載,從用戶感官來說,JS文件的下載和執行時間用戶不會感覺到。
5、使用Ajax請求:頁面刷新(應該是需要什么請求什么,不知道這樣理解對不對?)
6、使用多個域名
瀏覽器對服務器的連接是基于域名的,比如一個服務器擁有二個域名A和B,在瀏覽器限定一個域名只能建立二個連接的情況下,瀏覽器實際上是與服務器建立了4個連接。
7、使用CDN:內容分發網
?
第一次發個博客O(∩_∩)O哈哈~
?
轉載于:https://www.cnblogs.com/bell1991/p/6037941.html
總結
以上是生活随笔為你收集整理的性能测试—前端性能1的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 225. Implement Stack
- 下一篇: 巧克力棒