常见浏览器内核

内核	浏览器
Trident	IE4-11
Gecko	Firefox
Webkit	Safari、Chrome、Android浏览器
Blink	Chrome、OPera
Edge	Edge
Trident+Webkit	QQ、360、UC等

Chrome运行原理-如何展示网页

浏览器地址输入URL后发生了什么？

输入处理

• 用户URL框输入内容后，ui线程会判断输入的是一个url地址，还是一个query查询条件
• 如果url，直接请求站点资源
• 如果是query，将输入发送给搜索引擎

开始导航

• 当用户按下回车，ui线程通知网络线程发起了一个网络请求，来获取站点内容
• 请求过程中，tab处于loading状态

读取响应

• 网络线程接收到HTTP响应后，先检查响应头的媒体类型（MIMEType）
• 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
• 如果拿到的是其他类型文件，例如：ZIP、exe等，则交给下载管理器处理

寻找渲染进程

• 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
• 主进程通过ipc消息告知渲染进程会处理本地导航
• 渲染进程开始接受数据并告知主进程自己开始处理，导航结束，进入文档加载阶段

资源加载

• 收到主进程的消息后，开始加载HTML文档
• 除此之外，还需要加载子资源，例如:一些图片，css样式文件以及JavaScript脚本

构建渲染树

• 构建DOM树，将HTML文本转化成浏览器能理解的结构
• 构建CSSOM数，浏览器同样不认识css，需要将CSS代码转化为可理解的CSSOM
• 构建渲染树：DOM树和CSSOM树的结合

页面布局

• 根据渲染树计算每个节点的位置和大小
• 在浏览器页面区域绘制元素边框
• 将元素以盒模型的形式写入文件流

页面绘制

• 构建图层：为特定的节点生成专用图层
• 绘制图层
• 生成图块
• 栅格化
• 展示在屏幕上

首屏优化

• 压缩、分包
• 无用代码
• 静态资源分离
• js脚本非阻塞加载
• 缓存策略
• SSR
• 预置loading、骨架屏

渲染优化

• GPU加速
• 减少回流、重绘
• 离屏渲染（开闭一般内存，在内存中渲染，其他好了之后再把它加进去）
• 懒加载（将所需资源提前缓存至本地）

JS优化

• 防止内存泄漏
• 循环尽早break
• 合理使用闭包
• 减少Dom访问
• 防抖、节流
• Web Workers

跨端容器

• WebView
• 小程序
• React
• Lynx
• Flutter
• Weex

html+css小总结

HTTP-->构建Don树-->计算CSS树-->排版-->渲染合成-->绘制