前言

大家好，我是林三心，置信大家在面试中被问过很屡次“说一说在网址栏输出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

结语

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