1 浏览器架构

（1）单进程架构：以前使用的（因成本问题发明），扩展性、安全性、稳定性、流畅度低
（2）多进程架构：现在常用的，扩展性中等，耦合度高
（3）面向服务架构：未来可能的发展趋势，比多进程架构扩展性更高，耦合性低

2 渲染进程

2.1 浏览器内核（括号内为js引擎）

IE4-11：Trident（JScript、Chakra）
Firefox：Gecko（SpiderMonkey）
Safari、Chrome、Android浏览器：Webkit（JavaScriptCore）
Chrome、Opera：Blink（V8）
Edge：Edge（Chakra）
国产浏览器：Trident+Webkit双核（都有），使用银行系统时用Trident，体验时用Webkit

2.2 多线程架构的线程及其工作流程

2.2.1 多线程架构的线程

 JS引擎（负责js）、网络线程（XHR、Fetch）、GUI渲染线程（负责html、css、dom树等）、定时器触发线程、事件触发线程
 JS引擎和GUI渲染互斥。

2.2.2 多线程架构的工作流程

（1）网络线程负责加载网页资源
（2）JS引擎解析JS脚本并执行
（3）JS解析引擎空闲时，渲染线程立即工作
（4）用户交互、定时器操作等产生回调函数放入任务队列中
（5）事件线程进行事件循环，将队列里的任务取出交给JS引擎执行

2.3 思考题

以下代码在浏览器环境下输出顺序、内容：

2.3.1 个人分析

计时器属于回调函数，因此首先执行循环里的内容，直到时间轴为20s时break，此时执行：
`console.log(Date.now() - now)`，此时因为第一个计时器时间为10s已经满足条件，因此马上回调第一个计时器。
时间轴为30s时回调第二个计时器。

2.3.2 解题答案

20
time10
time30

3 Chrome运行原理

3.1 Chrome运行原理

3.1.1 如何展示网页

3.1.2 输入原理

url框输入内容后，判断：
（1）URL地址：直接请求站点资源
（2）query：将输入发送给搜索引擎

3.1.3 开始导航

3.1.4 读取响应

网络线程收到HTTP响应检查响应头媒体类型：
（1）HTML文件：渲染进程处理
（2）其他类型：下载管理器处理

3.1.5 寻找渲染进程

3.2 渲染进程

3.2.1 资源加载

加载HTML、子资源（图片、CSS样式文件、JS脚本）

3.2.2 构建渲染树

DOM树、CSSOM树、渲染树

3.2.3 页面布局

3.2.4 页面绘制

构建图层、绘制图层（将指令按顺序组成一个绘制列表）、合成线程接收并生成图块、栅格线程将图块栅格化、显示

3.3 优化

3.3.1 首屏优化

1.压缩、分包、删除无用代码
2.静态资源分离
3.JS脚本非阻塞加载
4.缓存策略
5.SSR
6.预置loading、骨架屏

3.3.2 渲染优化

1.GPU加速
2.减少回流、重绘
（1）少使用、尽量不使用table
3.离屏渲染
（1）先开辟一段缓冲区（内存），要渲染的东西先放在这段内存缓冲好了，再直接添加到显示器上，动画会更顺畅
4.懒加载
（1）将所需资源提前加载到本地

3.3.3 JS优化

1.防止内存泄漏
（1）使用全局变量时需注意使用
（2）Dom被复制成了JS变量，当DOM被删除后，JS变量还没有被清空。这样造成了DOM引用一直存在的情况，十分占内存
（3）忘记清除定时器。尽量自己封装一个自动清除的定时器
（4）使用闭包时需注意使用
2.循环尽早break
3.合理使用闭包
（1）可以减少元素的创建
4.减少Dom访问
（1）JS引擎和渲染引擎交互非常费时间
（2）可以使用classname，只用访问一次
5.防抖、节流
（1）防抖：多次提交只执行最后一次
（2）节流：保证规定时间内，多次调用只执行一次
（3）使用地方：窗口reset、流动、DOM拖拽、手指在移动端拖拽
6.Web Workers
（1）可以用于图片、视频和音频处理

4 跨端容器

使用原因：开发成本低、效率高；一致性体验；前端开发生态
分类：Webview、小程序、RN/WeeX、Lynx、Flutter

4.1 Webview（网页视图）

4.1.1 简介

用于加载网页url，功能类似浏览器渲染线程
常用分类：Android,IOS、国产Android

4.1.2 优势

学习成本低、随时发布即时更新、性能保障、经过JSBridge与原生系统交互能实现复杂功能

4.2 小程序

image (2).png 渲染层：Webview；双线程，多webview架构；数据通信，Native转发

4.3 思考

1.同样是基于webview渲染，为什么小程序体验比webview流畅？
2.未来的跨端方案会是什么？
个人思考
1.小程序会预载资源并且保存到本地，这样再次进入时就不需要再次加载。并且小程序底层是基于Webview实现，并且进行了优化和规避。
2.Webview仍然使用范围最广

5 总结和感想

老师干货很多，课程中有些时候我甚至需要0.75倍速观看，从基础讲起，串讲了架构、渲染进程、浏览器运行原理和跨端方面的知识。
理解多线程架构的流程在页面的编写至关重要，特别是回调函数和页面其他代码在任务队列中的执行顺序——在例题中，定时器只有在页面其他代码全部执行完后，才会去执行，这是因为js是单线程执行的。由此可见，定时器并不能真的保证所谓的定时执行（例题中的time10是在第20s才输出的）。
在完成页面的同时，也要注意优化方面的问题，方方面面都有可能对网页运行造成影响，需要多学多看，细心多思考，增删查改是常态。“代码写完了”并不是页面完成的终点！

客户端容器 ｜ 青训营笔记