web开发 浏览器常见面试题

web开发 浏览器常见面试题

1 浏览器主要功能

  浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（统一资源标识符）来指定所请求资源的位置。
  HTML和CSS规范中规定了浏览器解释html文档的方式，由W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。但这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web开发者带来了严重的兼容性问题。

2 浏览器的主要构成

• 用户界面：显示请求页面的主窗口、地址栏、后退/前进按钮、书签目录等；
• 浏览器引擎：用来查询及操作渲染引擎的接口；
• 渲染引擎：用来显示请求的内容；
• JS引擎：用来解释执行JS代码。
• 网络：用来完成http请求等网络调用；
• UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
• 数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据；

3 谈谈浏览器内核

  浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)等。
  从2013 年谷歌开始在chrome 28开始使用自己研发的 blink 引擎，opera 则放弃了自己的 Presto 引擎，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也逐渐放弃 webkit，投入 blink 的怀抱。
   pc浏览器内核时间线：
1997年 Trident =》1998年 KHTML =》2000年 Gecko =》2001年 WebKit =》2003年 Presto
2008年 Chromium =》2010年 混合引擎(双核） =》2013年 Blink =》2015年 EdgeHtml

4 为什么会有双核浏览器？

  双核功能的出现与我国互联网环境有着极大的关系，因为有些像网银和公司校园这类网站用Chrome浏览器打不开或会出问题，但却可以用IE浏览器打开。但是对于常见的网站用 IE 浏览器搞不好就会卡死。对于这类问题，我们称之为“网站存在兼容性问题”。
  鉴于国内的环境，网银和IE内核的关系将长期存在，但是又忍不住webkit的诱惑，所以，才有了双核, 其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。

• 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
• 搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）

5 谈谈浏览器的 js引擎

  页面的呈现主要靠浏览器内核，而浏览器内核主要说的是渲染排版引擎，但页面要想实现人机交互，还需要JS 引擎来解析和执行JS语言来实现网页的动态效果。

  同样，对于不同的浏览器，也有不同的js引擎：

• chrome：使用v8引擎；
• safari：使用JavaScriptCore引擎；
• Firefox：使用SpiderMonkey引擎；
• Edge和IE： 使用的Chakra（forJScript）引擎。

6 浏览器渲染主流程

浏览器获取到html代码后，内核会做以下工作：

• 构建DOM树（Parse html）
• 构建CSSOM树（Recaculate Style）
• 合并DOM树与CSSOM树为Render树
• 布局（Layout）
• 绘制（Paint）
• 复合图层化（Composite）

7 谈谈移动端的浏览器内核？

移动端的浏览器内核主要说的是系统内置浏览器的内核，目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko。

• iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit
• Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android 4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink。
• Windows Phone 8 系统浏览器内核是 Trident

8 cookies，sessionStorage和localStorage的区别？

• 共同点：都是保存在浏览器端，且是同源的。
• 区别：
  • cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
  • 存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
  • 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
  • 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

9 谈谈浏览器兼容性问题？

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

• 图片默认有间距：使用float属性为img布局
• 标签最低高度设置min-height不兼容：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}
• 光标手形：firefox不支持hand，但ie支持pointer，统一使用cursor:pointer;
• 不同浏览器的标签默认的外补丁和内补丁不同：CSS里 *{ margin: 0;padding: 0; }
• 当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框：给img添加border：0；或者是border：none；

10 从url到页面展现，这之中发生了什么？

• 数据请求的通信

  • 输入url：如http://www.baidu.com。其中http为协议，www.baidu.com为网络地址，一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，但是为了让计算机理解这个地址还需要把它解析为IP地址。
  • 应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。
  • 应用层发送HTTP请求：HTTP请求包括请求报头和请求主体两个部分，其中请求报头包含了至关重要的信息，包括请求的方法（GET / POST）、目标url、遵循的协议（http / https / ftp…），返回的信息是否需要缓存，以及客户端是否发送cookie等。
  • 传输层TCP传输报文：TCP协议为传输报文提供可靠的字节流服务，它为了方便传输，将大块的数据分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠：

    发送端先发送一个带有SYN（synchronize）标志的数据包给接收端，在一定的延迟时间内等待接收的回复。
    接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息。
    接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。
    
    在这个过程中，如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求，而再次发送，直到收到回复为止。
  

  • 网络层IP协议查询MAC地址: IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。
  • 数据到达数据链路层: 在找到对方的MAC地址后，就将数据发送到数据链路层传输。
  • 服务器接收数据: 接收端的服务器在链路层接收到数据包，再层层向上直到应用层, 这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。
  • 服务器响应请求: 服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，其中比较常见的是200 OK表示请求成功。301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。
  • 服务器返回相应文件：请求成功后，服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。

• 浏览器渲染

  • 解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。
  • DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像<head>元素或display属性值为none的元素都不在渲染树中。
  • 在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。