加载----编译解析----执行
1.code splitting代码拆分，按需加载 2.tree shaking代码减重（webpack自动进行） 3.避免超过1kb的行间脚本
第一阶段：First paint 第一个内容呈现出来了，用户感觉到自己已经成功访问到了这个网站 第二阶段：First meadingful paint 第一个有用的内容呈现出来了，用户感受到能在这个网站上获取有用的信息 第三阶段：Time to interactive 用户可以进行交互
分词／词法分析： 这个过程会将字符串分割为有意义的代码块，这些代码块称之为词法单元。例如变量的声明： var a = 2; 这行代码会被分为以下词法单元：var、a、=、2(空格算不算词法单元取决于空格对于该编程语言是否具有意义)；这些零散的词法单元会组成一个词法单元流（数组）进行解析。
解析／与法分析： 这个过程会将词法单元流转换成一棵抽象语法树(Abstract Syntax Tree，AST）在线解析工具。 "var a = 2;"的词法单元流就会被解析为下面的AST： var a = 2;对应的AST
代码生成： 将AST转化为可执行的代码。
1.减少iframes使用
2.压缩空白符
3.避免节点深层级嵌套
4.避免table布局（开销大，维护麻烦）
5.删除注释
6.CSS&JS尽量外链（导致html过大，不好优化）CSS放在头部 JS放在body底部
7.删除元素默认属性
在很久之前对元素定义样式的时候 我们都建议定义一个单一的样式类来表示该元素，如上面的第一行 而不要使用 伪类 等各种选择器 来确定元素 因为我们都知道CSS选择器解析 从右到左进行的，读取到a的时候，会获取所有的a，然后根据nth-last-child（1）>这个条件进行过滤，得到满足条件的a ，然后再往左走根据.list这个条件过滤，得到最终的结果a
但是最新的浏览器的研究表明，两者性能相差并不大，可以说是完全一样，不是影响性能的主要因素
主要有三个方面 降低css的大小 还有就是提前对css文件进行下载 还有就是对首屏展示有关的css先加载，无关的进行延迟加载
（transform等之前讲过不会进行布局和重绘，会单独在一层，GPU直接进行干预）
使用例子如下 为什么要使用这个contain属性呢
就比如 一个ul 有多个li 实现一个新闻列表 当我们对第一个li插入一个新东西，浏览器并不知道这个操作会不会影响其他元素的布局，这时候浏览器会对其他元素进行重新的位置等方面的计算，这时候开销很大。但是我们开发者肯定这个操作不会对其他元素造成影响。
此时我们就可以利用contain：layout，与浏览器进行沟通。告诉浏览器我这个盒子的布局与外部没有任何关系。里面怎么变化不会影响到外面，同时外面怎么变化不会影响到里面。
这样浏览器就清楚了，会单独处理操作的元素，而不会对其他元素进行处理，减低了很大一部分开销。
会让字体更快的展现（具体后面会说）
