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

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

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

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

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

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

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

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

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

第 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、最终将各个节点 绘制 在屏幕上

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

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

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

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

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

如果是 从左到右 的话：

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

如果是 从右到左 的话：

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

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

` 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`

` 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`

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()

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

强缓存
1. 不会向服务器发送申请，间接从本地缓存中获取数据
2. 申请资源的的状态码为: 200 ok(from memory cache)
3. 优先级：cache-control > expires
协商缓存
1. 向服务器发送申请，服务器会依据申请头的资源判断是否命中协商缓存
2. 如果命中，则返回 304 状态码告诉浏览器从缓存中读取资源
3. 优先级：Last-Modified 与 ETag 是能够一起应用的，服务器会优先验证ETag，统一的状况下，才会持续比对Last-Modified，最初才决定是否返回304

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

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

前言

输出 URL 产生了啥？

永恒钻石

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

2. 浏览器的内核

3. 过程和线程

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

5. 大抵的渲染过程

至尊星耀

6. CSS 阻塞状况以及优化

7. JS 阻塞问题

8. 资源加载阻塞

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

最强王者

10. 什么是重绘回流

11. 触发重绘的属性

12. 触发回流的属性

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

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

15. 浏览器缓存分类

结语