成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端優(yōu)化-Javascript篇(1.腳本放在底部)

JerryC / 2293人閱讀

摘要：從本篇博客開始，我會跟大家分享下我關(guān)于前端優(yōu)化方面的學(xué)習(xí)，由于時間原因每篇博客只能分享一小點內(nèi)容，一點點深入前端優(yōu)化的細(xì)節(jié)。在前端優(yōu)化這個問題上，最被大家熟知的應(yīng)該就是雅虎前端優(yōu)化條軍規(guī)以及雅虎前端優(yōu)化條規(guī)則。

　　從本篇博客開始，我會跟大家分享下我關(guān)于前端優(yōu)化方面的學(xué)習(xí)，由于時間原因每篇博客只能分享一小點內(nèi)容，一點點深入前端優(yōu)化的細(xì)節(jié)。
　　做過前端的人都知道，前端優(yōu)化是一個永遠(yuǎn)都不會停止的話題(當(dāng)然，不管是哪個技術(shù)，優(yōu)化總是無止境的)。在前端優(yōu)化這個問題上，最被大家熟知的應(yīng)該就是雅虎前端優(yōu)化14條軍規(guī)以及雅虎前端優(yōu)化34條規(guī)則。大部分也都已經(jīng)應(yīng)用到了實際開發(fā)中。而我的分享并不是按照優(yōu)化建議來進(jìn)行的，我的計劃是整個優(yōu)化按照不同模塊進(jìn)行劃分，分別是Javascript，CSS，HTML還有其他的一些細(xì)節(jié)。今天就先從Javascript開始。
　　Javascript開篇就跟大家分享一個比較簡單的規(guī)則————腳本后置，這個是一個最基本的優(yōu)化策略，我想大家都應(yīng)該知道，可是我還是想通過實際的例子來加深一下自己的理解，也許在這個簡單的事情后面可以挖掘出更多有意思的東西。
　　為了驗證腳本后置對前端優(yōu)化究竟會有多大的影響，我把我的博客作為測試對象，在首頁插入下面這個腳本:

function doSomething(n){
    //模擬一個需要執(zhí)行n秒的腳本
    var start = new Date().getTime() ;
    while((new Date().getTime() - start) < 1000 * n){}
}
//執(zhí)行5秒
doSomething(5) ;

　　我把這個腳本命名為doSomething.js
　　首先，先來看看腳本前置的情況，下圖是腳本前置情況下的網(wǎng)絡(luò)瀑布圖
　　
　　其次，再來看看腳本后置的情況，下圖是腳本后置情況下的網(wǎng)絡(luò)瀑布圖
　　
　　

　　通過上面兩幅圖，結(jié)果已經(jīng)很明顯了，雖然現(xiàn)代瀏覽器已經(jīng)支持資源的并行下載，但是當(dāng)腳本阻塞時仍然會阻止其他圖片資源和頁面的加載，如果站點是一個有很多圖片的網(wǎng)站那么這種情況將嚴(yán)重影響用戶體驗；而腳本后置的話，圖片和腳本是并行下載，然后先加載圖片和頁面然后才執(zhí)行耗時的腳本，這樣就不會阻塞圖片和頁面的加載。
　　從上面的瀑布圖我們還可以看出很多瀏覽器加載策略方面的東西，通過對比不同瀏覽器的瀑布圖也可以看出各自的加載策略，這方面的知識還需要在摸索，也希望有了解的人來說說不同瀏覽器之間加載策略的不同。

最后，安利下我的個人博客，歡迎訪問: http://bin-playground.top

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78150.html

相關(guān)文章

  • 提高前端性能的黃金法則

    摘要：雖然如此，但是網(wǎng)站前端性能優(yōu)化的思路基本沒變。為什么前端性能如此重要數(shù)據(jù)顯示只有的最終用戶響應(yīng)時間花在了下載文檔上。前端性能優(yōu)化一味奉行最佳實踐有時候反而過而不及，所以針對項目的實際情況來優(yōu)化才是明智的選擇。 前端近幾年變化很大，各種工具，庫，框架并發(fā)。雖然如此，但是網(wǎng)站前端性能優(yōu)化的思路基本沒變。為什么前端性能如此重要？數(shù)據(jù)顯示: 只有 10%~20% 的最終用戶響應(yīng)時間花在了下載...

    keithyau 評論0 收藏0

  • 前端性能優(yōu)化（JavaScript補充篇）

    摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負(fù)擔(dān)要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客 以下內(nèi)容均來自《高性能JavaScript》 JavaScript文件加載 ...

    molyzzx 評論0 收藏0

  • 前端性能優(yōu)化（JavaScript補充篇）

    摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負(fù)擔(dān)要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客 以下內(nèi)容均來自《高性能JavaScript》 JavaScript文件加載 ...

    taoszu 評論0 收藏0

  • 高性能網(wǎng)站搭建-前端性能優(yōu)化 (附Vue首屏加載時間優(yōu)化詳細(xì)方案)

    摘要：附首屏加載時間過長詳細(xì)優(yōu)化方案首先附一張優(yōu)化過后的圖首屏加載時間從原來的到，測試的個人站點注我在優(yōu)化項目的時候使用的是。如果是的項目影響也不大，優(yōu)化的方案是結(jié)合服務(wù)端和的。 前言 事實上, 只有10%-20%的最終用戶響應(yīng)時間是發(fā)在從Web服務(wù)器獲取HTML文檔并傳送到瀏覽器中的。如果希望能夠有效地減少頁面的響應(yīng)時間，就必須關(guān)注剩余80%-90%的最終用戶體驗。--Steve Soud...

    xingqiba 評論0 收藏0

  • 【前端性能優(yōu)化】高性能JavaScript整理總結(jié)

    摘要：然后執(zhí)行環(huán)境會創(chuàng)建一個活動對象，活動對象作為函數(shù)運行的變量對象，包含所有局部變量命名參數(shù)參數(shù)集合和，當(dāng)執(zhí)行環(huán)境銷毀，活動對象也被銷毀。 高性能JavaScript整理總結(jié) 關(guān)于前端性能優(yōu)化：首先想到的是雅虎軍規(guī)34條然后最近看了《高性能JavaScript》大概的把書中提到大部分知識梳理了下并加上部分個人理解這本書有參考雅虎特別性能小組的研究成果，所以跟34 軍規(guī)有很多相似之處有不當(dāng)之...

    zzbo 評論0 收藏0

發(fā)表評論

0條評論

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