前端性能优化总结

二叶草 2020年2月5日21:29:21优化评论阅读模式
 

1.原则

多使用内存,缓存或者其他方法

减少CPU计算,减少网络请求

减少IO操作(硬盘读写)

2.加载资源优化

静态资源的合并和压缩。

静态资源缓存(浏览器缓存策略)。

使用CDN让静态资源加载更快。

3. 渲染优化

CSS放head中,JS放body后

图片懒加载

减少DOM操作,对DOM操作做缓存

减少DOM操作,多个操作尽量合并在一起执行

事件节流

尽早执行操作 DOMContentLoaded

4. 示例

4.1 资源合并

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

4.2 缓存

通过连接名称控制缓存

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

只有改变内容的时候,链接名称才会改变。

4.3 懒加载

    1.    <img src="preview.png" realsrc="abc.png" id="img1" />

 

    1.    <script>

 

    1.        var i = document.getElementById('img1');

 

    1.        i.src = i.getAttribute('realsrc');

 

    1.    </script>

 

4.4 缓存dom查询

    1.        //没有缓存dom

 

    1.        for (let i = 0; i < document.getElementsByTagName('p').length; i++) {

 

    1.  

 

    1.        }

 

    1.  

 

    1.        //缓存dom

 

    1.        var p = document.getElementsByTagName('p');

 

    1.        for (let i = 0; i < p.length; i++) {

 

    1.  

 

    1.        }

 

4.5 合并dom插入

    1.        var listNode = document.getElementById('list');

 

    1.        var flag = document.createDocumentFragment();

 

    1.        var li;

 

    1.        for (let i = 0; i < 10; i++) {

 

    1.            li = document.createElement('li');

 

    1.            li.innerHTML = i;

 

    1.            flag.appendChild(li);

 

    1.        }

 

    1.        listNode.appendChild(flag);

 

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

4.6 事件节流

监听文字改变事件,无操作100毫秒后执行操作,不用每次触发。

    1.        var textarea = document.getElementById('ta');

 

    1.        var timeoutId;

 

    1.        textarea.addEventListener('keyup',function(){

 

    1.            if(i){

 

    1.                clearTimeout(i);

 

    1.            }

 

    1.            timeoutId = setTimeout(() => {

 

    1.                //操作

 

    1.            }, 100);

 

    1.        });

 

事件节流主要用于触发频率较高的事件,设定一个缓冲触发事件。

补充

异步加载

非核心代码异步加载 -- 异步加载的方式 -- 区别

1.动态脚本加载

用js创建

2.defer

3.async

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

 

    1. 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

 

    1. <script async src="script.js"></script>

 

    1. 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

 

    1. <script defer src="myscript.js"></script>

 

    1. 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

 

关于 defer,我们还要记住的是它是按照加载顺序执行脚本的

标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行。

浏览器缓存

总结的非常好

浏览器缓存 -- 缓存的分类 -- 缓存的原理

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

强缓存

发现有缓存直接用。

    1. Expires: 绝对时间,判断客户端日期是否超过这个时间

 

    1. Cache-Control:相对时间,判断访问间隔是否大于3600秒

 

    1.  

 

    1. //在设定时间之前不会和服务端进行通信了

 

    1. //如果两个都下发以后者为准

 

协商缓存

询问服务器缓存是否可以用,在进行判断是否用。

Last-Modified/If-Modified-Since

    1. 第一次请求,respone的header加上Last-Modified(最后修改时间)

 

    1.  

 

    1. 再次请求,在request的header上加上If-Modified-Since

 

    1.  

 

    1. 和服务端的最后修改时间对比,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。

 

    1.  

 

    1. 浏览器收到304的响应后,就会从缓存中加载资源

 

    1.  

 

    1. 如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified的Header在重新加载的时候会被更新

 

Etag/If-None-Match

这两个值是由服务器生成的每个资源的唯一标识字符串,只要资源有变化就这个值就会改变;其判断过程与Last-Modified/If-Modified-Since类似,他可以精确到秒的更高级别。

DNS预解析

    1. <meta http-equiv="x-dns-prefetch-control" content="on">

 

    1. <link rel="dns-prefetch" href="//www.zhix.net">

 

在一些浏览器的a标签是默认打开dns预解析的,在https协议下dns预解析是关闭的,加入mate后会打开。

 

本文来源于:前端性能优化总结-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
nginx解析漏洞 优化

nginx解析漏洞

phpstudy(小皮模板存在nginx解析漏洞) 影响版本 phptsuy8.1.07的Nginx1.5.11版本影响版本 phptsuy8.1.07的Nginx1.5.11版本 phpstudy介...
网站SEO优化基础流程(新手必看) 优化

网站SEO优化基础流程(新手必看)

宝塔面板搭建一个获取网站的Favicon图标的APIgetFavicon是一个可以获取网站的Favicon图标并显示在你的网页上的项目。安装方法很简单,属于开箱即食。这篇文章还是基于宝塔面板来搭建。 ...

发表评论