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

資訊專欄INFORMATION COLUMN

前端性能優(yōu)化總結(jié)

1treeS / 1303人閱讀

摘要：原則多使用內(nèi)存，緩存或者其他方法減少計(jì)算，減少網(wǎng)絡(luò)請(qǐng)求減少操作硬盤讀寫加載資源優(yōu)化靜態(tài)資源的合并和壓縮。操作事件節(jié)流主要用于觸發(fā)頻率較高的事件，設(shè)定一個(gè)緩沖觸發(fā)事件。

1.原則

多使用內(nèi)存，緩存或者其他方法

減少CPU計(jì)算，減少網(wǎng)絡(luò)請(qǐng)求

減少IO操作（硬盤讀寫）

2.加載資源優(yōu)化

靜態(tài)資源的合并和壓縮。

靜態(tài)資源緩存（瀏覽器緩存策略）。

使用CDN讓靜態(tài)資源加載更快。

3. 渲染優(yōu)化

CSS放head中，JS放body后

圖片懶加載

減少DOM操作，對(duì)DOM操作做緩存

減少DOM操作，多個(gè)操作盡量合并在一起執(zhí)行

事件節(jié)流

盡早執(zhí)行操作 DOMContentLoaded

4. 示例 4.1 資源合并 
a.js  b.js  c.js  ---  abc.js
4.2 緩存

通過連接名稱控制緩存

只有改變內(nèi)容的時(shí)候，鏈接名稱才會(huì)改變。

4.3 懶加載
4.4 緩存dom查詢 
        //沒有緩存dom
        for (let i = 0; i < document.getElementsByTagName("p").length; i++) {

        }

        //緩存dom
        var p = document.getElementsByTagName("p");
        for (let i = 0; i < p.length; i++) {

        }
4.5 合并dom插入 
        var listNode = document.getElementById("list");
        var flag = document.createDocumentFragment();
        var li;
        for (let i = 0; i < 10; i++) {
            li = document.createElement("li");
            li.innerHTML = i;
            flag.appendChild(li);
        }
        listNode.appendChild(flag);

10次dom插入 ---> 1次dom插入

4.6 事件節(jié)流

監(jiān)聽文字改變事件，無操作100毫秒后執(zhí)行操作，不用每次觸發(fā)。

        var textarea = document.getElementById("ta");
        var timeoutId;
        textarea.addEventListener("keyup",function(){
            if(i){
                clearTimeout(i);
            }
            timeoutId = setTimeout(() => {
                //操作
            }, 100);
        });

事件節(jié)流主要用于觸發(fā)頻率較高的事件，設(shè)定一個(gè)緩沖觸發(fā)事件。

補(bǔ)充 異步加載

非核心代碼異步加載 -- 異步加載的方式 -- 區(qū)別

1.動(dòng)態(tài)腳本加載

用js創(chuàng)建

2.defer

3.async


沒有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。

有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。

有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

關(guān)于 defer，我們還要記住的是它是按照加載順序執(zhí)行腳本的

標(biāo)記為async的腳本并不保證按照指定它們的先后順序執(zhí)行。對(duì)它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行。

瀏覽器緩存

總結(jié)的非常好

瀏覽器緩存 -- 緩存的分類 -- 緩存的原理

緩存就是html文件在本地存在的副本，

強(qiáng)緩存

發(fā)現(xiàn)有緩存直接用。

Expires: 絕對(duì)時(shí)間，判斷客戶端日期是否超過這個(gè)時(shí)間
Cache-Control：相對(duì)時(shí)間，判斷訪問間隔是否大于3600秒

//在設(shè)定時(shí)間之前不會(huì)和服務(wù)端進(jìn)行通信了
//如果兩個(gè)都下發(fā)以后者為準(zhǔn)

協(xié)商緩存

詢問服務(wù)器緩存是否可以用，在進(jìn)行判斷是否用。

Last-Modified/If-Modified-Since

第一次請(qǐng)求，respone的header加上Last-Modified（最后修改時(shí)間）

再次請(qǐng)求，在request的header上加上If-Modified-Since 

和服務(wù)端的最后修改時(shí)間對(duì)比，如果沒有變化則返回304 Not Modified，但是不會(huì)返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。

瀏覽器收到304的響應(yīng)后，就會(huì)從緩存中加載資源

如果協(xié)商緩存沒有命中，瀏覽器直接從服務(wù)器加載資源時(shí)，Last-Modified的Header在重新加載的時(shí)候會(huì)被更新

Etag/If-None-Match

這兩個(gè)值是由服務(wù)器生成的每個(gè)資源的唯一標(biāo)識(shí)字符串，只要資源有變化就這個(gè)值就會(huì)改變；其判斷過程與Last-Modified/If-Modified-Since類似，他可以精確到秒的更高級(jí)別。

DNS預(yù)解析

在一些瀏覽器的a標(biāo)簽是默認(rèn)打開dns預(yù)解析的，在https協(xié)議下dns預(yù)解析是關(guān)閉的，加入mate后會(huì)打開。

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

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

相關(guān)文章

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來都沒有斷絕過。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來都沒有斷絕過。因?yàn)檫@個(gè)東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

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

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來都沒有斷絕過。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來都沒有斷絕過。因?yàn)檫@個(gè)東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

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

  • 前端性能優(yōu)化常用總結(jié)

    摘要：前言對(duì)于前端的性能話題，從來都沒有斷絕過。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。前端發(fā)展以來，優(yōu)化方式，琳瑯滿目，有雅虎軍規(guī)等。所以，接下來我會(huì)從三個(gè)方面就前端性能進(jìn)行總結(jié)網(wǎng)絡(luò)方面操作及渲染方面數(shù)據(jù)方面。 前言 對(duì)于前端的性能話題，從來都沒有斷絕過。因?yàn)檫@個(gè)東西沒有最好，只有更好。而且往往也是業(yè)務(wù)的繁雜程度去決定優(yōu)化程度的。作為一個(gè)前端開發(fā)者，性能是我們關(guān)注的指標(biāo)。它直接影響著我們...

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

  • 前端每周清單年度總結(jié)與盤點(diǎn)

    摘要：前端每周清單年度總結(jié)與盤點(diǎn)在過去的八個(gè)月中，我?guī)缀踔蛔隽藘杉拢ぷ髋c整理前端每周清單。本文末尾我會(huì)附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵(lì)過的朋友，希望你們能夠繼續(xù)支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結(jié)與盤點(diǎn) 在過去的八個(gè)月中，我?guī)缀踔蛔隽?..

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

  • 不能錯(cuò)過的web前端性能優(yōu)化總結(jié)

    摘要：是具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶的等待時(shí)間，提升用戶體驗(yàn)。 web前端性能優(yōu)化主要分為以下幾個(gè)板塊: 加載優(yōu)化 DNS預(yù)解析 合并img、css、javascript文件，減少http請(qǐng)求 緩存一切可緩存資源 使用長Cache 使用外聯(lián)式引用css、javascript文件 壓縮HTML、css、jav...

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

  • 不能錯(cuò)過的web前端性能優(yōu)化總結(jié)

    摘要：是具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能減少用戶的等待時(shí)間，提升用戶體驗(yàn)。 web前端性能優(yōu)化主要分為以下幾個(gè)板塊: 加載優(yōu)化 DNS預(yù)解析 合并img、css、javascript文件，減少http請(qǐng)求 緩存一切可緩存資源 使用長Cache 使用外聯(lián)式引用css、javascript文件 壓縮HTML、css、jav...

    宋華 評(píng)論0 收藏0

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

0條評(píng)論

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