前端性能优化

一.html

1.减少dom嵌套深度

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

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

4.能用css实现的少用就标签，比如，用border-botton代替<hr/>,

二.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读取，可以先缓存。

四、http请求

1.减少http请求，雪碧图合成所有icon图片

2.http缓存，强缓存和协商缓存，ETag,cache-control,expreis

五、文件压缩

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