首页加载慢总结

首页加载-图片过多

总结

懒加载

原理

小图标 iconfont

font-family属性

小图片雪碧图（精灵图）

1. background：url()
2. background-position

首页加载-资源和请求量

总结

Network 查看请求量

converge 查看代码使用情况

解决方案

合并静态资源->减少资源请求量

将多个JavaScript cs合并成一个

按需加载 | SPA应用 - 路由懒加载 ->减少资源请求量

减少首页JS/css的大小

首页加载-请求资源(js/css…)过大

总结

优化图片

总结

图片压缩

利用熊猫站无损压缩图片

熊猫站无损 压缩图片原理

熊猫站批量压缩

熊猫站提供了包可安装
npm install tinify

base64

base64写在代码里减少请求，但同时会增大体积所有大图不适合转64

url-loader图片策略配置

小图转base64，大图不转

webp格式图片

https://www.upyun.com/webp

webpack打包优化

总结

配置webpack打包

webpack在production环境下默认配置了

module.exports = {
  // 模式
  mode: 'production',
}

拆包后文件多是否矛盾?

打包策略

包分类

webpack打包分类配置

打包策略

webpack配置 commons是公共包

打包效果

查看打包后资源占用情况

1. npm install --save-dev webpack-bundle-analyzer

2. 配置

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   module.exports = {
   configureWebpack: {//自定义webpack配置
    plugins: [
      new BundleAnalyzerPlugin()
    ]
   },
   }

3. npm run build

结合网络缓存做优化

首页加载-CDN加速静态资源下载

CDN是一种解决方案，用Nginx服务器实现的。

总结

加速原理1

CDN服务器有多个节点可以选择离你最近的服务器，下载静态资源达到加速

加速原理2

http请求限制并发，通过CDN可以实现不同文件通过不同域名 端口请求，达到增加并发 一次性请求多个资源

运行阶段-DOM操作-十万条数据渲染

总结

操作dom卡顿原因

逐帧渲染实现加速

const total = 100000;
let ul = document.querySelector('ul');
//一次渲染一屏幕的量
const once = 20;
//全部渲染完需要次数
const loopCount = total / once;
//已经渲染次数
let countHasRender = 0;
//一次值渲染20次
function add() {
    //创建一个虚拟节点,不会触发渲染
    const fragment = document.createDocumentFragment();
    //循环20次
    for (let i = 0; i < once; i++) {
        const li = document.createElement('li');
        li.innerText = Math.floor(Math.random() * total);
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
    //渲染次数+1
    countHasRender += 1;
    loop();
}
function loop() {
    if (countHasRender < loopCount) { //loopCount:5000
        //requestAnimationFrame逐帧渲染
        //类似 setTimeout(add,16)
        //帧:一秒钟不放多少涨图片 越多越精细
        //1000/60=16 一秒钟/人体适应xx=60得出16
        window.requestAnimationFrame(add)
    }
}
loop();