网站加载慢

白屏时间过长，首屏加载时间过长，可能有以下几个原因：

  1. 服务端生成 HTML 文档耗时过多，TTFB 时间长
  2. 未使用缓存或策略不合理
  3. 脚本文件引用过于靠前，阻塞页面渲染
  4. 请求数（图片及脚本）过多
  5. 图片/文件过大
  6. Cookie 信息过多
  7. 未使用懒加载或策略不合理
  8. 未使用 CDN

对应解决方案

  1. 前后端分离，访问内容最大程度静态化
  2. 后端数据生成策略，浏览器文件，以及前端相关逻辑。在每个环节都可以制定合理的缓存策略
  3. js 文件引用及相关执行置于 body 标签尾部，并尽量避免在此之前调用 js 代码
  4. 小图片合并，小文件合并
  5. 图片尺寸按需请求，脚本内容混淆压缩
  6. 使用不同的域名，并且最小化其依赖的 Cookie
  7. 业务上区分出主次，制定合理的加载策略
  8. 使用 CDN，并合理地使用不同域名

场景

用户访问我们的 M 站，以 专题页 为例，从点击链接到看到画面，等待的时间长，较为明显的有以下两个原因：

  1. 服务端内部请求耗时，且未进行优化。每个请求都在 M 站服务器内部又进行了专题数据请求（虽然有缓存，但不够合理）。
  2. js 文件引用过于靠前，使得页面渲染受到阻塞。当引用的 js 文件为被浏览器缓存时，需要等待其下载并执行，在该代码之下的 HTML 代码需要等待其执行完毕才会渲染。

解决方案

  1. 前后端分离。业务上区分出可静态化和不可静态化的内容，如页面信息可静态化，登录状态及地理位置信息不可静态化。
  2. 专题内容静态化。由于专题内容修改的频率很低，这部分应事先静态化。
  3. 内存缓存。更进一步，采用缓存服务器的内存缓存，使静态内容的访问性能进一步提升。
  4. 数据一致性。若专题数据发生修改，则通知缓存服务器重新请求数据，以保证数据的一致性。
  5. 数据预加载。在专题数据创建/修改时，通知缓存服务器进行预加载/刷新，使前台访问不会穿透到后端服务器。
  6. 专题页框架改造。使 HTML专题数据得到一定程度的约束。

架构方案

  • 缓存服务器。基于 Nginx 实现。
  • 后端服务器，充当静态页面生成器的功能。因为不会被穿透，可不在后端性能上多作计较，以开发部署便捷优先。采用 Apache + PHP 实现静态页面的生成。
  • 前端异步请求。过去在服务端通过 Cookie 去判断用户状态的方式可改造为前端异步请求。