奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 >

从资源字节连接及渲染路径,来优化web前端性能

时间:2017-12-01 20:55来源:未知 作者:admin
本文介绍前端速度优化的方法,比如减少资源文件,可以通过:压缩、缓存、首页优化等等。 一,关键资源字节数 字节数也就是我通常说的减少资源文件(js,css,image,video...)的大小
本文介绍前端速度优化的方法,比如减少资源文件,可以通过:压缩、缓存、首页优化等等。


一,关键资源字节数

字节数也就是我通常说的减少资源文件(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的执行

总结

上面针对性能优化的三步给出了相应的解决方案,这并不是全部,以后大家在思考前端性能优化师可以从这三个基准方向出发


作者:hailx
来源:掘金

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路