网页加速优化简单总结

加速优化常见问题

• 静态资源
  • 图片、CSS、JS等
• 代码
  • 编码效率、内存泄漏、页面卡死
• 线程
  • 阻塞页面渲染的代码，例如 alert
• 服务器
  • 带宽小、处理慢等

网站性能优化常见优化的地方

一般做好 网站性能优化 常见的几个优化即可。

图片

• 控制单张图片大小在 200kb 以内（根据服务器带宽可适当调大）
  • 将图片大小控制在服务器带宽加载速度以内，如 1Mbps=1024Kbps=1024/8KBps=128KB/s
• 非透明背景图片格式均改为 .jpg
  • .jpg 比 .png 小一些
• .jpg 图片品质控制在 60 左右 （Photoshop - 另存为 web 格式）
  • 60 一般是可以保证画质不变的最大优化
• 加载图片方式选择连续而不是优化（Photoshop - 另存为 web 格式）
  • 连续：（多线程）多行扫描优先显示不清晰的完整图像，逐渐清晰
  • 优化：逐行扫描，一点一点显示图像
• 使用 CDN（其他静态资源也推荐开启 CDN）
  • 客户端就近获取，加载速度快

开启 GZip 压缩传输模式

开启 GZip 压缩可以极大减少文字内容数据量体积，从而达到更快传输速度的目的。

• 一般用来压缩 HTML、CSS、JS 等文字类文件，
  • 图片、音视频类压缩后反而可能更大，通常可以用其他工具进行压缩
• 需要服务端和客户端都支持才可以使用
  • 服务端需要配置开启 GZip 压缩
  • 客户端支持 GZip 解压，低版本浏览器有的不支持，有的声称支持但是有问题
• CPU负载：该优化耗费服务端 CPU，但节省带宽，需要开发者自己权衡利弊。

减少页面请求数量

大部分网站的响应时间都花在 HTTP 请求，尤其是资源文件请求。

一般浏览器也会限制同域名请求的最大并发数（HTTP1.1/1.0），开启 HTTP 2.0，享受多路复用优势可以解决这个问题。

其他情况，可以通过减少页面中的 HTTP 请求数，极大的提升页面响应速度。

• 图片：雪碧图、图标字体文件、Data URLs
• 合并 JS 和 CSS 文件
  • 例如 webpack 打包
• 合理的使用 HTTP 缓存，内容固定、不经常修改的文件，尽量利用缓存
  • 需要服务器缓存配置
  • 或者使用 CDN 服务，一般都做了缓存配置

CDN（非常重要的优化点）

CDN：内容分发网络（Content delivery network）。

主要就是把需要被分发的内容，分发到世界各地的节点，让每个地区的用户（客户端）都可以在最近的节点获取请求的内容，减少网络传输距离从而达到加速的目的。

建议自己搭建 CDN 服务，或者购买第三方 CDN 服务，免费的 CDN 服务有时不稳定。

拓展阅读

• 移动端广告落地页预加载技术实践 - 张博 字节跳动