性能优化到底怎么聊

前言

前端或者说项目怎么做性能优化，这是个老生常谈的话题了。很多招聘要求上都会写着性能优化经验，面试官也会跟你谈这个。那结合我的经验呢，我就发现，进入公司后，很少有真的去做这个性能优化。那特别大的公司就不说了，我也不知道。就一般小公司，就是业务开发，往死里开发，没人去管这个性能，甚至说压测、性能测试都没有。所以就会有这样一种情况，你会一些方法，准备实践，然而公司没给你这个机会，仅此你性能优化的经验就这么没了。

那说归说，万一有一天真的需要做了，你不懂怎么办，或者说网站性能不行，把锅甩到你头上了，怎么办？

那经过这些时间的学习呢，自己也对这方面有了一些收获，下面就来讲讲😌。

大家都背过题，有这么一个问题：从用户输入url到页面出现，经历了哪些过程 。那性能优化的原因就是有问题嘛，问题就出现在这个过程中，对于用户来说，最直观的感受就是页面出不来呢，反应很慢。那我们优化就是去处理这些过程，让页面很顺利的出现。

那哪些具体的行为会影响这个性能呢？我们拓展开就很容易想到

• http 请求
• 复杂的页面逻辑、大量的计算
• 大量的操作 DOM
• 服务器响应慢
• 返回大量的数据

这么理解嘛，http 需要请求资源啊，这需要花时间；页面的 js 计算，也需要花时间；操作 DOM，浏览器渲染，这最直接了；服务器处理大量数据，迟迟未响应，网页空白，这也是重要的一点。

那有哪些办法可以提高性能呢？这些都是大家常回答的了

• 代码压缩与混淆
• 异步加载
• CDN
• DNS 预解析
• 缓存

那这些从浏览器方面做得调整都是比较常见的解决方案了。那对于页面的性能优化来说，一方面就是上面所说的过程，针对这个过程进行优化，因此，我认为页面的性能优化可以从两个方面来谈，分析其性能低的原因。

页面性能低的原因

1、浏览器部分

浏览器部分就是上面所说的从输入URL到页面出现的过程。仅此浏览器层面可以大致分为三个部分。

• 网络层面
  • 过多的 http 请求。
    • 打开网页其实不需要太多的时间，耗时的是下载网页元素，比如 html、css、js 和图片等。多次请求就多次下载，耗时。
  • 资源访问带宽小
    • 这里两个方面，一是客户端的带宽小，而是服务器的带宽小
  • 网页元素大
    • 网页元素如图片、视频等非常大的时候，加载也慢。同个网络下，720p和1080p哪个慢，大家都试过😏
• 浏览器渲染层面
  • 渲染阻塞
    • 浏览器渲染页面需要先构建出 DOM 树和 CSSOM 树，如果 html 和 css 文件太大，那构建速度将会很慢，阻塞渲染进程了。另外 js 线程与阻塞 gui 线程，这也是阻塞渲染进程的一个原因了。
  • 重复渲染
    • 频繁地操作页面上的 DOM 元素是会导致重排或重绘的，这很消耗浏览器资源。
  • DNS解析
    • 从具体的网址，如 wwx.xxx.com 到服务器具体的ip，称DNS解析嘛，这个解析速度慢，获得的结果则慢。
• 服务端层面
  • 硬件配置低
    • 那这个是遇到几次了，说什么服务器内存不够啦，服务器崩溃之类的。
  • 服务器软件
    • 比如说防火墙、内网的一些策略，限制了带宽。
  • nginx 配置
    • 未启用 gzip 压缩、分配资源不合理、进程少等
  • 数据库未优化
    • 后端在查表的时候，方法不合理，频繁查表，导致** cpu占满**。
  • 代码问题
    • 后端代码问题，效率低，导致接口反应慢

2、代码部分

代码部分通俗来说就是优化我们的代码，那便可以大致分为几个部分。

• 构建层面
  • 未对代码进行压缩、分包
  • 没做兼容性优化
• 编码层面
  • 阻塞请求、for loop或vif的错误使用
  • 未删除重复或无用的代码
  • 没有对业务复杂的代码进行重构优化等
• 渲染机制
  • 未使用异步机制
  • 未考虑页面加载用户体验等
• 规范
  • 未遵循css规范
  • html规范

优化的原则或方法

1. 尽量减少http请求

一方面是静态资源请求，比如多张小图片可以使用雪碧图。比如一些字典类接口，可以考虑在某个情况下请求一次，后使用缓存。

2. 使用CDN

对于一些第三方库，使用CDN来引入

3. 避免空src

空的src会导致多余的http请求，虽然不耗费时间，但是会对服务器产生不必要的流量和压力。

4.开启gzip压缩

在 nginx配置中开启 gzip 压缩。

5. 文件位置

css放在头部，js放在底部。style样式写在 中，可以使用css媒体查询。js可以使用 defer 或者 async 进行处理。

6. 压缩资源

• 压缩 js、css、image
• 删除重复的脚本或代码
• 使用合适大小的图片
• 减少 dom 的数量

7. ajax 优化

POST 请求会发送两次，而且不会在客户端缓存。我们没有必要为了所谓的 POST 更安全的说法而全部使用 POST，对于一些字典类型的接口，完全可以使用 GET 请求。

8. Cookie 优化

• 减小cookie的大小

  减小 cookie 的大小，因为在发请求时浏览器会将 cookie 信息发送到server端，所以应该只在 cookie 中存必要的信息且越长度越小越好。在写 cookie 的时候要记得给 cookie 设置一个合理的过期时间及域。

• 对一些静态资源不需要 cookie 的单独设置域

  当浏览器发出静态图像请求并将 cookie 与请求一起发送时，服务器对这些 cookie 没有任何用处。因此，他们只会毫无理由地创建网络流量。所以应该确保使用无 cookie 请求请求静态组件。创建一个子域并在那里托管所有静态组件。

  所以大致就是:

  • 去除不必要的 cookie；
  • 尽量压缩 cookie 的大小；
  • 设置合适的过期时间；

9.利用缓存

浏览器会缓存大量信息（样式表，图像，js 文件等），以使当访问者返回站点时，不必重新加载整个页面。然后设置 expires 标题，以表示希望缓存该信息的时间。

利用浏览器缓存，为链接或者资源，添加 Expires 或 Cache-Control 头

• 对于静态组件：通过设置远期未来 Expires 标头实现“永不过期”策略。

• 对于动态组件：使用适当的 Cache-Control 标头来帮助浏览器处理条件请求

10.缩短服务器的响应时间

这时偏后端与运维了，比如页面有一万条数据，后端查表处理的时间太久，导致接口响应太慢。服务器配置不行也导致响应慢。

总结

其实，上面说的知识大部分，是一些比较常用而且改了之后能有显著效果的方法，总之就是体积减小，时间加快。然而这还是指大的范围，还有一些代码的优化，比如说内存泄漏啊之类的，还有代码的执行效率低啊，空间时间复杂度大之类的，这就得很详细地去测试每一行代码了。

虽然说上面比较常用，但是如果说项目要优化，我认为那不仅仅是开发的过程中注意一下那么简单，而是要集中处理，还是耗时耗力的，得运维、后端处理服务端的问题，得前端查阅整个系统，挨个处理问题。另外对优化前后要做分析，团队讨论优化的指标。处理后还需要测试进行多轮的验证，还需要产品对结果进行验收等等。所以说，性能优化的过程还是复杂的。

原文：https://juejin.cn/post/7424009003922128906