网站性能优化

性能优化可以从两个层面考虑:网络、渲染

一、网络

1、减少文件体积。利用webpack实现压缩、按需加载、去掉log、注释等。

2、开启gzip压缩,将文件打包成gzip格式。服务器端nginx开启gzip。gzip可以将文件压缩到30%左右。

3、图片,logo用png,其他图用jpg。图片体积尽量减小。淘宝上缩略图大小20k~50k,轮播图100k左右。小图片base64打到js文件里,或者用精灵图

4、部署,静态资源走cdn

5、dns预取

6、多个cdn

7、tcp连接优化,http/2

8、合并请求


二、渲染

1、服务端渲染,优化首屏加载。

2、减少dom操作。多次频繁的dom插入,可以先写在内存中,再插入文档。

3、避免回流和重绘,尽量避免改变dom尺寸。

4、页面懒加载,滚动到页面该位置才加载。

5、事件节流。比如scroll事件,用户可能不停的滑动页面,scroll性能消耗比较大,采用节  流,可以采取100毫秒内的事件只计算一次。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容