第十一天vue面试题

作者: 小程要谦虚 | 来源:发表于2019-07-16 22:33 被阅读39次

1,ES5/ES6 的继承除了写法以外还有什么区别?

ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this)).

ES6的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法),然后再用子类的构造函数修改this。

ES5的继承时通过原型或构造函数机制来实现。

ES6通过class关键字定义类,里面有构造方法,类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法,否则新建实例报错。因为子类没有自己的this对象,而是继承了父类的this对象,然后对其进行加工。如果不调用super方法,子类得不到this对象。

2,http状态码有哪些?分别是什么意思?

简单版:

        100  Continue   继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息

        200  OK         正常返回信息

        201  Created    请求成功并且服务器创建了新的资源

        202  Accepted   服务器已接受请求,但尚未处理

        301  Moved Permanently  请求的网页已永久移动到新位置。

        302  Found       临时性重定向。

        303  See Other   临时性重定向,且总是使用 GET 请求新的 URI。

        304  Not Modified 自从上次请求后,请求的网页未修改过。

        400  Bad Request  服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。

        401  Unauthorized 请求未授权。

        403  Forbidden   禁止访问。

        404  Not Found   找不到如何与 URI 相匹配的资源。

        500  Internal Server Error  最常见的服务器端错误。

        503  Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。

完整版

3,浏览器是如何渲染页面的?

浏览器从HTTP服务器获取html文档,到呈现页面给用户,会经过以下几个步骤:

简述浏览器渲染过程

解析HTML以构建DOM树:渲染引擎开始解析HTML文档,转换树中的html标签或js生成的标签到DOM节点,它被称为 — 内容树。

构建渲染树:解析CSS(包括外部CSS文件和样式元素以及js生成的样式),根据CSS选择器计算出节点的样式,创建另一个树 — 渲染树。

布局渲染树: 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。

绘制渲染树: 遍历渲染树,每个节点将使用UI后端层来绘制。

1、解析文档构建DOM树

浏览器的解析内容可以分为三个部分:

HTML/XHTML/SVG:解析这三种文件后,会生成DOM树(DOM Tree)

CSS:解析样式表,生成CSS规则树(CSS Rule Tree)

JavaScript:解析脚本,通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree,与用户进行交互。

以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同,具体在后文进行讨论。

2、构建渲染树

解析文档完成后,浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上,并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree(渲染树)。此处需要注意:

Render Tree和DOM Tree的区别在于,类似Head或display:node之类的东西不会放在渲染树中;

将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器,为了提高该过程的性能,DOM树应该尽量小,CSS Selector应该尽量使用id和class,避免过度层叠。

3、布局与绘制渲染树

解析position, overflow, z-index等等属性,计算每一个渲染树节点的位置和大小,此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制(repain)。注意:

渲染树的节点,在Gecko中称为frame,而在webkit中称为renderer;

reflow和repaint是两个不同的概念,其区别会在后文进行探讨。

4,typeof和instanceof相同点与不同点

相同点

typeof和instanceof都用来判断一个变量的数据类型。

不同点:

typeof返回值是一个字符串, 用来说明变量的数据类型。

typeof一般只能返回如下六个数据类型,null会返回Object,若参数为引用类型,始终返回object :number, boolean, string, function, object, undefined。

instanceof返回一个布尔值。

instanceof一般用来判断一个变量是否来自某个引用类型的实例,判断在其原型链中是否存在一个构造函数的prototype属性,如:

console.log([]instanceofArray);// trueconsole.log([]instanceofObject);// true

可以看到的是[]是来自于Array是没有问题的,返回值为true;但是[] instanceof Object也为true是我们不想看到的,这是因为在javascript中,Object是最顶级的数据类型,所有的引用类型最终都会指向Object

对于这种情况,我们可以使用ES6新增的Array.isArray([])来进行判断,也可以通过[].constructor === Array来判断

5,如何解决回调地狱?请手写代码

详情

相关文章

  • 前端面试比较好的文章

    1、前端开发面试题2、vue面试题总汇

  • (web前端) 框架高频面试题

    ***************** Vue 面试题 ***************** 1.聊聊对vue的理解 v...

  • vue面试题第十一天

    1:什么是函数柯里化及使用场景 柯里化(Currying)指的是将原来接受两个参数的函数变成新的接受一个参数的函数...

  • 第十一天vue面试题

    1,ES5/ES6 的继承除了写法以外还有什么区别? ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法...

  • vue面试题(第十一天)

    1.ES5/ES6 的继承除了写法以外还有什么区别? ES5和ES6继承最大的区别就是在于:1.ES5先创建子类,...

  • 2022年web前端面试题

    web前端面试题分为:html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面...

  • 最全前端面试题

    Vue面试题 生命周期函数面试题 1.什么是 vue 生命周期 Vue 实例从创建到销毁的过程,就是生命周期。也就...

  • vue原理面试题资源整理

    vuex面试题 Vue生命周期 周期2 Vue通信 父子 兄弟 Vue响应式原理 MVVM Vue axios原理...

  • Vue文档

    vue教程精简版 2019前端面试题 Vue管理后台框架选择推荐

  • 前端vue面试题分享(附答案)

    本篇文章给大家分享一些常见的前端vue面试题,有一定的参考价值,希望对大家有所帮助。 vue面试题 vue.js的...

网友评论

    本文标题:第十一天vue面试题

    本文链接:https://www.haomeiwen.com/subject/bzutlctx.html