[TOC]
首先都听说过一道经典的面试题：从在浏览器中输入url到页面呈现，这中间都发生了什么？
- HTTP请求阶段
- HTTP响应阶段
- 浏览器渲染阶段
相关概念
GPU
显卡处理器称为图形处理器(即 GPU)，它是显卡的“心脏”，与CPU类似，只不过GPU是专门为执行复杂的数学和几何计算而设计的，这些计算是图形渲染所必需的。一些最快速的GPU集成的晶体管数甚至超过了普通CPU。
进程(Process)和线程(Thread)
每打开一个应用程序就相当于开启了一个进程，在一个进程中可以同时做好多事情，每一件事情又可以称为一个线程。简单来说，进程就是一个应用程序，线程是干活的。
// 声明文档类型为html
// DOCTYPE就是document type
<!DOCTYPE html>
1
2
3
2
3
需要注意：js是单线程的，浏览器是多线程的。
GPU(显卡)-用来绘制页面
浏览器渲染机制和原理
- 解析HTML生成DOM树，解析CSS生成CSSOM树
- 将DOM树和CSSOM树结合，生成渲染树(render Tree)
- Layout(回流)：根据生成的渲染树，计算它们在设备视口(viewport)中的确切位置和大小，这个计算阶段就是回流
- Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
- Display：将像素发送给GPU，展示在页面上。
需要注意：浏览器第一次渲染，回流肯定在重绘之前。回流一定会导致重绘，重绘不一定导致回流。
性能优化
- 减少http请求次数和大小
- 资源合并压缩(雪碧图)
- 图片懒加载
- 音视频走流文件(m3u8)
- DNS缓存
- 304缓存
- 尽量的避免重绘和回流