前端性能优化（三）代码优化

一.JS开销和如何缩短解析时间

1.开销在哪里

加载----编译解析----执行

2.如何缩短解析时间

1.code splitting代码拆分，按需加载
2.tree shaking代码减重（webpack自动进行）
3.避免超过1kb的行间脚本

3.最后我们说一下题外话 用户体验的三个阶段

第一阶段：First paint 第一个内容呈现出来了，用户感觉到自己已经成功访问到了这个网站
第二阶段：First meadingful paint 第一个有用的内容呈现出来了，用户感受到能在这个网站上获取有用的信息
第三阶段：Time to interactive 用户可以进行交互

二.V8编译原理

1. 分词／词法分析：
   这个过程会将字符串分割为有意义的代码块，这些代码块称之为词法单元。例如变量的声明：
   var a = 2;
   这行代码会被分为以下词法单元：var、a、=、2(空格算不算词法单元取决于空格对于该编程语言是否具有意义)；这些零散的词法单元会组成一个词法单元流（数组）进行解析。

2. 解析／与法分析：
   这个过程会将词法单元流转换成一棵抽象语法树(Abstract Syntax Tree，AST）在线解析工具。
   "var a = 2;"的词法单元流就会被解析为下面的AST：
   var a = 2;对应的AST
   

3. 代码生成：
   将AST转化为可执行的代码。

三.HTML优化

1.减少iframes使用

2.压缩空白符

3.避免节点深层级嵌套

4.避免table布局（开销大，维护麻烦）

5.删除注释

6.CSS&JS尽量外链（导致html过大，不好优化）CSS放在头部 JS放在body底部

7.删除元素默认属性

四.CSS代码方面的优化

1.有关选择器

在很久之前对元素定义样式的时候

我们都建议定义一个单一的样式类来表示该元素，如上面的第一行
而不要使用 伪类 等各种选择器 来确定元素
因为我们都知道CSS选择器解析 从右到左进行的，读取到a的时候，会获取所有的a，然后根据nth-last-child（1）>这个条件进行过滤，得到满足条件的a ，然后再往左走根据.list这个条件过滤，得到最终的结果a

但是最新的浏览器的研究表明，两者性能相差并不大，可以说是完全一样，不是影响性能的主要因素

2.降低CSS对渲染的阻塞

主要有三个方面
降低css的大小
还有就是提前对css文件进行下载
还有就是对首屏展示有关的css先加载，无关的进行延迟加载

3.利用GPU进行完成动画

（transform等之前讲过不会进行布局和重绘，会单独在一层，GPU直接进行干预）

4.使用contain属性

使用例子如下

为什么要使用这个contain属性呢

就比如 一个ul 有多个li 实现一个新闻列表
当我们对第一个li插入一个新东西，浏览器并不知道这个操作会不会影响其他元素的布局，这时候浏览器会对其他元素进行重新的位置等方面的计算，这时候开销很大。但是我们开发者肯定这个操作不会对其他元素造成影响。

此时我们就可以利用contain：layout，与浏览器进行沟通。告诉浏览器我这个盒子的布局与外部没有任何关系。里面怎么变化不会影响到外面，同时外面怎么变化不会影响到里面。

这样浏览器就清楚了，会单独处理操作的元素，而不会对其他元素进行处理，减低了很大一部分开销。

5.font-display（较新的一种方式）

会让字体更快的展现（具体后面会说）