1、我对客户端容器的理解是:客户端容器是一个执行渲染代码,然后把各种界面显示给用户,同时满足一些交互操作的工具。常见的客户端容器是浏览器。
浏览器的架构随着技术发展分别有这三种:单进程、多进程、面向服务架构。浏览器架构中较为重要的是多进程架构。
2、浏览器的多进程架构有以下优点:
- 稳定:进程之间是隔离的,它们通过“进程间通信”机制来通信。页面或进程崩溃不会影响其他页面或主进程。
- 流畅:一个页面就是一个进程,关闭某个页面,它对应的进程也会被关闭,内存泄漏也不存在了。JavaScript运行在渲染进程中只会阻塞当前页面。
- 安全:插件进程和渲染进程被锁进沙箱,进程锁导致即使存在恶意插件,它也无法突破沙箱获取系统权限。
3、渲染进程的多线程架构在浏览器的流畅访问中十分重要。渲染主要有以下步骤:
渲染进程有以下多线程:
- GUI渲染线程:解析HTML文档,构建DOM树,解析CSS文件,构建CSSOM,合并构成渲染树,并计算布局样式,绘制在页面上。
- JS引擎线程:负责执行JavaScript脚本程序。由于JavaScript是单线程,依靠任务队列执行JS代码。
- 事件触发线程:归属于渲染进程,不受JS引擎线程控制,主要用于控制事件,例如鼠标键盘,当该事件被触发,事件触发线程会把该事件的处理函数添加到任务队列中,等待JS引擎空闲后执行。
- 定时器触发线程:setInterval和setTimeout线程所在的线程。线程的定时器不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,会发生阻塞,处于阻塞状态会影响计时的准确性,要通过单独的线程计时并触发定时器,计时完毕后,满足触发器条件,则将定时器的处理函数添加进任务队列中,等待JS引擎空闲后执行。
- 异步HTTP请求线程:当HTTPRequest连接后,浏览器会新开一个线程,当监控到readState状态变更时,如果设置了该状态的回调函数,则该状态的处理函数推进任务队列中,等待JS引擎空闲后执行。
Chrome渲染进程任务
Chrome渲染进程任务包括
- 主线程
- 工作线程
- 排版线程
- 光栅线程
4、前端性能优化可以从这些方面入手:
- 首屏优化
- 资源缓存并发
- 重绘重排
- GPU加速
- worker计算
- 空闲帧
5、跨段容器用的比较广泛的是webview
webview可以在桌面端和移动端由相同的显示效果,并且开发过程差别不大,学习成本低。