渲染优化
- 浏览器的渲染过程
首先。我们在讲渲染优化之前我们要先知道，浏览器的渲染过程是分为五步进行 第一步先是JS代码控制样式，第二步CSS样式表渲染CSS树。第三步Layout布局形成DOM树，第四步开始绘制，最后一步将两者合称为Render Tree
// JavaScript -> Style -> Layout -> Paint -> Compostite
这里最重要的就是Layout与Paint,此处涉及到回流与重绘的操作。
回流：添加、删除、改变DOM树的位置、大小从而引发的一系列重新渲染渲染,每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
两者关系:回流必将引起重绘，而重绘不一定会引起回流。
// 触发回流的操作
1.添加、删除元素
2.移动元素位置
3.display：none
4.改变浏览器大小、字体大小
5.操作styles
6.offsetLeft、offsetRight、offsetTop、clientWidth
// 解决方案
1.尽量避免回流
2.读写分离
3.fastDom 插件库
4.创建 documentFragment 对象
相关的渲染优化的原理可以去了解浏览器的复合线程
代码及webpack插件优化
- V8引擎 在进一步了解代码及webpack插件优化之前我们先要知道什么是javascript引擎、V8引擎。简单来说，CPU并不认识我们的js代码，而不同的CPU只认识自己对应的指令集，javascript引擎将js代码编译成CPU认识的指令集，当然除了编译之外还要负责执行以及内存的管理。 随着技术的发展，对JavaScript性能的要求越来越高，这就更快速的解析和执行JavaScript代码，V8引擎就是在此背景下产生的，它产生的目的就是为了提高性能。 运行流程如下图：
- 代码层面优化
//防抖函数
const throttle = (fn, time) => {
let flag = true;
return function() {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, time);
}
}
//节流函数
const throttle = (fn, time) => {
let flag = true;
return function() {
if (!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this, arguments);
flag = true;
}, time);
}
}
- webpack 优化
- 多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码
- 通过 externals 配置来提取常⽤库
- 利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。
- 使⽤ Happypack 实现多线程加速编译
- 使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
- 使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
