前端性能优化（慕课网笔记）-3-代码优化

一，基本概念

js资源耗时长，原因在于它不仅仅作为一个资源，需要加载，更因为它作为代码，需要被解析。
对于js文件的优化，主要考虑以下两点：

1，Code splitting 代码拆分，按需加载，也就是只加载当前页面需要的js,剩余的js按需加载
2，Tree shaking 代码减重，形象点说就是你去摇一棵树，那么它枯萎的叶子就会掉下来。比如说你加载了一个第三方库api.js，但是仅仅使用到了其中的一些封装的函数，而其他的没有使用到的就被“摇晃下去”，不参与打包。

另外，从js代码的解析和执行来看，可以优化的部分是：

1，避免长任务，因为你的任务越长，它占用你阻塞的时间就会越久。
2，使用RAF和RIC进行时间调度。
3，避免超过1kb的行间脚本。因为浏览器在解析的时候，是不会对行间脚本进行优化的。所以行间脚本越大，你解析所需要消耗的时间就会越长。

最后，提出一个渐进式启动的概念，就是用户打开的是首屏，为了让用户尽可能快地看到首屏地内容，就可以减少初次加载的资源量！就只是把首屏需要的资源加载过来就可以了！剩下的资源延迟加载。这样我们可以大大地提高首屏加载的速度。

二，V8引擎的编译原理

因为v8js引擎是做得非常好的，所以我们的node也是基于v8引擎的。

在代码优化的过程中，如果发现代码的优化不合适的时候，又会把刚刚执行的代码优化去除掉，也就是逆优化的过程！这样一来，反而会降低我们代码运行的效率。
所以我们在代码层面所做的优化是尽量满足v8引擎代码优化的条件，然后规避让它逆优化的一些代码。

三，函数优化

在v8引擎下，会默认对函数进行懒解析，也就是说，只有当我们这个函数在被调用的时候，才会进行函数体的解析。
也就是说，在不需要使用这个函数的时候，就不需要生成语法树，进一步说，就不需要在内存上分配函数的内存空间。这样的话，对我们的性能是一个极大的提升。
但是有些立即执行的函数，先是默认进行了懒解析，然后又发现它需要立即执行，于是再进行饥饿解析，这样反而会降低效率。
所以这时候，需要告诉浏览器，这函数是需要立即执行的，不要进行默认的懒解析，而是直接进行饥饿解析。
那怎么告诉浏览器呢？

但是，使用webpack这些工具对项目进行压缩打包的时候，会把（）去除掉。
为了把这个（）还原回来，可以使用Optimize.js工具来处理。但是webpack新版本已经把这个问题解决了。

四，对象优化

1，以相同顺序初始化对象成员。避免隐藏类的调整。

2，实例化之后避免添加新的属性

这样新添加的属性查找时是间接查找的，肯定没有class创建的直接查找来得快。

3，尽量使用Array代替array-like对象

例如我们对argument的类数组遍历是这样处理的：

但是这样处理不如在真实的数组上效率高。而转化为真实数组之后，再进行数组处理，效率更高。

4，避免读取超过数组的长度

这是一个越界的问题。造成会沿着原型链进行查找，从而造成不必要的额外开销。

5，避免元素类型的转换

五，HTML的优化

六，CSS样式的优化