关于浏览器:关于浏览器的那些事儿

对于浏览器的那些事儿

七拼八凑了一些浏览器内容(^-^)

支流浏览器比照与倒退

• 举荐一个短视频介绍

1. Chrome 以前是 Chromium 内核(Chrome 内核)，在 Webkit 根底上批改，但代码可读性更高，比 Webkit 更好用。目前是应用从新升级换代后的 Blink 内核。谷歌还开发了本人的 JS 引擎 V8，使 JS 运行速度极大地提高，Node.js 也是以 V8 为底层架构封装。另外咱们能够通过在地址栏输出 chrome://version/ 来查看浏览器相干信息，通过 chrome://dino 玩小游戏。
2. Safari 的 Webkit 源自 KHTML，苹果在比拟了 Gecko 和 KHTML 后，抉择了后者来做引擎开发，是因为 KHTML 领有清晰的源码构造和极快的渲染速度。苹果与谷歌抵触又研发应用 Webkit2 内核，谷歌则研发了 Chromium 内核，Webkit 也算是苹果为业界做出的最大奉献。
3. FireFox 的 Gecko 内核俗称 Firefox 内核，代码齐全公开，可开发水平高，全世界的程序员都可为其编写代码，减少其性能。还有一个 JS 引擎 Rhino，也是由Mozilla基金会治理，尽管最终被废除，但其凋谢源代码，齐全以Java编写。
4. Opera 最早本人研发 Presto，前面用 Webkit，最初与谷歌一起公布应用 Blink，而后因用户体验降落逐步衰败。
5. IE 是微软和 Spyglass 合作开发，随 Windows 绑定抢占市场，并且只能在 Windows 应用也不开源。
6. Edge 原名叫斯巴达，后改名 Edge，2015 年 3 月公布第一个预览版。微软打算在 Windows 中齐全淘汰 Internet Explorer 后，为 Edge 增加 “IE 模式”，该模式容许用户在 Edge 内应用 IE 内核从新加载网页。
7. 新 Edge 是微软斗争下的产物，2018 年 12 月发表新 Edge 将基于 Chromium 内核开发，正式版于 2020 年 1 月公布。能够通过 edge://version/ 来查看浏览器版本信息，通过 edge://surf/ 能够玩离线小游戏。
8. UC 浏览器的 U3 内核实质是基于开源内核 Webkit 开发，也有说是基于 Gecko 内核与 Trident 内核开发的。
9. 泛滥国产浏览器的厂商别离为360平安、Tencent、搜狗信息、豹好玩科技、Baidu、二三四五、网际傲游、凤凰工作室。这些浏览器适宜须要常常拜访那种古老零碎的用户(兼容模式)

补充：还有一个 JS 引擎 - KJS，KDE 的 ECMAScript／JavaScript 引擎，最后由哈里·波顿开发，用于 KDE 我的项目的 Konqueror 网页浏览器中。

浏览器的原理

浏览器程序结构

• 用户界面(User Interface) - 包含地址栏、后退/后退按钮、书签菜单等。除了浏览器主窗口（显示页面），其余局部都属于用户界面。
• 浏览器引擎(Browser Engine) - 在用户界面和渲染引擎之间传送指令。
• 渲染引擎(Rendering Engine) - 显示（渲染）申请的内容。如果申请的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
• 网络(NetWorking) - 用于网络调用，比方 HTTP 申请。其接口与平台无关，并为所有平台提供底层实现。
• JavaScript 解释器(JavaScript Interpreter)。用于解析和执行 JavaScript 代码。
• 用户界面后端(UI Backend) - 用于绘制根本的窗口小部件，比方组合框和窗口。公开了与平台无关的通用接口，在底层应用操作系统的用户界面办法。
• 数据存储(Data Persistence) - 这是长久层。浏览器须要在硬盘上保留各种数据，例如 Cookie。新的 HTML 标准 (HTML5) 定义了“网络数据库”，这是一个残缺（然而轻便）的浏览器内数据库。

浏览器程序结构倒退

• 最早的浏览器上单过程构造，页面线程执行页面渲染，JS 线程执行 JS 代码等等，然而只有其中一个线程出问题，可能整个程序就解体了。

  • 例如：浏览器的一个标签页卡死，那么整个浏览器都无奈应用，导致应用程序极其不稳固。
  • 单过程是能够共享数据的，所以并不平安。
  • 因为各个线程负责的工作过多，应用起来也并不晦涩。

