浏览器工作原理学习笔记

时间: 2020-01-11阅读: 122标签: 浏览器

单进程问题

  • 不稳定,插件崩溃浏览器就崩溃
  • 不流畅,脚本执行会让页面卡顿,内存泄漏也会导致浏览器变慢
  • 不安全,恶意插件和恶意脚本容易获取系统权限作恶

多进程优点

  • 进程隔离,插件或者页面崩溃不会导致其他页面崩溃
  • 页面隔离,即使 JS 阻塞了渲染进程,影响到的也只是当前的渲染页面,而并不会影响浏览器和其他页面,其他页面的脚本是运行在它们自己的渲染进程中的,浏览器也可以正常使用。
  • 通过安全沙盒解决安全问题

五个常见进程

rel="noopener noreferrer"


浏览器渲染机制

  • DOM:渲染引擎解析 HTML 文档,构建 DOM Tree
  • Computed Style:解析对应的 CSS 样式信息,生成 document.styleSheets,计算 DOM 样式
  • 布局(reflow/layout):计算布局信息,生成布局树 LayoutTree
  • 分层(layer):对布局树进行分层。满足以下条件之一就会提升为单独图层:有层叠上下文属性,或者需要裁剪(超出/滚动)。
  • 绘制(repaint/paint):遍历渲染树,绘制每个节点,把每一个元素对应的盒变成位图。 



重排、重绘、合成

  • 重排(reflow):当渲染树中的部分因为元素的尺寸、布局、隐藏等改变而需要重新构建。触发条件:页面渲染初始化(无法避免)、添加或删除 DOM、DOM 位置或尺寸的改变、浏览器窗口尺寸的变化、填充内容的改变,比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变。
  • 重绘(repaint):改变元素外观所触发的行为,浏览器会根据元素的新属性重新绘制,省去了布局和分层阶段。比如,仅修改 DOM 元素的字体颜色。
  • 合成:既不改布局也不需要绘制,比如 CSS transform 动画,避开重排与重绘阶段,在非主线程上执行合成动画操作。
  • display: none; 会发生 reflow,而 visibility: hidden; 只会触发 repaint


如何避免重排重绘

  • 通过 class 批量修改样式
  • 使用离线 DOM 或者 documentFragment
  • 避免使用 table 布局
  • 对类似 window resize 这样的事件做 debounce
  • 对 dom 属性的读写分离


JS 和 CSS 阻塞

  • JS:会先下载并执行,再继续渲染,也就是说,下载和执行,都会阻塞 DOM 解析,因为 JS 可能存在 DOM 操作
  • CSS:正常不会阻塞 DOM 解析,但是遇到 script 标签会触发渲染,会等到 CSS 下载完成再继续执行,这种情况下会阻塞 DOM 解析。


五个常驻线程

JS Runtime 是单线程,但是浏览器提供多线程环境

  • GUI 渲染线程:负责解析HTML,CSS,构建DOM树,布局和绘制,与 JS 引擎线程互斥
  • JS 引擎线程:负责处理 JS 脚本,执行会阻塞渲染线程
  • 定时器触发线程:负责执行定时器一类函数的进程,如 setTimeout、setInterval。主线程执行代码遇到计时器时,会将计时器交给该线程处理,当计时完毕之后,定时器线程会将计时完毕后的事件加入到事件队列的尾部,等待 JS 引擎线程的执行
  • 事件触发线程:主要负责将准备好执行的事件交给 JS 引擎线程执行,如计时器计时完毕后的事件,AJAX 请求成功返回并触发的回调函数和用户触发点击事件时,事件触发线程会将回调函数加入到任务队列的尾部,等待 JS 引擎线程的执行
  • 异步 HTTP 请求线程:当主线程依次执行代码时,遇到异步请求,会将函数交给改线程处理,当监听状态码变更时,如果有回调函数,会将回调函数加入到任务队列的尾部,等待 JS 引擎线程的执行


Event Loop

