Web 前端性能优化概要
优化方向
- 页面加载速度。
- 代码运行速度。
优化的方法
- 指定优化目标。目标需要是具体的，可度量的。比如，在 50Kb 每秒的网络环境下，加载首屏所用时间少于 2 秒。
- 从大头去优化。如果提高页面加载速度，考虑优化加载时间最长的资源。如果要提高代码运行速度，考虑优化最耗时的操作。
- 制定和实施优化策略。
- 验证。
提升页面加载速度
- HTTP 的缓存。
- 强缓存。
- 协商缓存。
- 减少 HTTP 发送内容的大小。
- 服务器端启用压缩服务，如用 gzip。
- 文件内容的压缩。
- 删除无用的代码。
- 用没有 Cookie 的域来放静态资源。
- 选择合适的图片格式。考虑用 Webp 格式的图片。
- 减少 HTTP 数量。
- 多个资源文件合并一个。JS,CSS,图片(小图标可以用图片精灵 或 图标字体)。
- 首屏的一些 CSS 可以考虑内联。
- 体积比较小的图片可以考虑内联。
- 避免空的 src 和 href。
- 提升资源下载速度。
- 使用 CDN。
- 无阻塞加载 Script。
- 减少 DNS 查找时间。
- 减少域名数量。
- 避免重定向。
- 其他。
- CSS 写在
<head>中，JS 写在</body>前。
- CSS 写在
提升代码运行速度
JS
- 优化耗时的循环。
- 缓存一些耗性能的中间结果。
- 将耗时的任务交给 worker 来做。
- 防止内存泄漏。
- 算法改进。
CSS
- 如果需要动态更改CSS样式，尽量采用触发 reflow 次数较少的方式。
- 选择器优化。
- 避免使用 CSS 表达式。
HTML
- 尽量不要用 iframe。
- 减少 DOM 数量。
工具
- YSlow 分析网站，提出提升网站性能的建议。
- 阿里测 网站在不同地区的访问情况。
- Chrome 开发工具中的 Profiles 和 Timeline。
- jsPerf JS 执行效率测试。
- Benchmark.js 同 jsPerf。
本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.06.11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。