• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

浏览器响应用户的机制是什么_CSS学习

当前位置：网站建设 > 技术支持

浏览器响应用户的机制是什么？

1. 浏览器是多进程的

GPU进程

最多一个，用于3D绘制等

Browser进程

负责浏览器界面显示，与用户交互。如前进，后退等

负责各个页面的管理，创建和销毁其他进程

将Renderer进程得到的内存中的Bitmap，绘制到用户界面上

网络资源的管理，下载等

第三方插件进程

每种类型的插件对应一个进程，仅当使用该插件时才创建

浏览器渲染进程（浏览器内核）

默认每个tab页一个进程

页面渲染，脚本执行，事件处理等

2. 浏览器渲染进程是多线程的

GUI渲染线程

负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。

当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

js引擎线程

也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）

JS引擎线程负责解析Javascript脚本，运行代码。

JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行

同样注意，GUI渲染线程与JS引擎线程是互斥的。所以如果JS执行的时间过长，要放在body下面，否则就会导致页面渲染加载阻塞。

事件触发线程

管理着事件队列

监听事件，符合条件时把回调函数放入事件队列中

定时触发器线程

setInterval与setTimeout在此线程中计时完毕后，把回调函数放入事件队列中

浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确），因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）

注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

异步http请求线程

检测到XHR对象状态变化时，将回调函数放入事件队列中

event loop整体流程

3. repaint、reflow

repaint

repiant或者redraw遍历所有的节点检测各节点的可见性、颜色、轮廓等可见的样式属性，然后根据检测的结果更新页面的响应部分。

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘

reflow

reflow指的是计算页面布局。某个节点reflow时会重新计算节点的尺寸和位置，而且还有可能触发其子节点、祖先节点和页面上的其他节点reflow。在这之后再触发一次repaint。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流,每个页面至少需要一次回流，就是在页面第一次加载的时候。

导致reflow的操作

调整窗口大小

改变字体

增加或者移除样式表

内容变化，比如用户在input框中输入文字

激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)

操作 class 属性

脚本操作 DOM

计算 offsetWidth 和 offsetHeight 属性

设置 style 属性的值

它们会大大影响web性能，如何减少reflow、repaint

不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

尽量通过class来设计元素样式，切忌用style多次操作单个属性

实现元素的动画，对于经常要进行回流的组件，要抽离出来，它的position属性应当设为fixed或absolute

权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，

这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。

css里不要有表达式expression

减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。

避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。

尽量不要过多的频繁的去增加，修改，删除元素，因为这可能会频繁的导致页面reflow，可以先把该dom节点抽离到内存中进行复杂的操作然后再display到页面上。

请求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，浏览器会发生reflow，建议将他们合并到一起操作，可以减少回流的次数。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。