前端性能优化

一.html

1.减少dom嵌套深度

2.写上meta标签，有利于seo

3.语义化标签，有利于维护，有利于seo

4.能用css实现的少用就标签

• 用block元素或CSS显示属性来代替
  分行
• 用CSS的border-bottom 来代替

  ---

  来添加水平线

5.尽量少用Tables来布局

二.css

1.css文件引入要放在head标签内，保证在dom加载之前加载完css

2.少用内联样式

3.能用css实现的就不要用js，css的运行效率会比JavaScript高

平滑滚动

scroll-behavior: smooth;

滚动捕抓

.parent {
  scroll-snap-type: x mandatory;
}

.child {
  scroll-snap-align: start;
}

4.一次性修改样式，可以将n次重排减少到一次重排

5.减少css嵌套，最好不要嵌套三层以上。

6.去除无用的css， 重复的或者没有生效的css

三、js

1.采用事件委托代替多个事件注册。

2.减少数据读取次数，

• 如果需要读取dom，可以先缓存。
• 如果需要遍历数组，先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。

3.节点添加优化，使用文档碎片(document.createDocumentFragment)添加节点，等节点添加完毕之后再统一加入到dom上。

4.减少作用域链查找层级

四、http请求

1.减少http请求

• 雪碧图合成所有icon图片
• vue中利用keep-alive缓存组件，比如详情页id不发生变化就不重新请求数据，
• http缓存，强缓存和协商缓存，ETag,cache-control,expreis

2.　DNS Prefetch缩短DNS的解析时间

• html 源码下载完成后，会解析页面的包含链接的标签，提前查询对应的域名
• 对于访问过的页面，浏览器会记录一份域名列表，当再次打开时，会在 html 下载的同时去解析 DNS

五、文件压缩

文件的大小会直接影响浏览器的加载速度，这一点在网络较差时表现尤为明显，构建工具webpack，gulp/grunt，rollup，压缩之后能够明显减少，可以大大降低浏览器的加载时间。