前端优化项目主要包括以下几项:
- 减少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 也可以实现类似功能)。