亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

JerryC / 2357人閱讀

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

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

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

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

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

最后，安利下我的個(gè)人博客，歡迎訪(fǎng)問(wèn): http://bin-playground.top

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/78150.html

相關(guān)文章

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

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

    keithyau 評(píng)論0 收藏0

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

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

    molyzzx 評(píng)論0 收藏0

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

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

    taoszu 評(píng)論0 收藏0

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

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

    xingqiba 評(píng)論0 收藏0

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

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

    zzbo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<