关于javascript:输入URL发生了啥希望你顺便懂这15个知识点

前言

大家好，我是林三心，置信大家在面试中被问过很屡次 “说一说在网址栏输出 URL 会产生什么？”，置信很多人都能滚瓜烂熟地答出所有步骤，然而单单会背可是不行的，其实这个问题蕴含了很多 浏览器 与性能优化 的知识点，明天我就给大家分享一下这15 个知识点

输出 URL 产生了啥？

• 1、浏览器的地址栏输出 URL 并按下回车。
• 2、浏览器查找以后 URL 是否存在缓存，并比拟缓存是否过期。
• 3、DNS 解析 URL 对应的 IP。
• 4、依据 IP 建设 TCP 连贯（三次握手）。
• 5、HTTP 发动申请。
• 6、服务器解决申请，浏览器接管 HTTP 响应。
• 7、渲染页面，构建 DOM 树。
• 8、敞开 TCP 连贯（四次挥手）。

永恒钻石

1. 浏览器应该具备什么性能？

• 1、网络：浏览器通过网络模块来下载各式各样的资源，例如HTML 文本，JavaScript 代码，CSS 样式表，图片，音视频文件等。网络局部尤为重要，因为它耗时长，而且须要平安拜访互联网上的资源
• 2、资源管理：从网络下载，或者本地获取到的资源须要有 高效的机制 来治理他们。例如如何 防止反复下载，资源如何缓存等等
• 3、网页浏览：这是浏览器的外围也是最 根本 的性能，最 重要 的性能。这个性能决定了如何将 资源转变为可视化 的后果
• 4、多页面治理
• 5、插件与治理
• 6、账户和同步
• 7、平安机制
• 8、开发者工具
  浏览器的次要性能总结起来就是一句话:将用户输出的 url 转变成可视化的图像。

2. 浏览器的内核

在浏览器中有一个最重要的模块，它次要的作用是把所有 申请回来的资源变成可视化的图像 ，这个模块就是 浏览器内核 ，通常他也被称为 渲染引擎。

上面是浏览器内核的总结：

• 1、IE：Trident
• 2、Safari：WebKit。WebKit 自身次要是由两个小引擎形成的，一个正是渲染引擎“WebCore”，另一个则是 javascript 解释引擎“JSCore”，它们均是从 KDE 的渲染引擎 KHTML 及 javascript 解释引擎 KJS 衍生而来。
• 3、Chrome：Blink。在 13 年公布的 Chrome 28.0.1469.0 版本开始，Chrome 放弃 Chromium 引擎转而应用最新的 Blink 引擎（基于 WebKit2——苹果公司于 2010 年推出的新的 WebKit 引擎），Blink 比照上一代的引擎精简了代码、改善了 DOM 框架，也晋升了安全性。
• 4、Opera：2013 年 2 月发表放弃 Presto，采纳Chromium 引擎，又转为 Blink 引擎
• 5、Firefox：Gecko

3. 过程和线程

• 1、过程：程序的一次执行，它占有一片独有的内存空间，是 操作系统 执行的 根本单元
• 2、线程：是过程内的一个独立执行单元，是 CPU 调度的最小单元，程序运行 的根本单元
• 3、一个过程中 至多 有一个运行的线程：主线程。它在过程启动后主动创立
• 4、一个过程能够同时运行多个线程，咱们常说程序是 多线程运行 的，比方你应用 听歌软件 ，这个软件就是一个 过程 ，而你在这个软件里 听歌 ， 珍藏歌 ， 点赞评论 ，这就是一个过程里的 多个线程操作
• 5、一个过程中的数据能够供其中的多个线程 间接共享 ，然而 过程与过程 之间的数据时 不能共享 的
• 6、JS 引擎是 单线程运行 的

4. 浏览器渲染引擎的次要模块

• 1、HTML 解析器：解释 HTML 文档 的解析器，次要作用是 将 HTML 文本解释为 DOM 树
• 2、CSS 解析器：它的作用是为 DOM 中的各个元素对象 计算出款式信息 ，为布局提供 基础设施
• 3、JavaScript 引擎：JavaScript 引擎可能解释 JavaScript 代码，并通过DOM 接口和 CSS 接口 来批改 网页内容 和款式信息 ，从而扭转 渲染的后果
• 4、布局（layout）：在 DOM 创立之后，WebKit 须要将其中的元素对象同样式信息 联合起来 ，计算他们的 大小地位等布局信息 ，造成一个能表白着所有信息的 外部示意模型
• 5、绘图模块（paint）：应用 图形库 将布局计算后的各个网页的节点绘制成 图像后果

5. 大抵的渲染过程

第 1 题的第 7 点，渲染页面，构建 DOM 树，接下来说说大抵的渲染过程

• 1、浏览器会从上到下解析文档
• 2、遇见 HTML 标记，调用 HTML 解析器 解析为对应的 token(一个 token 就是一个标签文本的序列化)并构建 DOM 树(就是一块内存，保留着 tokens，建设他们之间的关系)
• 3、遇见 style/link 标记调用相应解析器解决 CSS 标记，并构建出CSS 款式树
• 4、遇见 script 标记，调用 JavaScript 引擎 解决 script 标记，绑定事件，批改 DOM 树 /CSS 树等
• 5、将 DOM 树与 CSS 合并成一个 渲染树
• 6、依据渲染树来渲染，以计算每个节点的 几何信息(这一过程须要依赖 GPU)
• 7、最终将各个节点 绘制 在屏幕上

至尊星耀

6. CSS 阻塞状况以及优化