• 为了解决这些问题，古代浏览器应用了多过程构造。可分为浏览器过程、网络过程、缓存过程、GPU 过程、渲染器过程、插件过程。

  • 浏览器过程：管制用户界面，协调其余过程工作。
  • 网络过程：发动接管网络申请
  • 缓存过程：控制数据缓存
  • GPU 过程：负责浏览器界面与页面的渲染
  • 渲染器过程：管制 Tab 标签页的渲染，有可能会为每个标签页创立一个渲染过程(由浏览器启动模型决定)。独立每个页面一个过程能够起到过程隔离的作用，每个页面互不烦扰。
  • 插件过程：管制应用的插件，Flash等等，不是浏览器装置的插件。

渲染主流程

1. 浏览器从网络层获取申请的文档内容，而后开始渲染流程。
2. 解析并开始构建 Content Tree（Element -> DOM nodes），同时解析款式数据（内部 CSS 和 Style 元素）。
3. 两者联合构建 Render Tree（渲染树蕴含带有视觉属性（如色彩和尺寸）的矩形们）。
4. 在渲染树创立后进入 Layout 阶段，给渲染树的每个节点设置在屏幕上的地位信息。
5. Paint 阶段，通过 UI backend 绘制 Render tree 到屏幕。

留神，渲染过程是渐进式的。浏览器会尽早展现文档内容，即不会在所有 HTML 文档解析实现后才会去构建 Render tree，而是局部内容被解析和展现，并持续解析和展现剩下的。

浏览器的页面渲染过程

参考文章

• 在浏览器地址栏输出 URL

• 浏览器会启动网络线程来申请 DNS 进行域名解析，最终返回一个 IP 地址。

• 一旦获取到服务器IP地址，浏览器就会通过TCP【三次握手】与服务器建设连贯。这个机制的是用来让两端尝试进行通信。浏览器和服务器在发送数据之前，通过下层协定 HTTPS 能够协商网络 TCP 套接字连贯的一些参数。TCP的【三次握手】技术常常被称为【SYN-SYN-ACK】，更确切的说是 【SYN, SYN-ACK, ACK】，因为通过 TCP 首先发送了三个音讯进行协商，开始一个 TCP 会话在两台电脑之间。这意味着服务器之间还要来回发送三条音讯，而咱们的申请目前尚未收回。

  • 上图咱们能够这样了解，因为 TCP 是一个工作在传输层的牢靠数据传输的服务，它能确保接收端接管的网络包是无损坏、无距离、非冗余和按序的。

    • 面向连贯：肯定是「一对一」能力连贯，不能像 UDP 协定能够一个主机同时向多个主机发送音讯，也就是一对多是无奈做到的。
    • 牢靠的：无论的网络链路中呈现了怎么的链路变动，TCP 都能够保障一个报文肯定可能达到接收端。
    • 字节流：音讯是「没有边界」的，所以无论咱们音讯有多大都能够进行传输。并且音讯是「有序的」，当「前一个」音讯没有收到的时候，即便它先收到了前面的字节，那么也不能扔给应用层去解决，同时对「反复」的报文会主动抛弃。
    • 参考：ibanmen

  • TCP 是面向连贯的协定，所以应用 TCP 前必须先建设连贯，而建设连贯是通过三次握手来进行的，简略解释上图能够是：

    1. 我对你说：我要跟你谈话。（此时服务端确认客户端的发送能力没有问题）
    2. 你跟我说：我晓得你要跟我谈话，咱们开始谈话吧。（此时客户端确认服务端的接管和发送能力都没有问题）

    3. 我跟你说：好的，咱们开始谈话吧。（此时服务端确认客户端的接管能力也没有问题）

• TLS/SSL 协商：为了在【HTTPS】上建设平安连贯，另一种握手是必须的。更确切的说是 TLS/SSL 协商，它决定了什么明码将会被用来加密通信，验证服务器，这就意味着在进行实在的数据传输之前建设平安连贯。在发送真正的申请内容之前还须要三次往返服务器。尽管建设平安连贯对减少了加载页面的等待时间，对于建设一个平安的连贯来说，以减少等待时间为代价是值得的，因为在浏览器和 web 服务器之间传输的数据不能够被第三方解密。

• 通过上图 8 次往返，浏览器终于能够发出请求。一旦咱们建设了到 web 服务器的连贯，浏览器就代表用户发送一个初始的 HTTP GET申请，对于网站来说，这个申请通常是一个 HTML 文件。

• 一旦服务器收到申请，它将应用相干的响应头和 HTML 的内容进行回复。此时网络线程会告诉 UI 线程执行后续操作。

• UI 线程会创立一个渲染器过程来渲染页面，浏览器过程会通过 IPC 管道将数据传递给渲染器过程。

• 渲染器过程的主线程接管到数据(HTML)，开始渲染解析。

