web前端性能优化

本文为读《大型网站技术架构-核心原理与案例分析》(作者李智慧)的笔记，摘抄。

---

web前端性能优化

• 浏览器访问优化
  • 1.减少http请求
    • 方法：
      • 合并CSS
      • 合并js
      • 合并图片（多张图片合并成一张，如果没涨图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL）
  • 2.使用浏览器缓存
    • 通过设置HTTP头中的Cache-Control和Expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月
    • 更新静态资源文件可以通过改变文件名实现，即更新javascrict文件并不是更新javascrict文件内容，而是生成一个新的js文件并更新html文件中的引用。
    • 使用浏览器缓存策略的网站在更新静态资源时，应采用批量更新的方法，应逐步更新，并有一定的间隔时间，以免用户浏览器突然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。
  • 3.启用压缩，对html、css、js文件启用GZip压缩，但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好而服务器资源不足的情况下要权衡考虑。
  • 4.CSS放在页面最上面、javascrict放在页面最下面
    • 浏览器会在下载完全部CSS之后才对整个页面进行渲染，相反浏览器会在加载js后立即执行，有可能会阻塞页面,造成页面显示缓慢，因此js最好放在页面最下面，但如果解析时就需要用到的js，放在底部就不合适了。
  • 5.减少Cookie传输。
• CDN加速

  • CDN能够缓存的一般是静态资源，如图片、文件、CSS、SCript脚本、静态网页等。

    
    
    CDN
• 反向代理
  • 可以提供安全防护
  • 可以放置一些静态资源

  • 可以实现负载均衡

    
    
    反向代理