浏览器工作

页面呈现流程

1. 浏览器加载html文档生成dom tree
2. 浏览器加载css文件生成样式结构体
3. dom tree + css 生成render tree, 有了render tree即可渲染页面

回流&重绘

1. 页面发生改变，这些改变会导致页面的布局和展示发生改变，那么render tree需要重构，称之回流

2. 页面发生改变，但是这些改变不会影响布局，比如颜色的改变，那么render tree不需要重构，浏览器会直接重绘页面

3. 回流之后一定会发生页面重绘， 但是重绘不一定会有回流。回流的代价更高、

4. 页面的改变会被浏览器通过队列保存，以一定的间隔批处理， 当JS代码查询文档宽高信息时，会强制队列操作立马执行

提升为合成层来优化动画

1. 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
2. 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
3. will-change: transform

HTML5新特性

语义化标签

1. 新增诸多如：<nav> <acticle> <section> <footer>等标签
2. 结构更加清晰；方便seo识别页面结构
3. 表单功能增强，新增更多type类型, input-datalist
4. viedo audio的增加
5. canvas画布功能
6. 拖拽(上传文件，更改布局)
7. web-worker
8. storage(session, local)

9. cahce

   缓存

10. 强制缓存
    1. 强制缓存通过cache-control 和 expire字段实现， expire 是http1.0的内容，现在进本通过cache-control实现
    2. cache-control: max-age=xxx 缓存存活多少秒
11. 协商缓存-向服务器验证有效性
    1. Last-Modified
       1. 客户端首次发起请求时，服务器相应资源并且返回资源的Last-Modified表示最后修改日期
       2. 客户端再次发起请求时在If-Modify-Since带上最后修改日期，服务器判断请求的文件是否发生修改，如无，返回304，否则返回200
    2. Etag
       1. 客户端首次发起请求时，基于文件摘要算法，在Header中返回资源的hash值
       2. 客户端再次发起请求时在Header中带上hash，服务器判断请求的文件是否发生修改，如无，返回304，否则返回200
12. 缓存方案
    1. HTML使用协商缓存， JS / CSS / 静态资源使用强制缓存，文件名称带上hash值，最好是contenthash