• 通过标签词法解析，将内容解析为多个标记，而后结构 DOM 树，先创立 document 对象，再一直批改，向其中增加各种元素。

  • 解析引入的 css、js、img 等等，图片与 css 不会阻塞 HTML 的解析，因为不影响 DOM 树的结构。但 <script> 标签会阻塞 HTML 的解析，转而执行其中的 js 代码，因为浏览器不分明此 js 代码是否有扭转 DOM 构造，所以后行执行。

• 构建 DOM 树后，主线程开始解析 css 并确定每个 DOM 节点的款式，即便咱们没写款式，每个浏览器都有本人的样式表。

• 构建 LayoutTree，通过 DOM 树和款式生成 LayoutTree，即确定每个节点的地位。LayoutTree 的每个节点都记录了本人的坐标与边框尺寸等。

  • DOM 树与 Layout 树并不是对应的，设置了 display:none; 的节点是不会在 Layout 树中。

  • 有内容显示的伪元素节点不会呈现在 DOM 树中，但会呈现在 Layout 树中，因为 DOM 是通过 HTML 解析的，而伪元素是通过款式产生的。

• 渲染器过程的主线程遍历 LayoutTree 确定各个节点的绘制程序，创立一个绘制记录表（Paint Record）。比方 z-index 值大的元素个别都是最初绘制等等。

• 渲染器过程的主线程再遍历 LayoutTree 生成 Layer Tree。

• 渲染器过程的主线程将 Layer Tree 与绘制程序表一起传给合成器线程。

  1. 合成器线程按规定进行分图层，并把图层生成更小的图块(tiles)再传递给栅格线程进行栅格化。
  2. 栅格化实现后返还给合成器线程 draw quads 图块信息(每图块的信息与地位等)。
  3. 合成器线程依据这些 draw quads 信息用 frame 合成器将合成一个合成器帧。
  4. 再通过 IPC 管道将此合成器帧传递给浏览器过程。
  5. 浏览器过程收到这帧的图像后传递给 GPU，GPU 渲染到页面上。
  6. 当你滚动页面时又会从新生成合成器帧，再次渲染到页面上。
  7. 当咱们扭转元素地位或尺寸属性时，会从新进行款式计算、布局、绘制等前面所有流程(重排-reflow)。
  8. 当咱们只扭转色彩这种属性时，不会引起从新触发布局，会触发款式计算与绘制(重绘-repaint)。
  9. 因为 JS 也是在主线程运行，所以尽量不要高频触发重绘重排，毕竟布局、绘制也是在占用主线程，高频触发重绘重排会导致页面掉帧。
  10. 所以尽量减少重绘重排，能够转而应用 CSS3 的 transform 动画来达到成果(会间接运行合成器线程)，这些是不会占用主线程的，可能防止重绘重排与 js 执行争夺主线程导致页面卡顿掉帧的问题。
  11. 在挪动端应用 3D 转换能够优化性能。如果设施有 3D 减速引擎 GPU 能够进步性能，2D 转换是无奈调用 GPU，2D 是靠的 CPU。

  12. 也能够利用 requestAnimationFrame() API，利用浏览器的闲暇工夫来优化，React Fiber 就是应用此 API，他会将主线程的工作扩散到每一帧的距离，从而不影响动画的流程。

• 收到全部内容之后能够抉择断开(依据 Connection 申请头，若为 keep-alive 则放弃。)与服务器之间的 TCP 连贯。

  • 我对你说：好了，我不想跟你谈话了，再见。（客户端发送敞开连贯申请给服务端）
  • 你对我说：好的，那我要跟你再见啦。（服务端确认客户端的申请）
  • 你对我说：当初我要跟你再见了，你晓得了吗。（服务端申请敞开连贯）

  • 我对你说：我晓得了，再见！（客户端确认申请）

浏览器页面的优化

性能优化

• 缩小 DNS 查找（应用 cdn 等）
• js 提早加载或异步加载
• 尽量应用 link，缩小应用 @import，import 是最初挂载的。
• 缩小 HTTP 申请（CSS Sprite、合并 css、合并 js 等等）
• 将 html/css/js/img 等文件压缩
• 开启 gzip 模块
• 长于开启并利用缓存，从缓存中读取图片与 html/css/js 等。

• 增加 Expires 头缓存

  • 页面的首次访问者会进行很多 HTTP 申请，然而通过应用一个短暂的 Expires 头，能够使这些组件被缓存，下次访问的时候，就能够缩小不必要的 HTPP 申请，从而进步加载速度。

    • Web 服务器通过 Expires 头通知客户端能够应用一个组件的以后正本，直到指定的工夫为止。
    • 例如：Expires: Fri, 18 Mar 2016 07:41:53 GMT
    • Expires 毛病: 它要求服务器和客户端时钟严格同步，过期日期须要常常查看。
    • HTTP1.1 中引入 Cache-Control 来克服 Expires 头的限度，应用 max-age 指定组件被缓存多久。
    • Cache-Control: max-age=12345600
    • 若同时制订 Cache-Control 和 Expires，则 max-age 将笼罩 Expires 头。

