性能优化

网络优化

DNS预解析

当我们输入url访问一个网页后，第一步会进行DNS查询，通过DNS得到IP地址。
想让DNS查询更快，可以花钱购买一些更快的DNS服务，但没有必要。
一般是配置hosts，自己把ip配置好。DNS就会读取系统hosts文件，查找其中是否有对应的ip。使用HTML头部的可以帮助你提前获取DNS记录

使用CDN

静态css/js/img等资源可以做cdn缓存，这样把资源同步到全国全球各地，用户就能更快访问到

浏览器缓存

代码压缩

开启 gzip 压缩

gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，Web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip压缩效率非常高，通常可以达到 70% 的压缩率，也就是说，如果你的网页有 30K，压缩之后就变成了 9K 左右

Webpack 压缩

在 webpack 可以使用如下插件进行压缩：

JavaScript：UglifyPlugin
CSS ：MiniCssExtractPlugin
HTML：HtmlWebpackPlugin

JavaScript中的性能优化

防抖和节流（resize，scroll，input）。

使用事件委托（简化DOM操作）

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>凤梨</li>
</ul>

<script>
// good
document.querySelector('ul').onclick = (event) => {
  const target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
}) 
</script>

css 放，js 脚本放最底部。

由于用户浏览网页是先看再进行操作，所以先把css加载出来有利于客户的使用体验。

延迟JavaScript

defer属性告诉浏览器在 HTML 解析器解析完文档之后运行脚本，但在事件发生之前，DOMContentLoaded会被触发。

页面渲染优化

避免CSS、JS阻塞

使用字体图标 iconfont 代替图片图标

字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真

降低 CSS 选择器的复杂性

减少嵌套。后代选择器的开销是最高的，因此我们应该尽量将选择器的深度降到最低（最高不要超过三层），尽可能使用类来关联每一个标签元素
关注可以通过继承实现的属性，避免重复匹配重复定义
尽量使用高优先级的选择器，例如 ID 和类选择器。
避免使用通配符，只对需要用到的元素进行选择

减少回流（重排）和重绘。

7.4.1 重绘 (Repaint)

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘

7.4.2 回流 (Reflow)

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

回流必将引起重绘，重绘不一定会引起回流，回流比重绘的代价要更高。

图片资源优化

使用雪碧图

雪碧图的作用就是减少请求数，而且多张图片合在一起后的体积会少于多张图片的体积总和，这也是比较通用的图片压缩方案

图片懒加载

在图片即将进入可视区域的时候进行加载（判断图片进入可视区域请参考这里）

使用CSS3代替图片

有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好

图片压缩

压缩方法有两种，一是通过在线网站进行压缩，二是通过 webpack 插件 image-webpack-loader。它是基于 imagemin 这个 Node 库来实现图片压缩的。

使用 webp 格式的图片

WebP 是 Google 团队开发的加快图片加载速度的图片格式，其优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

Webpack 优化

减小代码体积
babel-plugin-transform-runtime减少ES6转化ES5的冗余
按需加载
提取第三库代码
模板预编译
webpack dll优化

vue

v-for添加key
路由懒加载
图片懒加载
第三方插件按需引入
合理使用computed和watch
v-for的同时避免使用v-if
destory时销毁事件：比如addEventListener添加的事件、setTimeout、setInterval、bus.$on绑定的监听事件等
使用v-if和v-show

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

react

map循环展示添加key

路由懒加载

第三方插件按需引入

使用scu，memo或者pureComponent避免不必要的渲染

合理使用useMemo、memo、useCallback

他们三个的应用场景都是缓存结果，当依赖值没有改变时避免不必要的计算或者渲染。

useCallback 是针对函数进行“记忆”的，当它依赖项没有发生改变时，那么该函数的引用并不会随着组件的刷新而被重新赋值。当我们觉得一个函数不需要随着组件的更新而更新引用地址的时候，我们就可以使用 useCallback 去修饰它。
React.memo 是对组件进行 “记忆”，当它接收的 props 没有发生改变的时候，那么它将返回上次渲染的结果，不会重新执行函数返回新的渲染结果。
React.useMemo是针对 值计算 的一种“记忆“，当依赖项没有发生改变时，那么无需再去计算，直接使用之前的值，对于组件而言，这带来的一个好处就是，可以减少一些计算，避免一些多余的渲染。当我们遇到一些数据需要在组件内部进行计算的时候，可以考虑一下 React.useMemo

浅谈web前端性能优化