前端性能分析—前端优化

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

• 减少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 也可以实现类似功能）。