编辑代码

页面启动的过程
为什么H5页面的启动时间长？尤其是SPA应用？
从用户点击到页面渲染完成，大体上经历了一下过程：
初始化webview => 请求html => 解析html => 请求css和js => 渲染 => 解析和执行js => 请求数据 => 渲染 => 下载图片 => 渲染 => 页面显示可交互
常规SPA应用中，通常在请求完并且执行js时，才会出现loading之类的画面，而在这之前都是白屏，用户体验就很差，尤其是网络慢的时候。那么怎么才能进行优化呢？




// 代码
1、css多用继承关系，避免重复定义，避免使用通配符
2、图片懒加载（优化可图片预处理，在内存中进行提前加载---new Image().src形式），骨架屏
3、长列表使用虚拟列表（padding撑高）
4、节流防抖避免多http请求
5、搭配webpack压缩合并静态资源，同时开启gzip
6、路由懒加载
7、tree shaking
8、按需加载


// 图片懒加载优化形式
const imgList = [
"https://p6-passport.byteacctimg.com/img/user-avatar/fa2e0968fe519340b42fd210e696214c~300x300.image"
];
let count = 0;
imgList.forEach((img) => {
  let image = new Image();
  image.src = img;
  img.onload = () => {
    count++;
    if(count === imgList.length) console.log('所有图片都预加载完成');
  }
}

// 网络
1、CDN优化
2、http2
3、

// 缓存
1、不长更新的列表进行本地缓存
2、