前端性能分析优化

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 分析问题 我们并不仅仅关注页面资源的解析和展示响应时间,而是要关注总时间;我们进行web前端性能测试的目的是计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间等指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此结果的基础上,给出一定的优化建议和解决方案,从而提升用户体验。

分析问题

我们并不仅仅关注页面资源的解析和展示响应时间,而是要关注总时间;我们进行web前端性能测试的目的是计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间等指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此结果的基础上,给出一定的优化建议和解决方案,从而提升用户体验。

根据雅虎团队经验:网站页面性能优化的34条黄金守则,我们逐条分析。

性能黄金法则

只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求上。

  1. 尽量减少HTTP请求次数

    • 合并文件.

      例如将项目中用的资源文件合并。所有的CSS文件都放入一个样式表中.或者将js文件合并压缩

      利用gulp,grunt,webpack等构建工具将项目资源文件整合

    • 利用CSS Sprites 减少图像请求.

      通过使用合并图片,通过指定css的backgroud-image和backgroud-position来显示元素。

  2. 启用浏览器缓存

    • 要利用浏览器缓存存储可缓存的资源

      在HTTP标头中为静态资源设置有效期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源而不是从网络中加载。

  3. 减少DNS查找

    • DNS缓存

      当客户端的DNS缓存为空时,DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。

  4. 使用内容分发网络

    • 页面静态化,取决于发布系统

      按页面内容划分域名,在合适的资源服务器上存放文件

  5. 避免404错误

    • 避免内部无效的链接
  6. 避免重定向

  7. 压缩组件

  8. 精简Javascript和Css

  9. 尽量缩减页面大小

    • 页面必须小于150K(不含图片)

      a) 静态文件是否gzip

      b) 图片是否压缩优化过

  10. 预处理

    • 浏览器空闲时请求将来可能会用到的页面内容

    无条件加载:触发onload事件时,直接加载额外的页面内容

    有预期的加载:载入重新设计过的页面时使用预加载。

  11. 移除重复脚本

  12. 使iframe的数量最小

    • 异步加载
  13. js 开发规范

  • 代码逻辑分层
  • 避免全局变量
  • 便于多人协作开发
  • 各部分代码模块化,可以按需加载 利用requirejs和seajs等模块化工具加载
  • 保持全局变量的清洁
  • 可进行单元测试

最新内容请见作者的GitHub页:http://qaseven.github.io/
相关文章
|
4天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
17 5
|
5天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
25 7
|
4天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
11 1
|
5天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
14 2
|
11天前
|
缓存 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
25 3
|
11天前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
11 1
|
11天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
11天前
|
监控 前端开发 JavaScript
前端性能优化:打造流畅用户体验的秘籍
【10月更文挑战第20天】前端性能优化:打造流畅用户体验的秘籍
21 2
|
12天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
5天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
11 0