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() // undefined29. 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(重绘)优化
浏览器渲染过程: 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树节点往下找到目标节点, 不会触发函数
事件目标处理函数: 到达目标节点