2020 web前端面试题及答案大全 (4)

25. js实现instanceof

// 检测l的原型链(__proto__)上是否有r.prototype,若有返回true,否则falsefunction myInstanceof (l, r) { var R = r.prototype while (l.__proto__) { if (l.__proto__ === R) return true } return false}

27. ES6的模块引入和CommonJs区别

28. 严格模式

// 严格模式下, 隐式绑定丢失后this不会指向window, 而是指向undefined \'use strict\' var a = 2 var obj = { a: 1, b: function() { // console.log(this.a) console.log(this) } } var c = obj.b c() // undefined

29. fetch, axios区别

30. typescript缺点

并不是严格意义的js的超集, 与js不完全兼容, 会报错

更多的限制, 是一种桎梏

有些js第三方库没有dts, 有问题

31. 构造函数实现原理

构造函数中没有显示的创建Object对象, 实际上后台自动创建了

直接给this对象赋值属性和方法, this即指向创建的对象

没有return返回值, 后台自动返回了该对象

// 模拟构造函数实现var Book = function(name) { this.name = name; }; //正常用法 var java = new Book(‘Master Java’); //使用代码模拟,在非IE浏览器中测试,IE浏览器不支持 var python = {}; python.__proto__ = Book.prototype; Book.call(python, \'Master Python\');

32. for in 和 for of区别

for in遍历数组会遍历到数组原型上的属性和方法, 更适合遍历对象

forEach不支持break, continue, return等

使用for of可以成功遍历数组的值, 而不是索引, 不会遍历原型

for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

33. JS实现并发控制:

使用消息队列以及setInterval或promise进行入队和出队

34. ajax和axios、fetch的区别

35. promise.finally实现

Promise.prototype.finally = function (callback) { let P = this.constructor; return this.then( value => P.resolve(callback()).then(() => value), reason => P.resolve(callback()).then(() => { throw reason }) );}; 浏览器网络相关

1. reflow(回流)和repaint(重绘)优化

2020 web前端面试题及答案大全

浏览器渲染过程: DOM tree, CSS tree --> Render tree --> Paint

DOM tree根节点为html

渲染从浏览器左上角到右下角

第一次打开页面至少触发一次重绘和回流, 结构如宽高位置变化时, 触发reflow回流;非结构如背景色变化时, 触发repaint重绘. 二者都会造成体验不佳

如何减少重绘和回流?

通过classname或cssText一次性修改样式, 而非一个一个改

离线模式: 克隆要操作的结点, 操作后再与原始结点交换, 类似于虚拟DOM

避免频繁直接访问计算后的样式, 而是先将信息保存下来

绝对布局的DOM, 不会造成大量reflow

p不要嵌套太深, 不要超过六层

2.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;

服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);

浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM Tree);

载入解析到的资源文件,渲染页面,完成。

3.localStorage 与 sessionStorage 与cookie的区别总结

共同点: 都保存在浏览器端, 且同源

localStorage 与 sessionStorage 统称webStorage,保存在浏览器,不参与服务器通信,大小为5M

生命周期不同: localStorage永久保存, sessionStorage当前会话, 都可手动清除

作用域不同: 不同浏览器不共享local和session, 不同会话不共享session

Cookie: 设置的过期时间前一直有效, 大小4K.有个数限制, 各浏览器不同, 一般为20个.携带在HTTP头中, 过多会有性能问题.可自己封装, 也可用原生

4.浏览器如何阻止事件传播,阻止默认行为

阻止事件传播(冒泡): e.stopPropagation()

阻止默认行为: e.preventDefault()

5.虚拟DOM方案相对原生DOM操作有什么优点,实现上是什么原理?

虚拟DOM可提升性能, 无须整体重新渲染, 而是局部刷新.
JS对象, diff算法

6.浏览器事件机制中事件触发三个阶段

事件捕获阶段: 从dom树节点往下找到目标节点, 不会触发函数

事件目标处理函数: 到达目标节点

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwfxg.html