- 这是我参与青训营笔记创作活动的第二天，学习青训营课程的第二篇笔记！这节课主要讲述了浏览器进程架构，渲染进程，Chrome的运行原理，跨端容器等。
一、浏览器架构
1.浏览器架构演进
单进程架构：所有模块都运行在一个进程里，包含网络、插件、javascript运行环境等
多进程架构：主进程、网络进程、GUI进程、渲染进程、插件进程。
面向服务架构：将原来的UI，数据库，文件、设备、网络等。作为一个独立的基础服务。
2.浏览器架构对比
3.问题
单进程产生的原因？
早期内存成本及技术的限制，现在的内存都很大。
面向服务架构是否会替代多进程架构？
会替代，面向服务在适合他的场景下为面向服务架构，如果不适合自动退化为多进程架构。
二、渲染进程
1.常见的浏览器内核
多进程的工作流程
补充：事件循环机制
js是单线程机制，代码块分为同步代码和异步代码，首先会执行同步代码，其次执行异步代码，同步代码在执行栈中处理，异步代码在宿主环境（浏览器）中等待处理，这样不会阻塞进程，异步代码等待时机放入任务队列中等待执行，当执行栈中同步任务处理完成，会从当前任务队列中按照顺序讲任务放到执行栈中执行，这个循环查询任务队列是否有任务执行的过程被称之为时间循环。JS把异步任务分为宏任务和微任务，常见的宏任务包括定时器/await，常见的微任务包括promise（本身是同步任务里面的then，catch是微任务），首先执行同步任务，其次执行微任务，将微任务放到微任务队列中，最后执行宏任务队列中的宏任务。
三、Chrome的运行原理
1.浏览器输入了URL后发生了什么？
开始导航
读取响应
寻找渲染进程
资源加载
构建渲染树
页面布局
页面绘制
2.性能优化
1.首屏优化
缓存可以采用session，localstorage sesssionstorage
2.渲染优化
懒加载
在视窗未到达图片前，将图片路径存放在自定义属性data-xxx中，判断视窗，当视窗到达图片位置，将data-xxx属性中的图片地址复制给img的src属性，显示出图片。
懒加载与预加载的区别
- 这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
- 懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。
- 预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 s 中的 image 对象，通过为image 对象来设置 scr 属性，来实现图片的预加载。
3.js优化
节流防抖区别
- 防抖：防止多次提交，只会提交最后一次。应用：input 输入查询搜索、scroll 滚动、表单验证、按钮提交。
- 节流：规定时间内，多次调用也只会执行一次。dom 拖拽功能的实现、计算鼠标移动的距离、监听scroll滚动。 - 相同点：
- 都可以通过使用 setTimeout 实现
- 目的都是，降低回调执行频率。节省计算资源 - 不同点：
- 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
- 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
四、跨端容器
跨端开发是指使用一种技术或方案来开发能够在多个平台（如iOS、Android和Web）上运行的应用程序。使用跨端开发可以帮助降低成本和提高开发效率。开发者只需编写一份代码，就可以在多个平台上运行.
跨端方案对比
课程总结
