一次混合开发的前端调优经验

一、背景

最近根据需求需要开发新闻类业务的时候与IOS、Android进行混合开发，各种各样的分析最后得出：web提供h5的模板，后端在管理员提交文章内容的同同时向前端提供的模板中插入对应的数据。然后生成一个链接存进去，返回给移动端一个链接并使用web-view承载

二、简介

1. 我们的开发在大多数的情况下都是使用vue来开发，鉴于当前如果使用vue的情况下只开发一个通用的新闻类需求有点小题大做了，所以我们采用经典的h5+scss+jquery+webpack开发。
   同时为了解决适配问题，引入了flexible.js，在此就不再多说了，说到底，就是监听变化，设置根节点font-size，相关px转为rem。不了解的大家可以去参考下别人的这个链接。
   组件传送门：https://www.jianshu.com/p/04efb4a1d2f8
2. 页面内容其实非常非常的少，大致内容就是一个标题，一个logo，一个名字，一个简介，一个关注，一个内容。。。。。。 就是这么少。
3. 通过懒加载、代码打包压缩减少资源消耗，以及代码的时间复杂度
4. 通过添加缓存实现（只是有个思路，没有实际操作，后续优化）

三、开发

1. 首先是对flexible.js的引入

为了能够更快的加载对应的js，我们把代码直接拷贝到html中使用内敛脚本方式执行。这样做也是为了能够让页面框架的所有资源加载前执行，原因在于下边这段话：

执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。
如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。

2. 其次是文本中的图片进行懒加载
由于我们的文本内容是通过富文本生成的，所以我们无法对内部的图片进行直接操作。所以我们对文本中的所有图片进行初始化，添加data-isload属性，data-src属性。

// 将富文本内所有的图片重写
  $("main img").map((i, v) => {
    $(v).data("src", $(v).attr("src"));
    console.log($(v).data("src"));
    $(v).attr("src", "./img/default-logo.png");
  });

增加属性之后筛选出首屏加载的图片优先加载

// 首屏加载时候加载当前屏幕下的图片
  var $firstScreenImgs = []; // 首屏加载
  var $lazyLoadImgs = []; // 懒加载
  $("main img").map((i, v) =>
    $(v).offset().top < windowHeight
      ? $firstScreenImgs.push(v)
      : $lazyLoadImgs.push(v)
  );
  $firstScreenImgs.map((v, i) =>
    $(v)
      .attr("src", $(v).data("src"))
      .data("isload", true)
  );

重要的一步：添加页面滚动监听时间，对懒加载数组中的内容循环遍历，页面滚动高度达到当前图片的高度时候加载图片，，，，，，后边的+10是为了提前一丢丢的时间加载，让用户感受到图片的加载时间不是那么漫长（~我就是想这样加，管他对不对~）

// 图片懒加载
  window.onscroll = () => {
    windowScrollTop =
      window.scrollY ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
    $lazyLoadImgs.map((v, i) => {
      console.log($(v).data("isload"));
      if (!$(v).data("isload")) {
        // 页面滚动高度达到当前图片的高度时候加载图片
        if ($(v).offset().top <= windowScrollTop + windowHeight + 10) {
          $(v)
            .attr("src", $(v).data("src"))
            .data("isload", true);
        }
      }
    });
  };

3. 再者是对当代码进行压缩
我使用的是webpack4，没有通过webpack.config.js进行配置，直接使用webpack命令打包了

这是压缩后的js代码，因为这玩意实在是没东西写哈哈哈哈。不过可以看到，已经少了将近0.2kb了，可以了，这只是一个简单的小demo而已，可以想等你的代码块内容比较多的时候，效果提升会很明显。

同样的，css和scss对比一下

四、本地调试对比

未使用懒加载也未使用webpack打包的情况下，耗时1.74s

未使用webpack打包但使用懒加载的情况下，耗时995ms

使用webpack打包以及懒加载的情况下，耗时605ms

总体来说，图片明显要比文本的资源消耗量大，目前的图片仅仅只有3个，如果一篇文章的有很多图片，而且没有对图片做处理，必定会对用户的体验造成影响。想想，我想看个新闻给我卡半天，我看个鸡儿。所以，不管是使用vue还是使用原生或者使用angular、react，性能都是关键。h5的优化方式有很多，强大的h5必定征服全宇宙。 ——史蒂芬豪仔

大家好，我是菜鸡豪，文章分析有什么不对的地方欢迎给我指出来啊，顺带也指点指点

最近看了一篇比较好的帖子，推荐给大家：
我们是如何将网站加载时间减少24%的？
URL: https://mp.weixin.qq.com/s/RH5lU9OJEC2VaVR82W7S2g