前端性能优化

性能优化

几种优化方案

1. 性能 : 从网站开始生成起那一刻到代码开始运行消耗浏览器以及服务器资源的一切资源统称为性能

2.优化原则 ：

1.多使用内存、缓存或其他方法

​ 2.减少CPU计算量，减少网络加载耗时

3.优化形式 :

​ 1.让加载更快:

​ 减少资源体积:压缩代码

​ 减少访问次数: 合并代码, SSR服务器渲染, 缓存(contenthash等等)

​ 使用更快的网络:CDN

CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，
        利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

        CDN的作用
        CDN一般会用来托管Web资源（包括文本、图片和脚本等），可供下载的资源（媒体文件、软件、文档等），应用程序（门户网站等）。使用CDN来加速这些资源的访问。
        （1）在性能方面，引入CDN的作用在于：
        用户收到的内容来自最近的数据中心，延迟更低，内容加载更快
        部分资源请求分配给了CDN，减少了服务器的负载

        （2）在安全方面，CDN有助于防御DDoS、MITM等网络攻击：
        针对DDoS：通过监控分析异常流量，限制其请求频率
        针对MITM：从源服务器到 CDN 节点到 ISP（Internet Service Provider），全链路 HTTPS 通信

        除此之外，CDN作为一种基础的云服务，同样具有资源托管、按需扩展（能够应对流量高峰）等方面的优势。


        CDN的工作原理：
        （1）用户未使用CDN缓存资源的过程：

        浏览器通过DNS对域名进行解析（就是上面的DNS解析过程），依次得到此域名对应的IP地址
        浏览器根据得到的IP地址，向域名的服务主机发送数据请求
        服务器向浏览器返回响应数据

        （2）用户使用CDN缓存资源的过程：

        对于点击的数据的URL，经过本地DNS系统的解析，发现该URL对应的是一个CDN专用的DNS服务器，DNS系统就会将域名解析权交给CNAME指向的CDN专用的DNS服务器。
        CND专用DNS服务器将CND的全局负载均衡设备IP地址返回给用户
        用户向CDN的全局负载均衡设备发起数据请求
        CDN的全局负载均衡设备根据用户的IP地址，以及用户请求的内容URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求
        区域负载均衡设备选择一台合适的缓存服务器来提供服务，将该缓存服务器的IP地址返回给全局负载均衡设备
        全局负载均衡设备把服务器的IP地址返回给用户
        用户向该缓存服务器发起请求，缓存服务器响应用户的请求，将用户所需内容发送至用户终端。

        如果缓存服务器没有用户想要的内容，那么缓存服务器就会向它的上一级缓存服务器请求内容，以此类推，直到获取到需要的资源。
        最后如果还是没有，就会回到自己的服务器去获取资源。

​ 2.让渲染更快:

​ CSS放在head, JS放在body最下面

​ 尽早开始执行JS, 用DOMContentLoaded触发

​ 懒加载(图片懒加载，上滑加载更多等)

知识点：
        图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，
        我们使用HTML5 的data-xxx属性来储存图片的路径，
        在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。
        注意：data-xxx 中的xxx可以自定义，这里我们使用data-src来定义。
        懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。
        所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。
        
        （1）window.innerHeight 是浏览器可视区的高度
        （2）document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离
        （3）imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）
        （4）图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop;

        这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。
        懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
        我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

​ 对DOM查询进行缓存(e.g 节点集合长度保存)

​ 频繁DOM操作, 合并到一起插入DOM结构

​ 回流重绘

当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。
        下面这些操作会导致回流：
        页面的首次渲染
        浏览器的窗口大小发生变化
        元素的内容发生变化
        元素的尺寸或者位置发生变化
        元素的字体大小发生变化
        激活CSS伪类
        查询某些属性或者调用某些方法
        添加或者删除可见的DOM元素

        在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的DOM元素重新排列，
        它的影响范围有两种：
        全局范围：从根节点开始，对整个渲染树进行重新布局
        局部范围：对渲染树的某部分或者一个渲染对象进行重新布局

        当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。
        下面这些操作会导致重绘：
        color、background 相关属性：background-color、background-image 等
        outline 相关属性：outline-color、outline-width 、text-decoration
        border-radius、visibility、box-shadow
        
      减少回流与重绘的措施：
            操作DOM时，尽量在低层级的DOM节点进行操作

            不要使用table布局， 一个小的改动可能会使整个table进行重新布局

            使用CSS的表达式

            不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。

            使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素

            避免频繁操作DOM，可以创建一个文档片段documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中

            将元素先设置display: none，操作结束后再把它显示出来。
            因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
            
            将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
            浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列
            浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，
            浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。
            上面，将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，原本应该是触发多次回流，变成了只触发一次回流。
            
            节流throttle 防抖debounce

4.优化实例 :

​ 1. 缓存

​ 静态资源加hash后缀,根据文件内容计算hash

​ 文件内容不变,则hash不变,则url不变

​ url和文件不变, 则会自动触发http缓存机制, 返回304

​ 2. SSR 将网页和数据一起加载,一起渲染

​ 3.防抖&&节流

//防抖 debounce
		function debounce(fn, time, triggleNow) {
            var t = null;//方便首次不延迟的情况

            if (t) {
                clearTimeout(t);//虽清除但仍然保留定时器ID(number类型)
            }

            var debounced = function () {
                var _self = this;
                var args = arguments;
                if (triggleNow) {
                    var exec = !t;
                    t = setTimeout(function () {
                        t = null;
                    }, time);

                    if (exec) fn.apply(_self, args);
                }
                else {
                    setTimeout(function () {
                        fn.apply(_self, args);
                    }, time);
                }
            }

            debounced.remove = function () {
                clearTimeout(t);
                t = null;
            }
            return debounced;

        }

//节流 throttle
function throttle(fn, delay = 300) {
    let timer = null
    
    return function() {
        timer = setTimerout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

赏

Thanks

支付宝

微信