前端性能分析—前端优化

前端优化项目主要包括以下几项:

  • 减少HTTP请求(合并请求)。
  • 使用CDN数据加速(各地独立的内容分发机制)。
  • 合理地使用 Expires 头来增加缓存效果。
  • 使用动态或者静态压缩技术,并且压缩 JS 或 HTML 等文本格式中的字符数,来减少网络小号(使用单字母来定义 JS 变量、去除多余的空格和格式字符或者使用 JS 压缩工具来减小 JS 长度)。
  • 将样式表 CSS 存放在页面顶部。
  • JS 脚本存放在页面底部。
  • 避免 CSS 表达式。
  • 使用外部的 JavaScript 和 CSS。
  • 减少 DNS 查询。
  • 对 JavaScript 进行一定的精简。
  • 避免重定向。
  • 移除重复的脚本。
  • 配置 Etag 标签。
  • 使用 AJAX 可缓存。

可以使用类似于 PageSpeed 或 YSlow 这样的工具快速帮助我们简单有效地分析页面前端问题,而对于万维网中的异地访问,可以通过一些云性能测试平台实现多地访问速度评测。在 http://internetsupervision.com/ 这个网站中输入要测试的网站地址即可给出不同地域的访问速度。

由于性能测试通常是在局域网内进行的,所以前端分析中网络问题并不会明显的出现,可以通过带宽模拟来得到在真实带宽下页面下载所需要的时间。当在真实环境下测试时,遇到前端问题可以使用 VisualRoute 工具帮助分析路由,也可以通过 tracert 命令来进行简单的跟踪和定位。

JavaScript 性能分析工具——dynaTrace可以帮助我们完成客户端级别的渲染分析(FireBug 也可以实现类似功能)。

猜你喜欢

转载自blog.csdn.net/DaisyCold/article/details/106548130