前端性能优化

Posted on | In

减少HTTP请求

  • 图片地图

    • 就是把页面上用到的多个图片合并成一张图片，利用map控制显示的位置，接着在这张图片上关联多个URL，加载的时候就只要发送一次HTTP请求获取这张图片就行了。（相关实例可以网上自行搜索）
    • CSS Sprites合并图片，精灵图
    • 内联图片，浏览器不会缓存这种图像。dataurl节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。还有一点IE8以下都不支持这种图像,所以一般不用。
    • 合并脚本和样式表，尽量减少js和css的请求数量

  • 使用内容发布网络（CDN）

    • CDN发布的内容主要是静态内容，如图片、脚本、样式表和Flash。主要是静态内容更容易存储且具有较少的依赖性。

  • 添加Expires头

    • 这个规则主要是针对缓存的，使用缓存来减少加载组件的数量，不是针对首次访问的优化，但是对于多次浏览的响应时间的优化还是巨大的。通过使用一个长久的Expires头，可以使需要缓存的组件被缓存，这会在后续的页面浏览中避免不必要的HTTP请求。 

      Expires: Mon, 15 Apr 2024 20:20:20 GMT

      这是一个有效期非常长久的Expires头，它告诉浏览器该响应的有效期持续到2024年4月15日为止。如果为页面中的一个图片返回了这个头，浏览器在后续的页面浏览中会使用缓存的图片。
      Expires存在限制，要求服务器和客户端的时间严格同步，过期日期需要检查，并提供新日期，所以还有另外一种选择，cache-control使用max-age指令指定用户被缓存多久，达到的效果也是一样的

  • 压缩组件

    • 就是启用Gzip压缩，压缩文档、脚本、样式表，传输的大小变小了，响应时间自然就减少了。

  • 将样式表放在顶部

  • 将脚本放在底部

    • 在下载脚本时浏览器会阻塞并行下载，如果放在上面的话有可能要等到页面加载完成才能看到界面的整体效果，这对用户体验是很差的

  • 避免CSS表达式

    • 表达式的问题在于对其进行的求值，它们不只在页面呈现和大小改变时求值，当页面滚动、甚至用户鼠标在页面上移过时都要被求值。所以对页面的性能影响是很大的。
      CSS3提供了calc()函数，可以用来实现css的一些求值运算。

下面是表达式例子：

#myDiv {
position: absolute;
width: 100px;
height: 100px;
background:#c00;
left: expression(document.body.offsetWidth - 180   "px");
top: expression(document.body.offsetHeight - -80   "px");
text-align:center;
line-height:90px;
color:#fff;
}

calc() 函数用于动态计算长度值。

calc() = calc(四则运算)

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 “+”, “-“, “*”, “/“ 运算；

calc()函数使用标准的数学运算优先级规则；

  • 使用外部的JS和CSS
    • 因为外部的JS和CSS是可以被缓存的，而如果是内联的话就要每次都要加载。

  • 减少DNS查找

    • 方法：通过使用Keep-Alive和较少的域名来减少DNS查找

  • 精简JS，相当于压缩，且会除去注释及空格

  • 避免重定向。重定向会延迟整个HTML文档的传输
  • 移除重复脚本
  • 配置或移除Etag
  • 使用Ajax可缓存。确保ajax请求遵守性能指导，尤其应具有长久的expires头