【读书笔记】如何进行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前端性能优化是一个必须要掌握的知识，那么应该怎么进行Web前端性能优化呢？

1、CSS精灵

CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

2、代码压缩

（1）将table改为div布局

尽量将table标签布局HTML重构div布局，可以节约至少40%的代码量。由于div代码少于table布局的HTML网页，所以搜索引擎索引权重也优于table布局的HTML网页。

（2）缩减精简div、span、ul、li等系列标签

布局DIV+CSS网页时候，有时候可以节约一些DIV布局代码，减少代码量。

（3）删除多余空格

删除多余空格换行，可以有效地压缩HTML代码占用字节，一般在开发完成后可以对HTML中代码进行删除换行和空格内容。

（4）表格类型布局时候适当使用table替代div布局

如果是本身是表格数据列表排版，我们最好选择table，因为表格布局使用table优于div布局，使用table布局却比div布局节约HTML标签代码和节约CSS样式。

（5）网页GZIP压缩

自己的服务器推荐设置网页Gzip压缩功能。

3、高质量的JS代码肯定能省很多事，封装JS以及重复调用方法能够减少很多操作。

4、减少对DOM的操作

（1）创建临时父元素。

（2）创建子元素，并添加内容，设置属性。

（3）把子元素加入到临时父元素中。

（4）把临时父元素添加到DOM树。

或：（1）找到要添加位置的元素。

（2）改变该元素内容为需要的HTML。

5、使用JSON格式来进行数据交换

原理：JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

6、高效使用HTML标签和CSS样式

7、使用CDN加速（内容分发网络）

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

8、精简CSS和JS文件

9、注意控制Cookie大小和污染