浏览器工作原理分为以下几部分:
- 分析浏览器份额,种类,理解浏览器是多进程还是多线程的,有哪些常驻进程和常驻线程,如何相互配合
- 浏览器内核的工作原理,渲染线程和事件队列以及JS单线程的工作原理。
ps:动画不连贯,因为浏览器渲染有一个最小时间间隔(这块之前搜藏了)
涉及如下部分:
- 进程和线程,单核与多核
进程与线程,单核与多核 - 浏览器有哪些进程和线程,他们之间的关系,打开浏览器时的调度顺序是怎样的
- 异步机制与事件队列,宏任务与微任务,worker,setTimeout不准的原因
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
ps:click会导致微任务立马执行? - js与gui渲染的互斥,此时如果有用户点击上下拉等操作,页面的效果是如何,比如下拉时js在执行大量计算,视图是先更新还是先执行大量计算
- css和js资源加载的互阻塞
- 浏览器的渲染机制,代码变成页面上的视图经历了哪些?(看google大神的ppt)
7.重绘与重排,如果dom数据很多,是否可以利用hidden或者wx-if来减少需要渲染的数据量,此时性能是否会好些?-长列表的优化
ps:需要考虑直接回到顶部的情况,另外如果只是应对列表的增加,原始渲染部分的内容不变,是否可以利用wx:key或者新开图层的方法来渲染
参考
从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
浏览器加载解析渲染机制的全面解析
主流浏览器多进程架构对比以及检测方法
浏览器内核常驻线程
主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)
浏览器多线程和js单线程(转)
为什么浏览器会使用多进程架构
浏览器内核、页面呈现原理及其优化
通过QQ浏览器内核看browser性能优化
百度百科-浏览器内核
浏览器工作原理详解
chrome浏览器页面渲染工作原理浅析
浏览器工作原理-webkit内核研究
JavaScript 运行机制详解:再谈Event Loop
JavaScript:彻底理解同步、异步和事件循环(Event Loop)
并发模型与Event Loop
JavaScript EventLoop
深入理解nodejs Event loop
简单总结下JS中EventLoop事件循环机制
这一次,彻底弄懂 JavaScript 执行机制
浏览器的工作原理:新式网络浏览器幕后揭秘
浏览器是如何工作的?(工作原理)
【前端优化之渲染优化】大屏android手机动画丢帧的背后