前端性能优化的七⼤⼿段
前⾯的话
  本⽂将详细介绍前端性能优化的七⼤⼿段，包括减少请求数量、减⼩资源⼤⼩、优化⽹络连接、优化资源加载、减少重绘回流、使⽤性能更好的API和构建优化
svg图片怎么使用
减少请求数量
【合并】
  如果不进⾏⽂件合并，有如下3个隐患
  1、⽂件与⽂件之间有插⼊的上⾏请求，增加了N-1个⽹络延迟
  2、受丢包问题影响更严重
  3、经过代理服务器时可能会被断开
  但是，⽂件合并本⾝也有⾃⼰的问题
  1、⾸屏渲染问题
  2、缓存失效问题
  所以，对于⽂件合并，有如下改进建议
  1、公共库合并
  2、不同页⾯单独合并
【图⽚处理】
  1、雪碧图
  CSS雪碧图是以前⾮常流⾏的技术，把⽹站上的⼀些图⽚整合到⼀张单独的图⽚中，可以减少⽹站的HTTP请求数量，但是当整合图⽚⽐较⼤时，⼀次加载⽐较慢。随着字体图⽚、SVG图⽚的流⾏，该技术渐渐退出了历史舞台
  2、Base64
  将图⽚的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码⽤8位字符表⽰信息中的6个位，所以编码后⼤⼩⼤约⽐原始值扩⼤了 33%
  3、使⽤字体图标来代替图⽚
【减少重定向】
  尽量避免使⽤重定向，当页⾯发⽣了重定向，就会延迟整个HTML⽂档的传输。在HTML⽂档到达之前，页⾯中不会呈现任何东西，也没有任何组件会被下载，降低了⽤户体验
  如果⼀定要使⽤重定向，如http重定向到https，要使⽤301永久重定向，⽽不是302临时重定向。因为，如果使⽤302，则每⼀次访问http，都会被重定向到https的页⾯。⽽永久重定向，在第⼀次从http重定向到https之后，每次访问http，会直接返回https的页⾯
【使⽤缓存】
  使⽤cach-control或expires这类强缓存时，缓存不过期的情况下，不向服务器发送请求。强缓存过期时，会使⽤last-modified或etag这类协商缓存，向服务器发送请求，如果资源没有变化，则服务器返回304响应，浏览器继续从本地缓存加载资源；如果资源更新了，则服务器将更新后的资源发送到浏览器，并返回200响应
【不使⽤CSS @import】
  CSS的@import会造成额外的请求
【避免使⽤空的src和href】
  a标签设置空的href，会重定向到当前的页⾯地址
  form设置空的method，会提交表单到当前的页⾯地址
减⼩资源⼤⼩
【压缩】
  1、HTML压缩
  HTML代码压缩就是压缩在⽂本⽂件中有意义，但是在HTML中不显⽰的字符，包括空格，制表符，换⾏符等
  2、CSS压缩
  CSS压缩包括⽆效代码删除与CSS语义合并
  3、JS压缩与混乱
  JS压缩与混乱包括⽆效字符及注释的删除、代码语义的缩减和优化、降低代码可读性，实现代码保护
  4、图⽚压缩
  针对真实图⽚情况，舍弃⼀些相对⽆关紧要的⾊彩信息
【webp】
  在安卓下可以使⽤webp格式的图⽚，它具有更优的图像数据压缩算法，能带来更⼩的图⽚体积，同等画⾯质量下，体积⽐jpg、png少了25%以上，⽽且同时具备了⽆损和有损的压缩模式、Alpha 透明以及动画的特性
【开启gzip】
  HTTP协议上的GZIP编码是⼀种⽤来改进WEB应⽤程序性能的技术。⼤流量的WEB站点常常使⽤GZIP压缩技术来让⽤户感受更快的速度。这⼀般是指WWW服务器中安装的⼀个功能，当有⼈来访问这个服务器中的⽹站时，服务器中的这个功能就将⽹页内容压缩后传输到来访的电脑浏览器中显⽰出来。⼀般对纯⽂本内容可压缩到原⼤⼩的40%
优化⽹络连接
【使⽤CDN】
  CDN全称是Content Delivery Network，即内容分发⽹络，它能够实时地根据⽹络流量和各节点的连接、负载状况以及到⽤户的距离和响应时间等综合信息将⽤户的请求重新导向离⽤户最近的服务节点上。其⽬的是使⽤户可就近取得所需内容，解决 Internet⽹络拥挤的状
况，提⾼⽤户访问⽹站的响应速度
【使⽤DNS预解析】
  当浏览器访问⼀个域名的时候，需要解析⼀次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓
存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址
  DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会⽤到的域名，使解析结果缓存到系统缓存中，缩短DNS 解析时间，来提⾼⽹站的访问速度
  ⽅法是在 head 标签⾥⾯写上⼏个 link 标签
<link rel="dns-prefecth" href="le">
<link rel="dns-prefecth" href="le-analytics">
  对以上⼏个⽹站提前解析 DNS，由于它是并⾏的，不会堵塞页⾯渲染，这样可以缩短资源加载的时间
【并⾏连接】
  由于在HTTP1.1协议下，chrome每个域名的最⼤并发数是6个。使⽤多个域名，可以增加并发数
【持久连接】
  使⽤keep-alive或presistent来建⽴持久连接，持久连接降低了时延和连接建⽴的开销，将连接保持在已调谐状态，⽽且减少了打开连接的潜在数量
【管道化连接】
  在HTTP2协议中，可以开启管道化连接，即单条连接的多路复⽤，每条连接中并发传输多个资源，这⾥就不需要添加域名来增加并发数了