• HTML 代码优化

  • 应用语义化的标签，代码清晰简洁。
  • 应用 W3C 规范书写闭合小写的标签。
  • 防止应用空申请，包含空的 href 链接、空 src 链接。空链接自身无奈申请胜利，因而会把一个 HTTP 申请拖到超时，而且空链接会阻塞页面中其余资源的下载过程，会拖慢页面加载速度。
  • 依据我的项目大小，抉择次要应用 class 还是 id。id 选择器优先级最高，访问速度最快。然而在 html 中每申明一个 id，就会在 js 底层申明一个全局变量，而全局变量的增多，将会拖慢 js 中变量遍历的效率，举荐我的项目小能够用 id，我的项目大少用 id。
  • 事后设定图片与 table 大小，防止缩放。在页面加载过程中，图片最初加载，若不对图片预设大小，当图片加载实现后，将会引起大量的重排，将会节约浏览器资源及拖慢页面加载速度。
  • 尽量减少 DOM 元素的数量与层级。解析 HTML 时，标签的数量越多，标签的层级越深，浏览器解析构建 DOM 树的工夫就越长，应尽可能的缩小 DOM 元素的数量和层级。
  • 尽量避免应用 table 标签。浏览器对 table 标签的解析是全副生成后再一次性绘制的，因而会造成表格地位较长时间的空白，举荐应用 ul 及 li 标签绘制表格。
  • 应用异步加载 iframe 标签。浏览器加载 iframe 标签时，会阻塞父页面渲染树的构建及 HTTP 申请，因而尽量应用异步加载 iframe。

• CSS 代码优化

  • 禁止应用款式表达式，它的解析速度较慢，而且运算次数远比咱们设想的要大，随便动动鼠标就能轻松达到上万次运算，会对页面性能造成影响。

    • 例如：#myDiv{width: expression(document.body.offsetWidth-110+"px");}。
  • 优化要害选择器，去掉有效的父级选择器，尽量少在选择器开端应用通配符。大多数人都认为，浏览器对 CSS 选择器的解析式从左往右进行的，然而其实是从右到左执行的。
  • 缩小有效代码，留神专用款式。

• JS 代码优化

  • 多个 js 变量申明合并。
  • 不应用 eval 函数，不平安，性能耗费重大。
  • 应用事件代理绑定事件，如将事件绑定到 body 上进行代理，利用冒泡原理将事件加到父级上，可能给动静减少的元素进行数据绑定。
  • 防止频繁的操作 DOM 节点，应用 innerHTML 代替，从而缩小重绘和重排。
  • 缩小全局变量，尽量应用局部变量。js 中全局变量运算速率远低于局部变量，速度差别达到上百倍，且全局变量越多，全局变量的查找速率便越慢。
  • 缩小 js 对 css 款式的批改从而缩小重绘和重排。
  • 缩小 ajax 申请，罕用数据存本地。
• LazyLoad Images

兼容性优化

• HTML5 新的语义标签在低版本的老 IE 浏览器中存在兼容性问题，能够引入第三方解析库。

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

• 应用 Reset CSS 来对立浏览器款式
• 不必兼容 IE 时，间接排除掉。
• 写 CSS3 新款式属性时，加浏览器前缀兼容晚期浏览器。

@keyframestransformtranstionanimationborder-radiusbox-shadowflex...

• 防止应用不兼容的 js 代码（工夫解决问题、屏幕宽高问题、event 事件问题、DOM 节点问题、事件流传问题、阻止默认事件问题、鼠标滚轮滚动事件问题等等）。
• 鼠标指针 cursor: hand; 只有 IE 浏览器辨认，其余浏览器不辨认。对立应用 cursor: pointer;
• 超链接拜访过后 hover 款式就不呈现的问题，须要留神伪类程序 link-visited-hover-active。
• css hack

background-color: yellow0; // 0 ie8+background-color: pink; // + ie7_background-color: orange; // _ ie6

• 应用一个性能之前判断浏览器是否反对，比方应用 ajax 要判断是否反对 XMLHttpRequest，IE6 之前不反对。还有应用本地存储、告诉弹窗等 HTML5 新个性时更须留神。

参考起源

• 参考 HTML 引擎)
• 参考 JavaScript 引擎
• 参考浏览器原理