摘要:從本篇博客開始,我會跟大家分享下我關于前端優化方面的學習,由于時間原因每篇博客只能分享一小點內容,一點點深入前端優化的細節。在前端優化這個問題上,最被大家熟知的應該就是雅虎前端優化條軍規以及雅虎前端優化條規則。
從本篇博客開始,我會跟大家分享下我關于前端優化方面的學習,由于時間原因每篇博客只能分享一小點內容,一點點深入前端優化的細節。
做過前端的人都知道,前端優化是一個永遠都不會停止的話題(當然,不管是哪個技術,優化總是無止境的)。在前端優化這個問題上,最被大家熟知的應該就是雅虎前端優化14條軍規以及雅虎前端優化34條規則。大部分也都已經應用到了實際開發中。而我的分享并不是按照優化建議來進行的,我的計劃是整個優化按照不同模塊進行劃分,分別是Javascript,CSS,HTML還有其他的一些細節。今天就先從Javascript開始。
Javascript開篇就跟大家分享一個比較簡單的規則————腳本后置,這個是一個最基本的優化策略,我想大家都應該知道,可是我還是想通過實際的例子來加深一下自己的理解,也許在這個簡單的事情后面可以挖掘出更多有意思的東西。
為了驗證腳本后置對前端優化究竟會有多大的影響,我把我的博客作為測試對象,在首頁插入下面這個腳本:
function doSomething(n){ //模擬一個需要執行n秒的腳本 var start = new Date().getTime() ; while((new Date().getTime() - start) < 1000 * n){} } //執行5秒 doSomething(5) ;
我把這個腳本命名為doSomething.js
首先,先來看看腳本前置的情況,下圖是腳本前置情況下的網絡瀑布圖
其次,再來看看腳本后置的情況,下圖是腳本后置情況下的網絡瀑布圖
通過上面兩幅圖,結果已經很明顯了,雖然現代瀏覽器已經支持資源的并行下載,但是當腳本阻塞時仍然會阻止其他圖片資源和頁面的加載,如果站點是一個有很多圖片的網站那么這種情況將嚴重影響用戶體驗;而腳本后置的話,圖片和腳本是并行下載,然后先加載圖片和頁面然后才執行耗時的腳本,這樣就不會阻塞圖片和頁面的加載。
從上面的瀑布圖我們還可以看出很多瀏覽器加載策略方面的東西,通過對比不同瀏覽器的瀑布圖也可以看出各自的加載策略,這方面的知識還需要在摸索,也希望有了解的人來說說不同瀏覽器之間加載策略的不同。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78150.html
摘要:雖然如此,但是網站前端性能優化的思路基本沒變。為什么前端性能如此重要數據顯示只有的最終用戶響應時間花在了下載文檔上。前端性能優化一味奉行最佳實踐有時候反而過而不及,所以針對項目的實際情況來優化才是明智的選擇。 前端近幾年變化很大,各種工具,庫,框架并發。雖然如此,但是網站前端性能優化的思路基本沒變。為什么前端性能如此重要?數據顯示: 只有 10%~20% 的最終用戶響應時間花在了下載...
摘要:而像和會增加作用域鏈的長度,所以也會降低性能。但是用獲取一些屬性時,會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時,所帶來的性能負擔要高于,因此建議使用。它代價昂貴,且容易失控。 正巧看到在送書,于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告:更多內容可以看我的博客 以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...
摘要:而像和會增加作用域鏈的長度,所以也會降低性能。但是用獲取一些屬性時,會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時,所帶來的性能負擔要高于,因此建議使用。它代價昂貴,且容易失控。 正巧看到在送書,于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告:更多內容可以看我的博客 以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...
摘要:附首屏加載時間過長詳細優化方案首先附一張優化過后的圖首屏加載時間從原來的到,測試的個人站點注我在優化項目的時候使用的是。如果是的項目影響也不大,優化的方案是結合服務端和的。 前言 事實上, 只有10%-20%的最終用戶響應時間是發在從Web服務器獲取HTML文檔并傳送到瀏覽器中的。如果希望能夠有效地減少頁面的響應時間,就必須關注剩余80%-90%的最終用戶體驗。--Steve Soud...
摘要:然后執行環境會創建一個活動對象,活動對象作為函數運行的變量對象,包含所有局部變量命名參數參數集合和,當執行環境銷毀,活動對象也被銷毀。 高性能JavaScript整理總結 關于前端性能優化:首先想到的是雅虎軍規34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果,所以跟34 軍規有很多相似之處有不當之...
閱讀 2308·2021-11-24 09:39
閱讀 3038·2021-10-15 09:39
閱讀 3088·2021-07-26 23:38
閱讀 2288·2019-08-30 11:14
閱讀 3409·2019-08-29 16:39
閱讀 1713·2019-08-29 15:23
閱讀 778·2019-08-29 13:01
閱讀 2663·2019-08-29 12:29