提起Web前端性能优化的问题，前端开发人员非常熟悉，对于一个网站而言，即使内容和功能再优秀，如果用户需要花费很久的时间才能打开，这样迟早会消耗用户的耐心，并最终失去用户。那如何才能优化前端性能？千锋武汉Web前端培训老师归纳为三步。

       一、关键资源字节数

       字节数也就是通常说的减少资源文件（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前端培训老师针对Web前端性能优化归纳出的解决方案。如果你想学习Web前端，就来千锋武汉Web前端培训机构，大牛全程面授，真实项目实战。现在咨询还能免费试听两周，亲身实地体验授课品质，了解学员学习情况！

上一篇

Python程序员面试牢记这些，助你闯关成功！

下一篇

学习Web前端是选择自学好还是培训好？