Web 前端性能优化概要_html/css_WEB-ITnose

优化方向

• 页面加载速度。
• 代码运行速度。

优化的方法

1. 指定优化目标。目标需要是具体的，可度量的。比如，在 50kb 每秒的网络环境下，加载首屏所用时间少于 2 秒。
2. 从大头去优化。如果提高页面加载速度，考虑优化加载时间最长的资源。如果要提高代码运行速度，考虑优化最耗时的操作。
3. 制定和实施优化策略。
4. 验证。

提升页面加载速度

• http 的缓存。
  • 强缓存。
  • 协商缓存。
• 减少 http 发送内容的大小。
  • 服务器端启用压缩服务，如用 gzip。
  • 文件内容的压缩。
  • 删除无用的代码。
  • 用没有 cookie 的域来放静态资源。
  • 选择合适的图片格式。考虑用 webp 格式的图片。
• 减少 http 数量。
  • 多个资源文件合并一个。js,css,图片(小图标可以用图片精灵 或 图标字体)。
  • 首屏的一些 css 可以考虑内联。
  • 体积比较小的图片可以考虑内联。
  • 避免空的 src 和 href。
• 提升资源下载速度。
  • 使用 cdn。
  • 无阻塞加载 script。
• 减少 dns 查找时间。
  • 减少域名数量。
• 避免重定向。
• 其他。
  • css 写在 中，js 写在 前。

提升代码运行速度

js

• 优化耗时的循环。
• 缓存一些耗性能的中间结果。
• 将耗时的任务交给 worker 来做。
• 防止内存泄漏。
• 算法改进。

css

• 如果需要动态更改css样式，尽量采用触发 reflow 次数较少的方式。
• 选择器优化。
• 避免使用 css 表达式。

html

• 尽量不要用 iframe。
• 减少 dom 数量。

工具

• yslow 分析网站，提出提升网站性能的建议。
• 阿里测 网站在不同地区的访问情况。
• chrome 开发工具中的 profiles 和 timeline。
• jsperf js 执行效率测试。
• benchmark.js 同 jsperf。

本文遵守创作共享cc by-nc-sa 4.0协议网络平台如需转载必须与本人联系确认。

AI Web Designer

AI网页设计师，快速生成个性化的网站设计

63

查看详情