大巧不工Web前端设计修炼之道——（7）让你的设计更加完美——优化技巧和最佳实践

1.性能在前端的重要性

网页打开速度一般在2s以内为宜，之后每延迟1s，将失去10%的用户
性能测试工具：

• Page Speed：网页加速工具，自动优化网站图像
• YSlow：检查优化的空间，列出修改意见

2.前端性能优化的基本原则

2.1页面内容的优化

• 降低请求数：合并文件（js、css）、CSS Sprites、剔除重复脚本
• 减少交互通信量：
  
  • 压缩技术：压缩JS/CSS（YUI Compressor、Page Speed）；优化图像（YSlow工具下的Smush.it在线压缩工具）；减少Cookie体积
  • 合理的利用缓存：使用外部JS、CSS；缓存Ajax
  • 减少不必要的通信量：剔除未用到的JS、CSS；推迟加载内容；使用GET来完成Ajax请求（POST方式需要发送文件头，再发送数据，发送两个TCP包）；对于静态内容使用无cookie请求
• 合理利用并行：
  
  • 尽量避免重定向：当URL结尾本该有斜杠（/）却被省略掉的时候会浪费相应时间
  • 慎用iframe
  • 把样式表置于顶部（放在head内部会加快页面的下载速度）
  • 脚本放到样式后面加载
• 节约系统消耗：
  
  • 避免使用CSS表达式
  • 避免使用滤镜

2.2服务器的优化

• 使用内容分发网络（CDN）
• 配置合理的缓存机制
• Gzip压缩文件内容
• 减少DNS查找次数
• -

3.让自己更容易被发现

搜索引擎优化。
3.1SEO策略

• 网站内容的规划和组织
• 链接策略——SEO的重点
• 站点地图
• 关键词的选择和分析

3.2前端搜索引擎友好

• 友好的用户界面
• 友好的搜索引擎HTML代码

3.3其他

• 谨慎地使用用户重定向
• 避免URL参数
• 服务器相应速度

3.4维护SEO效果
- 排名监控
- 网站分析
- 关键词监控
- 链接监控
- 内容更新