浏览器
前端工程师科普 https://juejin.cn/post/6900058068374650887
-
浏览器运行原理
-
浏览器是指
可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。 -
浏览器的主要功能
就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、 图片或其他的类型。 资源的位置由用户使用URI（统一资源标符）指定。多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。 如今，大多数的浏览器都是或多或少地遵从规范。 -
目前使用的主流浏览器有五个：
Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。 -
浏览器按照引擎分类
- Trident引擎：Internet Explorer - Webkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和Safari - Gecko引擎：Firefox - Presto引擎：早期Opera采用，后用webkit引擎 -
浏览器的主要组件
（1）用户界面 - 包括地址栏、 前进/后退按钮、 书签菜单等。 除了浏览器主窗口显示的请求的页面外，其他显示的各个部分都属于用户界面。其他显示的各个部分都属于用户界面。 （2）浏览器引擎 - 在用户界面和呈现引擎之间传送指令。 （3）渲染引擎 - 负责显示请求的内容。 如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。 （4）网络 - 用于网络调用，如 HTTP 请求。 其接口与平台无关，为所有平台提供底层实现。 （5）用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。 其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。 （6） JavaScript 解释器 - 用于解析和执行 JavaScript 代码。 （7）数据存储 - 这是持久层。 浏览器需要在硬盘上保存各种数据，例如 Cookie。 新的 HTML 规范(HTML5) 定义了“网络数据库” ，这是一个完整的浏览器内数据库。 -
浏览器内核工作原理简介
#
-
-
常用浏览器有哪些，内核都是什么？
-
浏览器 内核 IE Trident 火狐(firefox) Gecko chrome Webkit safari Webkit 360，搜狗 极速模式用的Webkit的内核 360，搜狗 兼容模式用的Trident的内核 -
内核：
- Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
- Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
- Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
- Webkit：Safari Chrome
-
-
介绍一下你对浏览器内核的理解？
-
主要分成两部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎。 （1）渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 （2）JS引擎则：解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。 -
js引擎有哪些
V8，用C++编写，开放源代码，由Google丹麦开发，是Google Chrome的一部分，也用于Node.js。 JavaScriptCore，开放源代码，用于webkit型浏览器，如Safari ，2008年实现了编译器和字节码解释器，升级为了SquirrelFish。苹果内部代号为“Nitro”的JavaScript引擎也是基于JavaScriptCore引擎的。 Rhino，由Mozilla基金会管理，开放源代码，完全以Java编写，用于HTMLUnit SpiderMonkey，第一款JavaScript引擎，早期用于Netscape Navigator，现时用于Mozilla Firefox。 Chakra (JScript引擎)，用于Internet Explorer[11]。 Chakra (JavaScript引擎)，用于Microsoft Edge。 KJS，KDE的ECMAScript／JavaScript引擎，最初由哈里·波顿开发，用于KDE项目的Konqueror网页浏览器中。 ————————————————
-
-
js一般在哪儿写，有什么区别
-
页面渲染顺序
-
什么是跨域
- https://juejin.cn/post/6844903521163182088
- https://segmentfault.com/a/1190000011715088
- 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
-
如何解决跨域
-
你对浏览器的理解？
浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置。 HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的组织。 但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。 简单来说浏览器可以分为两部分，shell 和 内核。 其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。 -
介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎和 JS 引擎。 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也 可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。 JS 引擎：解析和执行 javascript 来实现网页的动态效果。 最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。 -
常见的浏览器内核比较
Trident：这种浏览器内核是 IE 浏览器用的内核，因为在早期 IE 占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好。但是由于 IE 的高市场占有率，微软也很长时间没有更新 Trident 内核，就导致了 Trident 内核和 W3C 标准脱节。还有就是 Trident 内核的大量 Bug 等安全问题没有得到解决，加上一些专家学者公开自己认为 IE 浏览器不安全的观点，使很多用户开始转向其他浏览器。 Gecko：这是 Firefox 和 Flock 所采用的内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。 Presto：Opera 曾经采用的就是 Presto 内核，Presto 内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理 JS 脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。 Webkit：Webkit 是 Safari 采用的内核，它的优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。 Blink：谷歌在 Chromium Blog 上发表博客，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。其实 Blink 引擎就是 Webkit 的一个分支，就像 webkit 是KHTML 的分支一样。Blink 引擎现在是谷歌公司与 Opera Software 共同研发，上面提到过的，Opera 弃用了自己的 Presto 内核，加入 Google 阵营，跟随谷歌一起研发 Blink。 -
常见浏览器所用内核
（1） IE 浏览器内核：Trident 内核，也是俗称的 IE 内核； （2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现在是 Blink内核； （3） Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核； （4） Safari 浏览器内核：Webkit 内核； （5） Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核； （6） 360浏览器、猎豹浏览器内核：IE + Chrome 双内核； （7） 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）； （8） 百度浏览器、世界之窗内核：IE 内核； （9） 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了； （10）UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核。 -
浏览器的渲染原理？
（1）首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。 （2）然后对 CSS 进行解析，生成 CSSOM 规则树。 （3）根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。 （4）当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也 可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。 （5）布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。 值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。 -
渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程）
JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。 也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。 -
async 和 defer 的作用是什么？有什么区别？（浏览器解析过程）
（1）脚本没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执 行。 （2）defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。 当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。 （3）async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。 -
CSS 如何阻塞文档解析？（浏览器解析过程）
理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。 所以如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。 -
渲染页面时常见哪些不良现象？（浏览器渲染过程）
FOUC：主要指的是样式闪烁的问题，由于浏览器渲染机制（比如firefox），在 CSS 加载之前，先呈现了 HTML，就会导致展示出无样式内容，然后样式突然呈现的现象。会出现这个问题的原因主要是 css 加载时间过长，或者 css 被放在了文档底部。 白屏：有些浏览器渲染机制（比如chrome）要先构建 DOM 树和 CSSOM 树，构建完成后再进行渲染，如果 CSS 部分放在 HTML尾部，由于 CSS 未加载完成，浏览器迟迟未渲染，从而导致白屏；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。 -
如何优化关键渲染路径？（浏览器渲染过程）
为尽快完成首次渲染，我们需要最大限度减小以下三种可变因素： （1）关键资源的数量。 （2）关键路径长度。 （3）关键字节的数量。 关键资源是可能阻止网页首次渲染的资源。这些资源越少，浏览器的工作量就越小，对 CPU 以及其他资源的占用也就越少。 同样，关键路径长度受所有关键资源与其字节大小之间依赖关系图的影响：某些资源只能在上一资源处理完毕之后才能开始下载，并且资源越大，下载所需的往返次数就越多。 最后，浏览器需要下载的关键字节越少，处理内容并让其出现在屏幕上的速度就越快。要减少字节数，我们可以减少资源数（将它们删除或设为非关键资源），此外还要压缩和优化各项资源，确保最大限度减小传送大小。 优化关键渲染路径的常规步骤如下： （1）对关键路径进行分析和特性描述：资源数、字节数、长度。 （2）最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。 （3）优化关键字节数以缩短下载时间（往返次数）。 （4）优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径长度。 -
什么是重绘和回流？（浏览器绘制过程）
重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘。 回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流。 常见引起回流属性和方法： 任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。 （1）添加或者删除可见的 DOM 元素； （2）元素尺寸改变——边距、填充、边框、宽度和高度 （3）内容变化，比如用户在 input 框中输入文字 （4）浏览器窗口尺寸改变——resize事件发生时 （5）计算 offsetWidth 和 offsetHeight 属性 （6）设置 style 属性的值 （7）当你修改网页的默认字体时。 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。 -
如何减少回流？（浏览器绘制过程）
（1）使用 transform 替代 top （2）不要把节点的属性值放在一个循环里当成循环里的变量 （3）不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局 （4）把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM （5）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。 -
为什么操作 DOM 慢？（浏览器绘制过程）
一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗。 -
DOMContentLoaded 事件和 Load 事件的区别？
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和 子框架的加载完成。 Load 事件是当所有资源加载完成后触发的。 -
如何实现浏览器内多个标签页之间的通信?
（1）使用 WebSocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端。 （2）使用 SharedWorker （只在 chrome 浏览器实现了），两个页面共享同一个线程，通过向线程发送数据和接收数据来实现标签页之间的双向通行。 （3）可以调用 localStorage、cookies 等本地存储方式，localStorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个 storage 事件，我们通过监听 storage 事件，控制它的值来进行页面信息通信； （4）如果我们能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的。 -
渐进增强和优雅降级的定义
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。 -
浏览器架构
用户界面 * 主进程 * 内核 * 渲染引擎 * JS 引擎 * 执行栈 * 事件触发线程 * 消息队列 * 微任务 * 宏任务 * 网络异步线程 * 定时器线程 -
从输入URL到页面呈现发生了什么？
构建请求 查找强缓存 DNS解析 建立 TCP 连接 三次握手 数据传输 四次挥手 发送 HTTP 请求 网络响应 构建DOM树 样式计算 生成布局渲染树