前端性能优化

减少 HTTP 请求（打开网页的时候，我们看到的文字，图片，多媒体每个内容都是从服务器获取的，每一个内容的获取，就是一个 HTTP 请求）

• 图片css sprite
• 图片地图,在一张图片上关联多个 URL,URL 最终指向取决于用户点击的位置 script合并、css合并
• 内联图片,通过使用data:URL模式可以使页面包含图片但无需额外的 HTTP 请求

使用CDN内容分发网络（Content Delivery Network其目的在于让用户可就近取得所需内容，解决网络拥挤的状况，提高用户的访问速度）

压缩javascript和css(gzip)

• 去除空格、空白符、注释符
• 简写方法名、参数名,精简javascript脚本
• css重用类,删除空的声明

css放在顶部head中(css at the top)

• 避免页面出现空白或闪烁

script放在页面底部(script at the bottom)

• 先呈现出内容，避免浏览器因脚本出错而停止加载内容

避免在css中使用表达式，影响浏览器的性能

将javascript和css放在外部文件

• 单独提取
  • 提高复用性
  • 减小页面体积
  • 提高js和css的可维护性
  • 可单独缓存
• 写在页面内（样式只应用于一个页面，不被经常访问，脚本和样式很少，不多于 20）
  • 减少页面请求
  • 提升页面渲染速度

减少 DNS 查询（DNS 查找可以缓存起来以提升性能）

• IE 30m
• Chrome 60s
• Firefox 60s
• 缓存时间长：减少 DNS 重复查找，节省时间
• 缓存时间短：及时检测网站服务器的变化，保证访问的正确性

避免重定向（用户的请求被重新转向其他请求）

• 301：用户请求的页面被移动到其他位置，永久重定向，对搜索引擎更智能
• 302：用户请求的的页面被找到了，但不在原始地址，临时重定向
• 增加了服务器的往返次数

移除重复脚本

• 重复脚本会增加不必要的 HTTP 请求和执行 javascript 所浪费的时间

配置实体标签（Enity Tag,Web 服务器和浏览器用于确认缓存组件有效的一种机制)