主线程从任务队列读取事件这个过程,是循环不断的,称之为 Event Loop。

  • 执行栈里清空了,才会从任务队列中取任务,浏览器不止一个任务队列(Task Queue 和 Microtask Queue)
  • setTimeout 是浏览器行为,和 DOM 事件一样
  • 宏观任务一个一个执行,微任务一批一批执行

异步任务有两种:

  • 宏任务(Macrotask):宿主发起的任务,包括整体代码 script,setTimeout,setInterval、setImmediate、I/O操作、UI rendering
  • 微任务(Microtask):JavaScript 引擎发起的任务,process.nextTick, Promises, Object.observe, MutationObserver


事件模型

DOM 事件模型分为捕获和冒泡。一个事件发生后,会在子元素和父元素之间传播(propagation)。

这种传播分成三个阶段:

  • 捕获阶段:事件从 window 对象自上而下向目标节点传播的阶段
  • 目标阶段:真正的目标节点正在处理事件的阶段
  • 冒泡阶段:事件从目标节点自下而上向 window 对象传播的阶段

在实际监听事件时,可以这样使用冒泡和捕获机制:默认使用冒泡模式;当开发组件时,遇到需要父元素控制子元素的行为,可以使用捕获机制。


事件代理

由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,通过 event.target 来判断。这种方法叫做事件的代理(delegation)。

优点:

  • 减少内存消耗,提高性能
  • 方便动态绑定事件

原文 https://blog.callmewhy.com/post/liu-lan-qi-gong-zuo-yuan-li-xue-xi-bi-ji/

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7234

用了几十年的浏览器 user-agent 要退出历史舞台了?看看 Google 怎么说

Google 近日宣布,计划在 Chrome 浏览器上逐步淘汰 user-agent 字符串。这里稍微解释下,user-agent (UA,用户代理) 字符串是现代 web 和浏览器功能的重要组成部分。

可怕的“浏览器指纹”,让你在互联网上,无处可藏

你是一个好色之徒。别问我怎么知道的,我了解你,虽然我不知道你是谁。科技公司通过大数据,会对你进行一个大体的画像,然后按照你的喜好推送信息。比如一些精准的广告,刺激你荷尔蒙的小视频等。

Chrome浏览器语音自动播放功能

Chrome浏览器为了屏蔽带声音的骚扰广告,从66版本后不再允许自动播放语音,我做的项目需要实时语音提示报警信息,网上搜索了好久都说不再支持自动播放,知道碰到一个大神提供建议设置Chrome浏览器允许声音自动播放:

IE9及以下浏览器升级提示

在使用react的项目中一般都有兼容性问题,特别是使用了组件库比如element-react或者ant-design等等,在ie下多少都会有点小问题,比如样式不正确,或者组件功能失效,甚至白屏等问题。

JS检测CSS属性浏览器是否支持的多种方法

原生CSS.supports语法返回布尔值 true 或者 false ,用来检测是否支持某CSS属性。不考虑兼容性,对CSS的进行检测使用 CSS.supports() 方法,要检测IE浏览器使用赋值取值法。

浏览器内核分类

五大浏览器:IE、Firefox、Chrome、Safari和Opera。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机

浏览器重绘(repaint)重排(reflow)与优化

很多人都知道要减少浏览器的重排和重绘,但对其中的具体原理以及如何具体操作并不是很了解,当突然提起这个话题的时候,还是会一脸懵逼。希望大家可以耐着性子阅读本文,仔细琢磨,彻底掌握这个知识点!

js判断浏览器内核是否是safari浏览器

PC端只有Chrome有Safari字段吗?为什么不需要判断其他浏览器?其实360,QQ等浏览器的userAgent字段也会带有Safari字段,但是由于他们基于Chrome二次开发的,所有也会携带有Chrome字段。

Js详细判断浏览器运行环境

看到标题,大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统、穿戴设备和电视平台上访问

不同浏览器的内核

网页上所用到的语言有:html, css, JavaScript等,其中,前两者通常决定了该页面长什么样,它们是可以说都是约定的规范。不同的浏览器在获取到某页面的代码文件后,负责根据这套规范将代码渲染出来呈现给用户

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全