网站前端性能优化

网站前端性能优化

一·网络层面优化

1、尽量减少HTTP请求次数

1、合并文件：合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，例如可以简单地把所有的CSS文件都放入一个样式表中。js脚本合并（js文件webpack合并打包）
2、CSS Sprites：CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分;
3.内联图像：内联图像是使用data:URL scheme的方法把图像数据加载页面中，这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小

2、优化HTTP请求

1.合理使用缓存：让浏览器把数据缓存到本地，再次加载同样的数据的时候，无需再向服务器请求文件，直接可以从本地缓存中读取，减少读取时间。， HTTP请求中合理添加 Expires 或 cache-control 报文头，

对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）；

对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。

2.使用CDN
CDN能够缓存一般的CSS，js图片等静态资源文件,优化第三方包插件等加载 速度

二，资源压缩优化

1.资源打包压缩，
可以对js，css,html利用webpack打包压缩资源
2.服务器文件加载缓慢可开启GZIP，
会把浏览器请求的页面，以及页面中引用的静态资源以压缩包的形式发送到客户端,然后在客户端完成解压和拼装（不要对图片文件进行Gzip压缩）

三.图片资源优化

1.不要在HTML里缩放图像
2.优化css精灵
3.使用字体图标(iconfont)
.懒加载
图片懒加载（不在页面显示区域的图片先不加载）
比如vue项目可以进行路由懒加载，当调用到该路由时再加载路由的相对应的资源。

四，代码上减少重绘和回流

*1.尽量减少DOM访问和操作（委托）

2、线下更新完节点之后再将它们添加到文档树中；
DOM元素离线更新
当对DOM进行相关操作时，例如innerHTML、appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用display:none 对元素隐藏，在元素“消失”后进行相关操作

3、避免使用JavaScript来修改页面布局样式。可以通过改变class的方式来集中式改变样式