• 1、style 标签中的款式：由 HTML 解析器 进行解析，不会 阻塞浏览器渲染(可能会产生“闪屏景象”)，不会阻塞 DOM 解析
• 2、link 引入的 CSS 款式：由 CSS 解析器 进行解析，会 阻塞浏览器渲染，会阻塞前面的 js 语句执行，不阻塞 DOM 的解析
• 3、优化：应用 CDN 节点进行内部资源减速，对 CSS 进行压缩，优化 CSS 代码(不要应用太多层选择器)

留神：看下图，HTML和 CSS 是并行解析的，所以 CSS不会阻塞 HTML 解析 ，然而， 会阻塞整体页面的渲染(因为最初要渲染必须 CSS 和 HTML 一起解析完并合成一处)

7. JS 阻塞问题

• 1、js 会阻塞后续 DOM 的解析，起因是：浏览器不晓得后续脚本的内容，如果先去解析了上面的 DOM，而随后的 js 删除了前面所有的 DOM，那么浏览器就做了无用功，浏览器无奈预估脚本外面具体做了什么操作，例如像 document.write 这种操作，索性全副停住，等脚本执行完了，浏览器再持续向下解析 DOM
• 2、js 会阻塞页面渲染，起因是：js 中也能够给 DOM 设置款式，浏览器等该脚本执行结束，渲染出一个最终后果，防止做无用功。
• 3、js 会阻塞后续 js 的执行，起因是保护依赖关系，例如：必须先引入 jQuery 再引入 bootstrap

8. 资源加载阻塞

无论 css 阻塞，还是 js 阻塞，都不会阻塞浏览器加载内部资源（图片、视频、款式、脚本等）

起因：浏览器始终处于一种：“先把申请收回去”的工作模式，只有是波及到网络申请的内容，无论是：图片、款式、脚本，都会先发送申请去获取资源，至于资源到本地之后什么时候用，由浏览器本人协调。这种做法效率很高。

9. 为什么 CSS 解析程序从右到左

如果是 从左到右 的话：

• 1、第一次从 爷节点 -> 子节点 -> 孙节点 1
• 2、第一次从 爷节点 -> 子节点 -> 孙节点 2
• 3、第一次从 爷节点 -> 子节点 -> 孙节点 3
  如果三次都匹配不到的话，那至多也得走三次：爷节点 -> 子节点 -> 孙节点，这就做了很多无用功啊。

如果是 从右到左 的话：

• 1、第一次从 孙节点 1 ，找不到，进行
• 2、第一次从 孙节点 2 ，找不到，进行
• 3、第一次从 孙节点 3 ，找不到，进行
  这样的话，尽早发现找不到，尽早进行，能够少了很多无用功。

最强王者

10. 什么是重绘回流

• 1、重绘：重绘是一个 元素外观的扭转 所触发的浏览器行为，例如扭转 outline、背景色等属性。浏览器会依据元素的新属性从新绘制，使元素出现新的外观。重绘不会带来从新布局，所以并不一定随同重排。
• 2、回流：渲染对象在创立实现并增加到渲染树时，并不蕴含地位和大小信息。计算这些值的过程称为布局或重排，或回流
• 3、"重绘" 不肯定须要 "重排"，比方扭转某个网页元素的色彩，就只会触发 ” 重绘 ”，不会触发 ” 重排 ”，因为布局没有扭转。
• 4、"重排" 大多数状况下会导致 "重绘"，比方扭转一个网页元素的地位，就会同时触发 ” 重排 ” 和 ” 重绘 ”，因为布局扭转了。

11. 触发重绘的属性

` color background * outline-color

    * border-style                    * background-image                            * outline
    * border-radius                    * background-position                        * outline-style
    * visibility                    * background-repeat                            * outline-width
    * text-decoration                * background-size                            * box-shadow`

12. 触发回流的属性

` width top * text-align

    * height                    * bottom                                * overflow-y
    * padding                    * left                                    * font-weight
    * margin                    * right                                    * overflow
    * display                    * position                                * font-family
    * border-width                * float                                    * line-height
    * border                    * clear                                    * vertival-align
    * min-height                                                        * white-space`

13. 常见触发重绘回流的行为

• 1、当你减少、删除、批改 DOM 结点时，会导致 Reflow , Repaint。
• 2、当你挪动 DOM 的地位
• 3、当你批改 CSS 款式的时候。
• 4、当你 Resize 窗口的时候（挪动端没有这个问题，因为挪动端的缩放没有影响布局视口)
• 5、当你批改网页的 默认字体 时。
• 6、获取 DOM 的 height 或者 width 时，例如clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft、scrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、getBoundingClientRect()、scrollTo()

14. 针对重绘回流的优化计划

• 1、元素地位挪动变换时尽量应用 CSS3 的 transform 来代替 top，left 等操作
• 2、不要应用 table 布局
• 3、将屡次扭转款式属性的操作 合并成一次操作
• 4、利用 文档素碎片（documentFragment），vue 应用了该形式晋升性能
• 5、动画实现过程中，启用GPU 硬件加速：transform:tranlateZ(0)
• 6、为动画元素 新建图层，进步动画元素的z-index
• 7、编写动画时，尽量应用requestAnimationFrame

15. 浏览器缓存分类

1. 强缓存

   1. 不会向服务器发送申请，间接从本地缓存中获取数据
   2. 申请资源的的状态码为: 200 ok(from memory cache)
   3. 优先级：cache-control > expires

2. 协商缓存

   1. 向服务器发送申请，服务器会依据申请头的资源判断是否命中协商缓存
   2. 如果命中，则返回 304 状态码告诉浏览器从缓存中读取资源
   3. 优先级：Last-Modified 与 ETag 是能够一起应用的，服务器会优先验证ETag，统一的状况下，才会持续比对Last-Modified，最初才决定是否返回304

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】