Web前端的性能优化(转)

前端的性能优化也属于SEO中的一种,而且网站成形后优化环节是必不可少的。最近在掘金上面看到了一篇关于前端性能优化的,我想无论是你是一名码农还是一个SEOer,了解这些东西或多或少也会对你有点帮助。

一、关键资源字节数

字节数也就是我们通常说的减少资源文件(js,css,image,video等)的大小。

1.压缩

• 前端使用uglify混淆压缩

•后端开启gzip

•对于图片进行压缩,使用压缩比例更高的格式(webP)

2. 缓存

• 强缓存(http状态码:200),不用请求服务器直接使用本地缓存

•协商缓存 (http状态码:304),使用时先请求服务器若被告知缓存没过期则使用本地缓存,不用下载资源

•使用localstorage对数据进行存储

3 .针对首屏优化

对非关键资源延迟加载、异步加载,减少首页资源大小

二、关键资源连接数

1 .合并请求

• 使用http2.0的多路复用合并请求

• 配置combo,在无法使用http2.0的情况下作为一种合并资源请求的手段

2. 减少图片请求数

• 使用spite图

•使用svg_symbol

3 .针对一些场景采用css、js内联的方式

4 .使用强缓存减少了一次服务器请求

5 .非关键资源延迟、异步加载,减少了首屏资源连接数

三 、关键渲染路径

页面渲染

1 .bigpipe分块输出

这里主要是因为要完成一整个页面的输出后端需要处理很多个任务,我们可以将这些多个任务进行分块,谁先完成谁就先输出,最终通过JS回填的方式输出DOM节点。这种方式主要解决了直出页面阻塞的问题。

2 .bigrender分块渲染

常规的手段就是采用前端模块渲染页面,针对首屏时间主要减少了首次构建DOM树时的节点树

3 .针对reflow,repaint,composit路径处理

4 .涉及到动画时关于layer的概念render layer、graphics layer

5 .css放在头部、js放底部避免阻塞DOM树的构建

关于CSS、JS的位置对于页面渲染的影响大家可以关注下相关的文章。核心:CSS资源不会阻塞DOM树的构建但会阻塞DOM的渲染,JS会阻塞DOM树的构建,CSS会阻塞JS的执行

总结

上面针对性能优化的三步给出了相应的解决方案,这并不是全部,以后大家在思考前端性能优化师可以从这三个基准方向出发。在此,也提醒大家,假如有不懂的地方记得百度,一点一点消化,直至完全消化,相信对以后的前端开发会有很大的帮助。

陈健的个人博客,记录生活所见所感、学习笔记。专注于Web前端_SEO教程_读书心得。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