HTML 与 浏览器

Posted 2021-04-04 前端职场生存指南

1. 渲染引擎有什么作用，常见的渲染引擎有哪些？

答案：

渲染引擎的作用是根据资源文件的内容渲染出用户可见的界面。目前市面上主要的浏览器和它们所对应的渲染引擎有：

• IE，引擎为 Trident

• Firefox(Mozilla)，引擎为 Gecko

• Safari，引擎为 Webkit

• Chrome，引擎为 Blink

• Opera，引擎同样为 Blink

解读：

对于前端来说，与工作最直接相关的两个浏览器引擎是——渲染引擎和 javascript 解释引擎。注意题目问的是浏览器的渲染引擎，不是 JavaScript 的解释引擎，所以本题和 v8、SpiderMonkey 什么的都没有关系。

Chrome 原本和 Safari 共用同一个引擎— Webkit，后来 Chrome 转向了自己开发的引擎 Blink。至于为什么他们转向的原因，Chromium 开发团队是这么解释的：

There are two main reasons why we’re making this change.

• The main reason is that Chromium uses a different multi-process architecture from other WebKit-based browsers. So, over the years, supporting multiple architectures has led to increasing complexity for both the WebKit and Chromium communities, slowing down the collective pace of innovation.

• In addition, this gives us an opportunity to do open-ended investigations into other performance improvement strategies. We want web applications to be as fast as possible. So for example, we want to make as many of the browser’s duties as possible run in parallel, so we can keep the main thread free for your application code. We’ve already made significant progress here–for example by reducing the impact JavaScript and layout have on page scrolling, and making it so an increasing number of CSS animations can run at 60fps even while JavaScript is doing some heavy-lifting–but this is just the start.

We want to do for networking, rendering and layout what V8 did for JavaScript. Remember JS engines before V8? We want the same sort of healthy innovation that benefits all users of the web, on all browsers.

简单来说，就是有两个原因：

1. 主要原因，Chrome 的多进程架构和 WebKit 的多进程架构不完全兼容，为了能够兼容 Chrome 的开发工作变得越来越复杂，效率越来越低，所以还不如推翻做一个自己的引擎

2. 做自己的引擎可以没有历史负担地实现自己的想法。比如，浏览器应该尽可能多的并行运行任务，这样可以为主进程留出空间。目前这方面已经取得了长足的进步，例如通过减少 JavaScript 和布局对页面滚动的影响，使其即使在 JavaScript 进行大量计算任务时也能以 60fps 的速度运行大量的 CSS 动画

2. 你认为 JavaScript 是一门解释型语言还是编译型语言？

答案：

先来看一下解释型语言和编译型语言的区别：

• 编译型语言，如 Java，编译器在代码运行前将其从编程语言转换成机器语言，所以编译后的文件可以直接运行

• 解释型语言，编译器在运行时将代码从编程语言转换成机器语言，所以运行环境中要安装解释器

所以 JavaScript 算是一门解释型语言， 因为 JavaScript 代码需要在机器（node 或者浏览器）上安装一个工具（ JS 引擎）才能执行。这是解释型语言需要的。而编译型语言产品能够自由地直接运行。

但是同时 JavaScript 又带有一个编译型语言的特性。编译型语言的优点是它有足够的时间在运行之前被编译，在编译的同时做足够的词法分析、极致的优化工作。但是解释型语言要在执行后一瞬间就开始，JavaScript 引擎没有时间做优化。比如：

for(i=0; i<1000; i++){ sum += i;}

在编译型语言中，循环体内的部分在运行时早已被编译器编译成机器码，所以直接运行 1000 次就好。

而在解释型语言中，JavaScript 引擎不得不对循环体内相同的代码解释 1000 次，这会造成很大的性能浪费。所以 Google 和 Mozilla 的开发者给 JavaScript 引擎加上了 JIT (即时编译)的功能。

在代码运行之前，会先放在 JIT 中进行编译，它具体这样编译：

如果同一段代码运行超过一次，就成为 warm，如果一个函数开始 warm，JIT 就把这段代码缓存起来，下一次就可以不用解释这一段代码。如果代码被重复使用的次数越来越多，也就是变得 hot 或者 hotter，JIT 会进行更多优化并缓存。

综上所述，JavaScript 是一门解释型语言，但是现代 JavaScript 引擎赋予了它一些编译型语言的特性。

解读：

其实编译型语言和解释型语言并没有被分得那么清楚，编译和解释只是优化的手段而已。编译型语言的缺点是移植性和适应性差，虽然执行效率高，但编译时间太长，严重影响开发效率和开发体验。

3. User-Agent 是什么，有什么作用？

答案：

User-Agent 是一个特征字符串，用来标识发起请求的用户代理软件的应用类型、操作系统、软件开发商和版本号的信息。

其语法为：

User-Agent: <product> / <product-version> <comment>

浏览器通常使用的格式为：

User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions>

比如以下为一段使用Chrome发出的User-Agent：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/80.0.3987.116 Safari/537.36

解读：

在面试中并不会要求面试者完整地写出来 User-Agent 的完整结构，只要大致知道一个 User-Agent 都包含什么样的信息就可以了。

不知道你有没有注意到一个有意思的问题，Chrome 的 User-Agent 中包含了 Mozilla、Safari 这样的词汇，由上面那道题我们知道 Mozilla 是 Firefox 的渲染引擎，Safari 与 Chrome 也是完全不同的浏览器，那么为什么Chrome 的 User-Agent 会出现它们两个的信息呢？

这就要从 Netscape 这家公司说起，相信大家都听说过这个公司，它们生产的网景 (Netscape) 浏览器曾经是世界浏览器市场的霸主，网景浏览器把 User-Agent 中自己的标识名定位：Mozilla。

所以那时候的程序员就利用 User-Agent 来判断浏览器的特性，比如是否支持 frame，对于不符合要求的浏览器直接显示不兼容内容。就像现在程序员不喜欢IE一样。

所以后来微软推出 IE 浏览器的时候，为了能够兼容那些用来兼容 Netscape 的网页，就在自己的 User-Agent 中也加入了 Mozilla 用来伪装成 Netscape。后来渐渐地这种作法就成为事实标准了。