前端性能优化

资源合并与压缩

课程目标

• 理解减少HTTP请求数量和减少请求资源大小两个优化要点
• 掌握压缩与合并的原理
• 掌握通过在线网站和fis3两种实现压缩与合并的方法

什么是Web前端

Web前端本质上是一种GUI软件

浏览器的一个请求从发送到返回经历了什么

文件合并存在的问题

• 首屏渲染问题
• 缓存失效问题

请求过程中一些潜在的性能优化点

• dns是否可以通过缓存减少dns查询时间？
• 网络请求的过程走最近的网络环境？
• 相同的静态资源是否可以缓存？
• 能否减少http请求大小？
• 减少http请求
• 服务端渲染

深入理解http请求的过程是前端性能优化的核心

图片相关的优化

懒加载和预加载

懒加载原理

• 图片进入可视区域后请求图片资源
• 对于电商等图片很多，页面很长的业务场景示用
• 减少无效资源的加载
• 并发加载的资源过多会阻塞js的加载，影响网站的正常使用

<img src="" lazyload=true; data-original="url">
<script>
  var viewHeight=document.documentElement.clientHight;

  function lazyload(){
    var eles=document.querySelectorAll("img[data-original][lazyload]");

    Array.prototype.forEach.call(eles,function(item,index){
      var rect;
      if(item.dataset.original==="") return;

      rect=item.getBoudingClientRect();

      if(rect.bottom>=0 && rect.top<viewHeight){
        !function(){
          var img=new Image();
          img.src=item.dataset.url;
          img.onload=function(){
            item.src=img.src;
          }
          item.removeAttribute("data-original");
          item.removeAttribute("lazyload");
        }
      }

    });
  }
</script>

预加载原理

• 图片等静态资源在使用之前的提前请求
• 资源使用到时能从缓存中加载，提升用户体验
• 页面展示的依赖关系维护