前端部分如何做性能优化

作为一名前端开发人员，页面维护以及性能优化是我们必须要去做的事情，今天就和大家简单的聊一聊我所理解的性能优化方面。

1.减少HTTP请求

一个完整的http请求需要经历DNS查找，TCP握手，浏览器发出HTTP请求，服务器接受请求，服务器处理请求并发回响应，浏览器接受响应等过程。减少htrtp请求即减少的网络响应的次数和时间。

2.使用HTTP2.0

HTTP2.0协议相较于1.0 1.x版本 有以下几个优点，能够给页面带来性能优化：

1.解析速度更快，HTTP2.0是基于帧的协议，底层是用二进制进行解析，1.x则是是用文本格式进行解析。

2.多路复用，在HTTP2.0中，多个请求可以共用一个TCP连接。

3.Header压缩，如果说两个请求有数据是重复的部分，HTTP2.0能够将相同的部分储存起来，仅发送它们之间不同的部分，就可以节省不少的流量，加快请求的时间。

4.HTTP2.0可以为比较紧急的请求设置一个较高的优先级，在服务器收到这样的请求后，可以优先处理。

3.使用服务端渲染

客户端渲染：获取HTML文件，根据需要下载JavaScript文件，运行文件，生成DOM，再渲染。

服务端渲染：服务端返回HTML文件，客户端只需要解析HTML。

4.将CSS放在文件头部，javascript文件放在底部

css执行会阻塞渲染，阻止js执行；js加载和执行会阻塞HTML解析，阻止CSSOM构建。如果这些css，js标签放在HEAD标签里，并且需要加载和解析很久的话，那么页面就会空白了。所以js文件需要放在底部，等HTML解析完了在加载js文件，尽早向用户呈现页面内容。css文件放在头部可以防止用户第一时间看到的页面是没有样式的。js文件如果要放在头部，则需要给script标签加上defer属性，异步下载你，延迟执行。

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

字体图标就是将图标制作成一个字体，就和平时使用的字体一样，可以设置属性，例如font-size，color等等，非常方便。并且字体图标是矢量图，不会失真，生成的文件特别小。

6.减少重排重绘

用JavaScript修改样式的时候，最好不要直接写样式，而是替换class来改变样式。

如果要对dom元素执行一系列操作，可以将dom元素脱离文档流，修改完成之后，再将他带回文档