一些面试题整理

抄别人的 以为能够 就mark了

1、说说从输入URL到看到页面发生的全过程，越详细越好。

一、首先浏览器主进程接管，开了一个下载线程。
二、而后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。
三、将下载完的内容转交给Renderer进程管理。
四、Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，因此通常我会把link标签放在页面顶部。
五、解析绘制过程当中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的从新下载资源。
六、css rule tree和dom tree生成完了以后，开始合成render tree，这个时候浏览器会进行layout，开始计算每个节点的位置，而后进行绘制。
七、绘制结束后，关闭TCP链接，过程有四次挥手。

2、CSS和JS的位置会影响页面效率，为何？

css在加载过程当中不会影响到DOM树的生成，可是会影响到Render树的生成，进而影响到layout，因此通常来讲，style的link标签须要尽可能放在head里面，由于在解析DOM树的时候是自上而下的，而css样式又是经过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽量的并行，加快Render树的生成的速度。

js脚本应该放在底部，缘由在于js线程与GUI渲染线程是互斥的关系，若是js放在首部，当下载执行js的时候，会影响渲染行程绘制页面，js的做用主要是处理交互，而交互必须得先让页面呈现才能进行，因此为了保证用户体验，尽可能让页面先绘制出来。

3、描述一下this

this，函数执行的上下文，能够经过apply，call，bind改变this的指向。对于匿名函数或者直接调用的函数来讲，this指向全局上下文（浏览器为window，nodejs为global），剩下的函数调用，那就是谁调用它，this就指向谁。固然还有es6的箭头函数，箭头函数的指向取决于该箭头函数声明的位置，在哪里声明，this就指向哪里。

4、深拷贝和浅拷贝的区

深拷贝和浅拷贝是针对复杂数据类型来讲的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。别是什么？实现一个深拷贝

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是彻底隔离的，互不影响，对一个对象的修改并不会影响另外一个对象。

浅拷贝是会将对象的每一个属性进行依次复制，可是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

浅拷贝只最第一层属性进行了拷贝，当第一层的属性值是基本数据类型时，新的对象和原对象互不影响，可是若是第一层的属性值是复杂数据类型，那么新对象和原对象的属性值其指向的是同一块内存地址。
深拷贝实现

1.深拷贝最简单的实现是: JSON.parse(JSON.stringify(obj))

JSON.parse(JSON.stringify(obj)) 是最简单的实现方式，可是有一些缺陷：

1.对象的属性值是函数时，没法拷贝。
2.原型链上的属性没法拷贝
3.不能正确的处理 Date 类型的数据
4.不能处理 RegExp
5.会忽略 symbol
6.会忽略 undefined

2.实现一个 deepClone 函数

若是是基本数据类型，直接返回
若是是 RegExp 或者 Date 类型，返回对应类型
若是是复杂数据类型，递归。
考虑循环引用的问题

5、 call/apply 的实现原理是什么？

call 和 apply 的功能相同，都是改变 this 的执行，并当即执行函数。区别在于传参方式不一样。

func.call(thisArg, arg1, arg2, ...)：第一个参数是 this 指向的对象，其它参数依次传入。

func.apply(thisArg, [argsArray])：第一个参数是 this 指向的对象，第二个参数是数组或类数组。

一块儿思考一下，如何模拟实现 call ？
首先，咱们知道，函数均可以调用call，说明 call 是函数原型上的方法，全部的实例均可以调用。即:

Function.prototype.call

在 call 方法中获取调用 call() 函数
若是第一个参数没有传入，那么默认指向window / global(非严格模式)
传入 call 的第一个参数是 this 指向的对象，根据隐式绑定的规则，咱们知道 obj.foo(),foo() 中的 this 指向 obj;所以咱们能够这样调用函数 thisArgs.func(...args)
返回执行结果

apply 的实现思路和 call 一致，仅参数处理略有差异。以下：

6、什么是BFC？BFC的布局规则是什么？如何建立BFC？

Box 是 CSS 布局的对象和基本单位，页面是由若干个Box组成的。

元素的类型 和 display 属性，决定了这个 Box 的类型。不一样类型的Box 会参与不一样的 Formatting Context。

Formatting Context

Formatting Context 是页面的一块渲染区域，而且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互做用。
Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，FFC (Flex formatting context) 和 GFC (Grid formatting context)。FFC 和 GFC 为 CC3 中新增。

BFC布局规则

• BFC内，盒子依次垂直排列。
• BFC内，两个盒子的垂直距离由 margin 属性决定。属于同一个BFC的两个相邻Box的margin会发生重叠【符合合并原则的margin合并后是使用大的margin】
• BFC内，每一个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即便在存在浮动的状况下也是如此。除非建立新的BFC。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 计算BFC的高度时，浮动元素也参与计算。

  如何建立BFC

• 根元素
• 浮动元素（float 属性不为 none）
• position 为 absolute 或 fixed
• overflow 不为 visible 的块元素

• display 为 inline-block, table-cell, table-caption

  BFC 的应用

1.防止 margin 重叠 (同一个BFC内的两个相邻Box的 margin 会发生重叠，触发生成两个BFC，即不会重叠)
2.清除内部浮动 (建立一个新的 BFC，由于根据 BFC 的规则，计算 BFC 的高度时，浮动元素也参与计算)
3.自适应多栏布局 (BFC的区域不会与float box重叠。所以，能够触发生成一个新的BFC)

7、异步加载JS脚本的方式有哪些？

刷新评论 刷新页面 返回顶部