前端机能优化总结

1.准绳

多运用内存,缓存或许其他要领

削减CPU盘算,削减收集要求

削减IO操纵(硬盘读写)

2.加载资本优化

静态资本的兼并和紧缩。

静态资本缓存(浏览器缓存战略)。

运用CDN让静态资本加载更快。

3. 衬着优化

CSS放head中,JS放body后

图片懒加载

削减DOM操纵,对DOM操纵做缓存

削减DOM操纵,多个操纵只管兼并在一起实行

事宜撙节

尽早实行操纵 DOMContentLoaded

4. 示例

4.1 资本兼并

a.js  b.js  c.js  ---  abc.js

4.2 缓存

经由历程衔接称号掌握缓存

<script src="abc_1.js" ></script>

只需转变内容的时刻,链接称号才会转变。

4.3 懒加载

    <img src="preview.png" realsrc="abc.png" id="img1" />
    <script>
        var i = document.getElementById('img1');
        i.src = i.getAttribute('realsrc');
    </script>

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 事宜撙节

监听笔墨转变事宜,无操纵100毫秒后实行操纵,不必每次触发。

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

事宜撙节重要用于触发频次较高的事宜,设定一个缓冲触发事宜。

补充

异步加载

非中心代码异步加载 — 异步加载的体式格局 — 区分

1.动态剧本加载

用js建立

2.defer

3.async

<script src="script.js"></script>
没有 defer 或 async,浏览器会马上加载并实行指定的剧本,“马上”指的是在衬着该 script 标签之下的文档元素之前,也就是说不守候后续载入的文档元素,读到就加载并实行。
<script async src="script.js"></script>
有 async,加载和衬着后续文档元素的历程将和 script.js 的加载与实行并行举行(异步)。
<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的历程将和 script.js 的加载并行举行(异步),然则 script.js 的实行要在一切元素剖析完成以后,DOMContentLoaded 事宜触发之前完成。

关于 defer,我们还要记着的是它是根据加载递次实行剧本的

标记为async的剧本并不保证根据指定它们的先后递次实行。对它来讲剧本的加载和实行是牢牢挨着的,所以不论你声明的递次怎样,只需它加载完了就会马上实行。

浏览器缓存

总结的非常好

浏览器缓存 — 缓存的分类 — 缓存的道理

缓存就是html文件在当地存在的副本,

强缓存

发现有缓存直接用。
《前端机能优化总结》

Expires: 相对时候,推断客户端日期是不是凌驾这个时候
Cache-Control:相对时候,推断接见距离是不是大于3600秒

//在设定时候之前不会和服务端举行通讯了
//假如两个都下发以后者为准

协商缓存

讯问服务器缓存是不是能够用,在举行推断是不是用。

Last-Modified/If-Modified-Since

第一次要求,respone的header加上Last-Modified(末了修正时候)

再次要求,在request的header上加上If-Modified-Since 

和服务端的末了修正时候对照,假如没有变化则返回304 Not Modified,然则不会返回资本内容;假如有变化,就一般返回资本内容。

浏览器收到304的相应后,就会从缓存中加载资本

假如协商缓存没有掷中,浏览器直接从服务器加载资本时,Last-Modified的Header在从新加载的时刻会被更新

Etag/If-None-Match

这两个值是由服务器天生的每一个资本的唯一标识字符串,只需资本有变化就这个值就会转变;其推断历程与Last-Modified/If-Modified-Since相似,他能够准确到秒的更高级别。

DNS预剖析

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">

在一些浏览器的a标签是默许翻开dns预剖析的,在https协定下dns预剖析是封闭的,到场mate后会翻开。

《前端机能优化总结》

    原文作者:ConardLi
    原文地址: https://segmentfault.com/a/1190000017556203
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