![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
浏览器
赵自煜
只要爷不死,爷就能东山再起!
展开
-
Visual Studio Code简称vscode居然不是C++写的
Visual Studio Code 基于 Electron 开发。Electron 是一个基于 Chromium 的项目,可用于开发基于 Node.js 的本地应用程序。Visual Studio Code 使用 Blink 排版引擎渲染用户界面。路很长,不要盲目地迷信。开源一样创造奇迹!...原创 2021-10-28 13:59:25 · 722 阅读 · 0 评论 -
Safari浏览器对正则零宽断言使用出现白屏(H5内嵌小程序)
问题是如何发现:微信小程序内嵌H5的页面白屏(仅苹果手机),但是无法看到报错。故使用Safari浏览器打开,发现报错。// 正确但是不兼容的写法str = str.replace(/(?<=[1-9]\d{5}[1-9]\d{3} ((0[1-9])|(1[0-2])) ((0[1-9])|([1-2]\d)|(3[0-1]))\d{3})x/g, 'X');// 兼容的写法str = str.replace(/([1-9]\d{5}[1-9]\d{3} ((0[1-9])|(1[0-2]))原创 2021-05-12 18:04:12 · 1204 阅读 · 0 评论 -
macrotask与microtask
111原创 2020-12-24 15:40:05 · 84 阅读 · 0 评论 -
JS的运行机制——借助Event Loop来看它怎么运行
111转载 2021-01-12 11:22:43 · 65 阅读 · 0 评论 -
浏览器渲染流程——简单版
前置工作浏览器拿到url浏览器主进程开启一个下载线程然后进行Http请求,等待响应,获取内容将获取的内容通过RendererHost接口传递到Renderer渲染工作Renderer开始渲染(看图)a.解析HTML,建立DOM树b.解析CSS,建立Render树(将CSS代码解析成树形的数据结构,结合DOM树生成Render树)c.布局render树(Layout/reflow),负责各元素尺寸、位置的计算 此处渲染(render)结束d.绘制render树(p转载 2020-12-23 16:06:03 · 77 阅读 · 0 评论 -
普通图层和复合图层
渲染步骤中就提到了composite概念转载 2020-12-23 18:56:44 · 1022 阅读 · 0 评论 -
浏览器内核(渲染进程)——对前端最重要的
主要工作:页面渲染、脚本执行(js)、事件的循环(帮js干活的)主要线程(常驻线程):1.GUI渲染线程作用:渲染页面,解析HTML,CSS,创建DOM树和Render树,布局绘制等执行时机:界面Repaint,操作引发Reflow与JS引擎线程互斥,JS引擎线程执行时在队列中保存,等到JS引擎线程空闲时,会被立即执行。如果JS引擎线程执行时间过长,页面渲染就会收到阻塞。2.JS引擎线程(JS内核)作用:处理JavaScript脚本,解析JS为啥JS单线程:一个renderer进程中,转载 2020-12-23 14:27:57 · 193 阅读 · 0 评论 -
浏览器内核(Renderer Process)中线程间的关系
1.JS引擎线程和GUI线程互斥原因在于,JavaScript可以操作DOM,如果GUI正在渲染界面,而JS引擎对页面元素属性进行修改,就会出现界面丢失了JS引擎修改部分的情况(出现不可预期的结果)。故浏览器设置GUI Thread 和 JS Thread 不能同时工作,当JS Thread 执行时,GUI Thread被挂起(GUI更新保存在一个队列中,等JS Thread 空闲时被立即执行)。2.JS阻塞页面加载因 GUI Thread 和JS Thread 互斥的原因,尽量避免CPU密集型计算转载 2020-12-23 14:29:41 · 369 阅读 · 0 评论 -
Browser和Renderer之间的通信方式
1.用户请求→Browser Process2.Browser Process→(RendererHost接口)→Render Process3.Render内部 GUI Thread 收到请求,开始调度资源(可能需要Browser和GPU协助),JS Thread 可能会触发 Reflow4.Render Process 将渲染(render)的结果传给 Browser Process5.Browser Process开始绘制(paint)因为翻译的缘故,渲染和绘制被混淆。web页面展示给用户转载 2020-12-23 10:46:26 · 417 阅读 · 0 评论 -
浏览器有哪些进程及多进程的优势
进程定义:CPU资源分配的最小单位线程定义:CPU调度的最小单位浏览器是多进程的,每打开一个tab页就会生产一个新进程。Google浏览有优化机制,多个进程可能会被合并为一个浏览器五大进程(2和5可以有多个)1.Browser进程a.界面显示,用户交互b.页面管理:其他页面(进程)的创建与销毁c.Renderer进程中的内存中的Bitmap,绘制到用户界面d.网络资源的管理,如下载2.Renderer进程a.页面渲染b.脚本执行c.事件处理等,内部是多线程的3.GPU进转载 2020-12-23 09:44:06 · 493 阅读 · 0 评论