Day4 - 前端高频面试题之浏览器相关

传送门>>>

上一篇： Day3 - 前端高频面试题之基础版

下一篇： Day5 - 前端高频面试题之计算机网络相关

一、什么是options预请求？

options预请求是浏览器自主发起的，分别根据预检请求报文中的 Access-Control-Request-Method、Access-Control-Request-Headers来判断该请求是不是服务器容许的提交方式和容许的请求头字段；

服务器基于从预检请求得到的信息来判断，是否接受接下来的实际请求。

二、解释一下事件冒泡和事件捕获呢？如何阻止冒泡？如何阻止默认事件？手写一个事件委托的例子呢？

一个完整的JS事件流是从window开始，最后回到window的一个过程； 事件流被分为三个阶段(1 ~ 5)捕获过程、(5 ~ 6)目标过程、(6 ~ 10)冒泡过程。

事件冒泡就是事件从最深的节点开始，而后逐步向上传播事件的过程；

事件捕获就是从window开始，逐步向最深的节点传播事件的过程

// 事件委托：就是把事件处理器添加到父元素，等待子元素事件冒泡，而且父元素可以经过target（IE为srcElement）判断是哪一个子元素，从而作相应处理

var ul = document.getElementByTagName('ul)[0]
ul.onclick = function(e) {
  e = e || window.event
  alert(e.target.innerHtml)
}

// 阻止冒泡: window.event? window.event.cancelBubble = true(IE) : e.stopPropagation()
// 阻止默认事件: e.preventDefault() || window.event.returnValue = false(IE)

复制代码

三、请描述一下内存泄漏的缘由和场景？那js的垃圾回收机制有哪些？

内存泄漏指的是浏览器不能正常的回收内存的现象

1. 全局变量引发的内存泄漏
2. 闭包引发的内存泄漏
3. dom清空或删除时，事件未清除致使的内存泄漏

---

当函数执行结束，局部变量就不须要了，这时候就能够释放他们的内存。

两种回收机制：

• 引用计数法

跟踪记录每一个值被引用的次数。当声明一个变量并将引用类型的值赋给该变量时，则这个值的引用次数就是1。若是同一个值又被赋给另外一个变量，则该值的引用次 数加1.相反，若是包含对这个值引用的变量又取得另一个值，则这个值的引用次数减1.当这个值的引用次数变成0时，则说明没有办法访问这个值了，所以就 能够将其占用的内存空间回收回来

• 标记清除法 标记清除的算法分为两个阶段，标记(mark)和清除(sweep) 第一阶段从引用根节点开始标记全部被引用的对象，第二阶段遍历整个堆，把未标记的对象清除。

四、DOM事件中target和currentTarget的区别

• event.target 返回触发事件的元素
• event.currentTarget 返回绑定事件的元素

五、跨域的几种方式？

• （利用script标签的跨域能力）跨域
• websocket（html5的新特性，是一种新协议）跨域
• 设置代理服务器（由服务器替咱们向不一样源的服务器请求数据）
• CORS（跨源资源共享，cross origin resource sharing）
• iframe跨域
• postMessage(包含iframe的页面向iframe传递消息)

六、说一下浏览器的缓存机制呢

浏览器缓存机制有两种，一种为强缓存，一种为协商缓存。

对于强缓存，浏览器在第一次请求的时候，会直接下载资源，而后缓存在本地，第二次请求的时候，直接使用缓存。 对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，若是失效则使用缓存。

• 强缓存方案

Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源何时会过时。Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。 Cache-control：max-age，表示该资源多少时间后过时，解决了客户端和服务端时间必须同步的问题，

• 协商缓存方案

If-None-Match/ETag：缓存标识，对比缓存时使用它来标识一个缓存，第一次请求的时候，服务端会返回该标识给客户端，客户端在第二次请求的时候会带上该标识与服务端进行对比并返回If-None-Match标识是否表示匹配。 Last-modified/If-Modified-Since：第一次请求的时候服务端返回Last-modified代表请求的资源上次的修改时间，第二次请求的时候客户端带上请求头If-Modified-Since，表示资源上次的修改时间，服务端拿到这两个字段进行对比。

七、请详细描述一下从输入URL到页面加载的全过程

主干流程：浏览器构建HTTP Request请求、网络传输、服务器构建HTTP Response请求、网络传输、浏览器渲染页面。

1、构建请求

1. 应用层进行DNS解析

   • 这里使用DNS预解析，能够根据浏览器定义的规则，提早解析以后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提升网站的访问速度

2. 应用层生成http请求报文

   • HTTP请求报文包括起始行、首部和主体部分
   • 起始行可能：GET https://baidu.com/ HTTP/1.1
   • 首部包括：HOST keep-alive Accpet-Encoding Accept-Language User-Agent Cookie等
   • 首部和主体内容之间有一个回车换行(CRLF)，主体内容即要传输的内容。若是是get请求，则主体内容为空

3. 传输层创建TCP链接 （创建三次握手）

   传输协议主要有UDP（无链接的协议、不可靠）和TCP（有链接、可靠）两种

   TCP可靠主要表如今：

   • 接收方会对接收到的数据进行确认
   • 发送方会重传接收方未确认的数据
   • 接收方会对接收到的数据按照正确的顺序进行从新排列，并删除重复的数据
   • 提供了控制拥挤的机制

   

   • 三次握手：

     • 第一次握手：主机A发往主机B，主机A初始序号是X，设置SYN（同步）位，未设置ACK（确认）位
     • 第二次握手：主机B发往主机A，主机B初始序号是Y，ACK（确认号）是X+1，X+1暗示已经收到主机A发来主机B的同步序号。设置ACK位和SYN位
     • 第三次握手：主机A发往主机B，主机A初始序号是X+1，ACK是Y+1，Y+1暗示已经收到主机A发来主机B的同步序号。设置ACK位，未设置SYN位。

     三次握手解决的不只仅有序号问题，还解决了包括窗口大小、MTU(Maximum Transmission Unit,最大传输单元)，以及所指望的网络延时等其余问题。

   • 构建TCP请求会增长大量的网络时延，经常使用的优化方式以下所示

     • 资源打包，合并请求
     • 多使用缓存，减小网络传输
     • 使用keep-alive创建持久链接
     • 使用多个域名，增长浏览器的资源并发加载数，或者使用HTTP2的管道化链接的多路复用技术

4. 网络层使用IP协议来选择路线

5. 数据链路层实现网络相邻节点间的可靠的数据通讯

6. 物理层传输数据

2、网络传输

​ 从客户机到服务器须要经过许多网络设备， 通常地，包括集线器、交换器、路由器等

3、服务器处理及反向传输

4、浏览器渲染

• 首先浏览器从服务器接收到html代码，而后开始解析html
• 根据html代码自顶向下构建DOM树，而且同时构建渲染树
• 遇到js文件加载执行，将阻塞DOM树的构建
• 遇到css文件，将阻塞渲染树的构建
• script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，可是js文件执行须要在DOM树构建完成以后
• script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行
• 因此script标签最好放在标签的前面，由于放在全部body中的标签后面就不会出现网页加载时出现空白的状况，能够持续的给用户提供视觉反馈，同时在有些状况下，会下降错误的发生。
• 而css标签应该放在标签之间，由于若是放在标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得再也不从新渲染整个页面，这样形成了资源的浪费。效率也不高。若是放在之间，浏览器边构建边渲染，效率要高的多。总的来讲，就是提升性能，提升网页的可读性。

5、重绘和回流

• 页面生成之后，脚本操做、样式表变动，以及用户操做均可能触发重绘和回流
  • 回流是指窗口尺寸被修改、发生滚动操做，或者元素位置相关属性被更新时会触发布局过程，也就是从新进行流式布局的过程。发生在Render树上，常说的脱离文档流，就是指脱离渲染树Render Tree
  • 重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程，在绘制过程当中要从新计算元素的视觉信息，使元素呈现新的外观。是发生在渲染层 render layer上
• 减小回流次数的方法
  • 不要一条一条地修改DOM样式，而是修改className或者修改style.cssText
  • 在内存中屡次操做节点，完成后再添加到文档中去
  • 对于一个元素进行复杂的操做时，能够先隐藏它，操做完成后再显示
  • 在须要常常获取那些引发浏览器回流的属性值时，要缓存到变量中
  • 不要使用table布局，由于一个小改动可能会形成整个table从新布局。并且table渲染一般要3倍于同等元素时间
• 减小重绘范围的方法
  • 将须要屡次重绘的元素独立为render layer渲染层，如设置absolute，能够减小重绘范围
  • 对于一些进行动画的元素，能够进行硬件渲染，从而避免重绘和回流

八、http状态码

http状态码是表示服务器对请求的响应状态， 主要分为如下几个部分

• 1**：这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束
• 2**：表示请求成功
• 3**：表示重定向
• 4**：表示客户端错误
• 5**：表示服务器端错误
• 100（continue），客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收
• 200（OK），表示请求成功，请求所但愿的响应头或数据体将随此响应返回。
• 202（Accepted），服务器已接受请求，但还没有处理。
• 204（No-Content），服务器成功处理了请求，但不须要返回任何实体内容
• 205（Reset-Content），服务器成功处理了请求，且没有返回任何内容。可是与204响应不一样，返回此状态码的响应要求请求者重置文档视图。该响应主要是被用于接受用户输入后，当即重置表单，以便用户可以轻松地开始另外一次输入。
• 206（Partial-Content），服务器已经成功处理了部分 GET 请求。
• 301（Moved-Permanently），永久性重定向
• 302（Moved-Temporarily），暂时性重定向
• 304（Not-Modified），浏览器端缓存的资源依然有效
• 400（Bad-Reques），请求有误，当前请求没法被服务器理解。
• 401（Unauthorized），当前请求须要用户验证。
• 403（Forbidden），服务器已经理解请求，可是拒绝执行它。
• 404（Not-Found），请求的资源没有被找到
• 500（Interval Server Error），服务器内部错误
• 502（Bad GateWay），网关出错
• 503（Service Unavailable），因为临时的服务器维护或者过载，服务器当前没法处理请求。
• 504（Gateway Timeout），做为网关或者代理工做的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应。