码迷,mamicode.com
首页 > 其他好文 > 详细

一些面试题整理

时间:2019-09-27 15:00:08      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:use   通过   变量提升   cli   top   字体   请求   scale   最简   

抄别人的 觉得可以 就mark了

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

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

二、CSS和JS的位置会影响页面效率,为什么?

css在加载过程中不会影响到DOM树的生成,但是会影响到Render树的生成,进而影响到layout,所以一般来说,style的link标签需要尽量放在head里面,因为在解析DOM树的时候是自上而下的,而css样式又是通过异步加载的,这样的话,解析DOM树下的body节点和加载css样式能尽可能的并行,加快Render树的生成的速度。

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

三、描述一下this

this,函数执行的上下文,可以通过apply,call,bind改变this的指向。对于匿名函数或者直接调用的函数来说,this指向全局上下文(浏览器为window,nodejs为global),剩下的函数调用,那就是谁调用它,this就指向谁。当然还有es6的箭头函数,箭头函数的指向取决于该箭头函数声明的位置,在哪里声明,this就指向哪里。

四、深拷贝和浅拷贝的区

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

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

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

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

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 类型,返回对应类型
如果是复杂数据类型,递归。
考虑循环引用的问题

五、 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 一致,仅参数处理略有差别。如下:

技术图片

六、什么是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)

七、异步加载JS脚本的方式有哪些?
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!