浏览器框架
单进程架构→多进程架构→面向服务架构
-
单进程架构：所有模块运行在同一个进程里（受以前的内存资源限制）
-
多进程架构：
- 运行在独立沙箱中，安全性高
- 每个页面运行在独立的渲染进程中，流畅度高
- 进程之间相互隔离，一个页面或插件崩溃不会影响其他进程，稳定性高
- 但有些进程功能较大，耦合度高
- 面向服务架构：在多进程架构基础上，将UI、数据库、文件、设备、网络等作为一个独立的基础服务，服务模块划分更细，耦合性低，扩展性高
多线程工作流程
- 网络线程加载网页资源
- JS引擎执解析JS脚本并执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列
- 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
浏览器地址输入URL之后发生了什么
浏览器主进程：
-
输入处理：UI线程判断用户URL框中输入类型：
- URL地址：请求站点资源
- query查询 ：发送给搜索引擎
-
开始导航：UI线程通知网络线程发起网络请求
-
读取响应：网络进程接收到HTTP响应后先检查响应头的媒体类型（MIME type）
- 响应主体是HTML文件，则交给渲染进程处理
- 其他类型文件如Zip、exe，则交给下载管理器
-
寻找渲染进程 网络线程完成检查后告知主进程，主进程确认后为站点寻找渲染进程
- 主进程通过IPC消息告知渲染进程处理本次导航
- 渲染进程接收数据并告知主进程已开始处理，导航结束，进入文档加载阶段
渲染进程
-
资源加载：HTML文档以及子资源如图片、CSS样式文件、JS脚本
-
构建渲染树： 构建DOM树 构建CSSOM树 构建渲染树
-
页面布局：
- 根据渲染树计算每个节点的位置和大小
- 在浏览器页面边缘绘制元素边框
- 遍历渲染树，将元素以盒模型的形式写入文档流
-
页面绘制：构建图层、绘制图层、生成图块、栅格化、展示
性能优化
首屏优化
-
压缩、删除无用代码；分包
-
静态资源分离：部署在CDN上
CDN：全称内容分发网络（Content Delivery Network），能够缓存网站资源来提升首次资源请求的响应速度，往往仅被用来存放静态资源文件
静态文件资源：不需要网站业务服务器参与计算即可得到的资源，包括第三方库的JS脚本、样式表文件及图片等
-
JS脚本非阻塞加载：JS脚本放在body底部
-
缓存策略：通过打包工具生成contenthash
-
SSR：服务器端渲染
-
预置loading、骨架屏
渲染优化
-
GPU加速：
-
减少回流、重绘：
-
display：none 会影响DOM结构，导致回流，可以用visibility替代
-
不使用table布局
-
-
离屏渲染：开辟一段内存，在内存中渲染好后再呈现在页面
-
懒加载：将所需要的资源提前加载到本地，从缓存中取
JS优化
- 防止内存泄漏 全局变量 严格模式 定时器 DOM 及时清除
- 及时跳出循环
- 合理使用闭包
- 减少DOM访问：JS引擎和渲染引擎耗时久 用变量缓存
- 防抖 节流
- Web Worker：同JS引擎相独立，图片、视频、音频处理
总结
本节课对于前端中的薄弱环节进行了学习，对于浏览器的工作原理以及性能优化有了进一步的认识，但是课程时间毕竟只有1小时，还有很多内容没有涉及或者比较笼统，我也进一步查阅资料；对于我的课程总结，也请各位同学或前辈批评指正！
