前端性能优化

！减少请求

一、加载优化

1、减少HTTP请求

尽量减少页面的请求数，可以合并css和js，或者使用css精灵图等

2、避免重定向

301、302这类的状态码就涉及内容的重定向。

301永久重定向，是指原来的URI已经永久性的不存在了，今后所有的请求都必须改用新的URI。

302临时重定向，是指原URI处于‘临时维护’状态，新的URI是起了顶包的临时工的作用。

重定向带来一定“性能损耗”,很明显，重定向的机制决定了一个跳转会有两次请求-应答，比正常访问多了一次。

3、缓存资源

使用缓存资源，减少向服务器的请求数，节省加载时间，所有静态资源都要在服务器端设置缓存，并尽量使用长缓存。

4、使用CDN

是一种通过互联网的电脑网络系统，利用最近每位用户的服务器，更快、更可靠地将用户所需内容分发给用户，来降低网络成本。使用CDN可以用来托管Web资源（文本、图片、脚本等），可供下载的资源（媒体文件、软件、文档等），加速这些资源访问。

典型 的CDN由：

• 分发服务系统：最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容尽快的返回给用户。同时cache还负责与源站点进行内容同步，把更新的内容以及本地没有的内容从源站点获取并保存在本地。cache的数量、规模、总服务能力是衡量一个CDN系统服务能力的最基本指标
• 负载均衡系统：是对负责所有发起服务请求的用户进行调度访问，确定提供给用户的最终实际访问地址。全局负载均衡主要根据用户的就近原则，通过对每个服务节点进行“最优”判断，确定向用户提供的cache的物理地址。本地负载均衡主要负责节点内部的设备负载均衡。
• 运营管理系统：负责处理业务层面的与外界交互所必须的收集、整理、交付工作。

使用CDN的好处：

 （1）性能方面

• 用户收到的内容来自最近的数据中心，延迟更低，内容加载更快
• 部分资源请求分配给了CDN，减少了服务器的负载

（2）安全方面

• 针对DDoS：通过监控分析异常流量，限制其请求频率
• 正对MITM：从源服务器到CDN节点到ISP（网络服务提供商），全链路HTTPS通信 

5、无阻塞

头部内联的样式和脚本会阻塞页面的渲染，样式放在头部 并使用link方式引入，脚本放在尾部并使用异步的方式加载

异步加载JS

可以设置defer，async属性让其异步加载，而不阻塞渲染。区别在于，async加载完立即执行，而defer加载完会等它前面引入的文件执行完毕再执行。

6、首屏加载

首屏快速显示可大大提升用户对页面速度的感知，应尽量针对首屏的快速显示做优化

7、按需加载

将不影响首屏资源和当前屏幕不使用的资源放到用户需要时才加载（按需加载会导致大量重绘，影响渲染性能）

（1）懒加载

长网页中延迟加载图片数据。

• 减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量，减小了浏览器负担
• 提升用户体验
• 防止加载过多图片而影响其他资源文件的加载

实现原理 

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。

例如：浏览器可视区高度（window.innerHeight)+滚动高度（document.body.scrollTop)>图片偏移量（img.offsetTop)则加载图片。

（2）预加载

将所需的资源提前请求加载到本地，这样后面需要用到时直接从缓存中存取资源

8、压缩图像：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用srcset来按需显示

• 使用CSS3、SVG、IconFont代替图像
• 选择合适的图像：webp优于jpg，png8优于gif等

二、执行优化

1、CSS写在头部，JS卸载尾部异步

2、避免img、iframe等的src为空：空src会重新加载当前页面，影响速度和效率

3、尽量避免重置图像大小：多次重置图像大小会引发图像 多次重绘，影响性能

4、图像尽量避免使用DataURL：DataURL 图像没有使用图像的压缩算法，文件会变大，并且要解码后渲染，加载耗费时长

三、渲染优化

1、设置viewport：HTML的viewport可以加速页面渲染

2、优化动画

（1）多使用CSS的属性来绘制动画，减少JS绘制。例如使用CSS的transform来实现动画效果，可以避开重排和重绘阶段，直接在非主线程上合成动画操作，避开了布局和绘制两个阶段。

（2）适当使用Canvas动画：5个元素以内使用CSS动画，5个元素以上使用Canvas动画，iOS8+可使用WebGL动画

3、优化高频事件：scroll、touchmove等事件可导致多次渲染 

• 节流、防抖

 防抖：按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次

function debunce(fn,wait){
            let time = null
            return function(){
                let conetxt  = this,args=[...arguments]
                if(time){
                    clearTimeout(time)
                }
                time = setTimeout(()=>{
                    fn.apply(conetxt,args)
                },wait)
            }
        }

 节流：

• 拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动
• 缩放场景：监控浏览器resize
• 动画场景：避免短时间内多次触发动画引起性能问题

function throttle(fun,wait){
            let time = Date.now()
            return function(){
                let context = this
                let args = [...arguments]
                let nowtime = Date.now()
                if(nowtime-time>=wait){
                    time = Date.now()
                   return  fun.apply(context,args)
                }
            }
        }

• 使用requestAnimationFrame监听帧变化：在正确时间进行渲染
• 增加响应变化的时间间隔：减少重绘次数

4、GPU加速：使用某些HTML5标签和CSS3 属性会触发GPU渲染，要合理使用（过度使用会引发手机耗电量增加）

5、可以将动画的属性设置为absolute或者fixed，将动画脱离文档流，这样回流就不会影响到页面

四、样式优化

1、避免在HTML中书写style

 2、避免CSS表达式：CSS表达式的执行需跳出CSS树的渲染

3、值为0时不需要任何单位：为了浏览器的兼容性和性能，值为0时不要带单位

4、不滥用float：float在渲染时计算量比较大，尽量减少使用

5、不声明过多的font-size：过多的font-size影响CSS树的效率

五、脚本优化

1、减少重绘和回流

一个渲染流程大致可分为：

• 渲染进程将HTML内容转换为能够读懂的 DOM树结构
• 渲染引擎将CSS样式转化为浏览器可以理解的styleSheets，计算出DOM节点的样式
• 创建布局树，计算元素的布局信息
• 对布局树进行分层，并生成分层树
• 为每个图层生成绘制列表，并将其提交到合成线程
• 合成线程将图层分成图块，并在光栅化线程池中将图块转化为位图
• 合成线程发送绘制图块命令DrawQuad给浏览器进程
• 浏览器进程根据DrawQuad消息生成页面，并显示在显示器上

2、 尽量使用事件代理：避免批量绑定事件

3、尽量使用id选择器：id选择器选择元素是最快的

六、代码优化

1、在react框架中

• 避免使用内联函数
• 使用ReactFragments避免额外标记
• 懒加载组件
• 事件绑定方式
• 服务端渲染

2、数据结构 中

可以多使用尾递归优化，尾调用由于是函数的最后一步操作，所有不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120