浏览器缓存（协议层的缓存）

主要分为强缓存和协商缓存，详情 https://segmentfault.com/a/1190000011212929

  1. 强缓存
    浏览器会先获取该资源缓存的header信息，根据其中的Expires和Cahe-control判断是否命中强缓存，若命中则直接从缓存中获取资源

  2. 协商缓存
    如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/IF-Modified-Since、Etag/IF-None-Match）,由服务器根据请求中的相关header信息来对比结果是否命中协商缓存，若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容

reflow(重排)和repaint(重绘)

reflow & repaint
https://www.jianshu.com/p/40c6fc1d4800
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

浏览器解析网页的过程

  1. HTML代码转化成DOM
  2. CSS代码转化成CSSOM（CSS Object Model）
  3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
  4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
  5. 将布局绘制（paint）在屏幕上

重排与重绘

  • 重排：渲染树的结点发生了结构性变化，例如宽度、高度或者位置上的变化时，那么会触发reflow(重排)的逻辑。第一次进入一个页面时便会至少触发一次重排。

  • 重绘：渲染树结点发生了非结构性变化，例如背景色等的变化时，那么会触发repaint(重绘)。

AST（抽象语法树）

定义

抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上

应用

抽象语法树的作用非常的多，比如编译器、IDE、压缩优化代码等。在JavaScript中，虽然我们并不会常常与AST直接打交道，但却也会经常的涉及到它。例如使用UglifyJS来压缩代码，实际这背后就是在对JavaScript的抽象语法树进行操作，例如 Babel编译ES6的代码