优化资源加载
【资源加载位置】
  通过优化资源加载位置，更改资源加载时机，使尽可能快地展⽰出页⾯内容，尽可能快地使功能可⽤
  1、CSS⽂件放在head中，先外链，后本页
  2、JS⽂件放在body底部，先外链，后本页
  3、处理页⾯、处理页⾯布局的JS⽂件放在head中，如babel-polyfill.js⽂件、flexible.js⽂件
  4、body中间尽量不写style标签和script标签
【资源加载时机】
  1、异步script标签
  defer:  异步加载，在HTML解析完成后执⾏。defer的实际效果与将代码放在body底部类似
  async: 异步加载，加载完成后⽴即执⾏
  2、模块按需加载
  在SPA等业务逻辑⽐较复杂的系统中，需要根据路由来加载当前页⾯需要的业务模块
  按需加载，是⼀种很好的优化⽹页或应⽤的⽅式。这种⽅式实际上是先把代码在⼀些逻辑断点处分离开，然后在⼀些代码块中完成某些操作后，⽴即引⽤或即将引⽤另外⼀些新的代码块。这样加快了应⽤的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载
  webpack 提供了两个类似的技术，优先选择的⽅式是使⽤符合 ECMAScript 提案的 import() 语法。第⼆种则是使⽤ webpack 特定的sure
  3、使⽤资源预加载preload和资源预读取prefetch
  preload让浏览器提前加载指定资源，需要执⾏时再执⾏，可以加速本页⾯的加载速度
  prefetch告诉浏览器加载下⼀页⾯可能会⽤到的资源，可以加速下⼀个页⾯的加载速度
  4、资源懒加载与资源预加载
  资源延迟加载也称为懒加载，延迟加载资源或符合某些条件时才加载某些资源
  资源预加载是提前加载⽤户所需的资源，保证良好的⽤户体验
  资源懒加载和资源预加载都是⼀种错峰操作，在浏览器忙碌的时候不做操作，浏览器空间时，再加载资源，优化了⽹络性能
减少重绘回流
【样式设置】
  1、避免使⽤层级较深的选择器，或其他⼀些复杂的选择器，以提⾼CSS渲染效率
  2、避免使⽤CSS表达式，CSS表达式是动态设置CSS属性的强⼤但危险⽅法，它的问题就在于计算频率很快。不仅仅是在页⾯显⽰和缩放时，就是在页⾯滚动、乃⾄移动⿏标时都会要重新计算⼀次
  3、元素适当地定义⾼度或最⼩⾼度，否则元素的动态内容载⼊时，会出现页⾯元素的晃动或位置，造成回流
  4、给图⽚设置尺⼨。如果图⽚不设置尺⼨，⾸次载⼊时，占据空间会从0到完全出现，上下左右都可能位移，发⽣回流
  5、不要使⽤table布局，因为⼀个⼩改动可能会造成整个table重新布局。⽽且table渲染通常要3倍于同等元素时间
  6、能够使⽤CSS实现的效果，尽量使⽤CSS⽽不使⽤JS实现
【渲染层】
  1、此外，将需要多次重绘的元素独⽴为render layer渲染层，如设置absolute，可以减少重绘范围
  2、对于⼀些进⾏动画的元素，使⽤硬件渲染，从⽽避免重绘和回流
【DOM优化】
  1、缓存DOM
const div = ElementById('div')
  由于查询DOM⽐较耗时，在同⼀个节点⽆需多次查询的情况下，可以缓存DOM
  2、减少DOM深度及DOM数量
  HTML 中标签元素越多，标签的层级越深，浏览器解析DOM并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
  3、批量操作DOM
  由于DOM操作⽐较耗时，且可能会造成回流，因此要避免频繁操作DOM，可以批量操作DOM，先⽤字符串拼接完毕，再⽤innerHTML 更新DOM
  4、批量操作CSS样式
  通过切换class或者使⽤元素的style.csstext属性去批量操作元素样式
  5、在内存中操作DOM
  使⽤DocumentFragment对象，让DOM操作发⽣在内存中，⽽不是页⾯上
  6、DOM元素离线更新
  对DOM进⾏相关操作时，例、appendChild等都可以使⽤Document Fragment对象进⾏离线操作，带元素“组装”完成后再⼀次插⼊页⾯，或者使⽤display:none 对元素隐藏，在元素“消失”后进⾏相关操作
  7、DOM读写分离
  浏览器具有惰性渲染机制，连接多次修改DOM可能只触发浏览器的⼀次渲染。⽽如果修改DOM后，⽴即读取DOM。为了保证读取到正确的DOM值，会触发浏览器的⼀次渲染。因此，修改DOM的操作要与访问DOM分开进⾏
  8、事件代理
  事件代理是指将事件注册在⽗级元素上，由于⼦元素的事件会通过事件冒泡的⽅式向上传播到⽗节点，因此，可以由⽗节点的监听函数统⼀处理多个⼦元素的事件
  利⽤事件代理，可以减少内存使⽤，提⾼性能及降低代码复杂度
  9、防抖和节流
  使⽤函数节流（throttle）或函数去抖（debounce），限制某⼀个⽅法的频繁触发
  10、及时清理环境
  及时消除对象引⽤，清除定时器，清除事件，创建最⼩作⽤域变量，可以及时回收内存
性能更好的API
  1、⽤对选择器
  选择器的性能排序如下所⽰，尽量选择性能更好的选择器
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
⼦选择器（ul > li）
后代选择器（li a）
通配符选择器（*）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。