语言特性

解释型语言和编译型语言区别

代码在执行时才被解释器一行行动态翻译和执行，而不是在执行之前就完成翻译。

强类型语言和弱类型语言

要求变量的使用要严格符合定义，所有变量都必须先定义后使用。

use strict是什么意思 ? 使用它区别是什么？

use strict 是一种 ECMAscript5 添加的（严格模式）运行模式，这种模式使得 Javascript 在更严格的条件下运行。设立严格模式的目的如下：

  • 消除 Javascript 语法的不合理、不严谨之处，减少怪异行为;
  • 消除代码运行的不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的 Javascript 做好铺垫。

区别：

  • 禁止使用 with 语句。
  • 禁止 this 关键字指向全局对象。
  • 对象不能有重名的属性，为只读属性赋值会抛出 TypeError，对不可配置的（nonconfigurable）的属性使用 delete 操作符会抛出 TypeError，为不可扩展的（nonextensible）的对象添加属性会抛出 TypeError。
  • 不允许意外创建全局变量
  • delete删除变量会抛错
  • 变量名不能使用保留字
  • 函数：
    • 命名函数的参数必须唯一
    • arguments和形参是独立的 ```javascript //非严格模式：修改会反映到 arguments 中 function showValue(value{ value = “Foo”; alert(value); //“Foo” alert(arguments[0]); //非严格模式：”Foo” } showValue(“Hi”);

//严格模式：修改不会反映到 arguments 中 function showValue(value){ “use strict” value = “Foo”; alert(value); //“Foo” alert(arguments[0]); //严格模式：”Hi” }

showValue(“Hi”);

  2.    - 与变量类似，严格模式对函数名也做出了限制，不允许用 implements、interface、let、package、private、protected、public、static 和 yield等作为函数名
  3.    - if语句声明函数会有语法错误
  4. - 可以在` eval()`中声明变量和函数，但这些变量或函数只能在被求值的特殊作用域中有效，随后就将被销毁。
  5. ```javascript
  6. "use strict";
  7. var result = eval("var x=10, y=11; x+y");
  8. alert(result); //=> 21
  11. //使用 eval()创建变量
  12. //非严格模式：弹出对话框显示 10
  13. //严格模式：调用 alert(x)时会抛出 ReferenceError
  15. function doSomething(){ 
  16.   eval("var x=10"); 
  17.   alert(x);
  18. }

  • 去掉了 JavaScript 中的八进制字面量：以 0 开头的八进制字面量过去经常会导致很多错误。在严格模式下，八进制字面量已经成为无效的语法了。

    错误类型

  • Sentry上报错误类型

    • js执行错误❌
      • SyntaxError
        • 尝试解析语法上不合法的代码的错误
      • ReferenceError
        • 引用不存在的变量
      • SyntaxError
        • 解析语法上不合法的代码
      • TypeError
        • 对象用来表示值的类型非预期类型
      • RangeError
        • 当一个值不在其所允许的范围或者集合中
      • URIError
      • EvalError
    • 加载错误❌
      • ChunkLoadError
    • 未处理的promise错误 ❌
    • fetch和xhr错误的捕获 ✅
    • 跨域错误script error ❌
    • iframe异常 ❌
    • js框架错误 ❌
    • 用户自己创建Error错误对象✅

      window.onload和DOMContentload的区别

      JS创建10个a标签，点击时弹窗对于序号

      Promise解决了什么问题

垃圾回收机制

概念：
【时机】

  1. V8引擎执行代码的过程中，遇到函数时会为其创建一个函数的执行上下文环境并压入调用栈，函数作用域包含了函数中声明的所有变量。函数执行完毕后，对应的执行上下文会从栈顶弹出，函数的作用域也会随之销毁，其包含的遍历会被统一释放并自动回收。
  2. 当对象区的内存快被写满时，会执行一次垃圾回收操作。

【位置】V8垃圾回收主要出现在内存的

  • 新生代内存区：附垃圾回收器，Scavenge算法
  • 老生代内存区。：主垃圾回收器，标记清除算法

JavaScript - 图1
【如何回收】

  1. 采用可访问性算法来判断堆中的对象是否是活动对象。

从GC root根对象开始访问,遍历到的对象称为活动对象，反之是非活动对象。

  • 全局的 window 对象（位于每个 iframe 中）
  • 文档 DOM 树，由可以通过遍历文档到达的所有原生 DOM 节点组成
  • 存放栈上变量。
  1. 回收非活动对象所占据的内存。（Scavenge算法是复制活动对象到空闲区，所以也不需要进行内存整理。）
  2. 内存整理，整理不连续的内存碎片。

Scavenge算法和标记清除算法的区别除了第二三步，
Scavenge算法会采用对象晋升策略，移动经过两次垃圾回收依然存活的对象到老生代中，此外，Scavenge算法

内存泄漏

【内存泄漏的场景】

  1. 全局变量使用
  2. 闭包使用
  3. dom节点移除后要赋值为null：使用变量缓存 DOM 节点引用后删除了节点，如果不将缓存引用的变量置空，依然进行不了 GC，也就会出现内存泄漏。
  4. 遗忘的定时器
  5. 事件监听：当事件监听器在组件内挂载相关的事件处理函数，而在组件销毁时不主动将其清除时，其中引用的变量或者函数都被认为是需要的而不会进行回收，如果内部引用的变量存储了大量数据，可能会引起页面占用内存过高，这样就造成意外的内存泄漏。React 的useEffect里面定义监听函数需要注意。
  6. Map、Set、Object对象存储时是强引用
  7. console.log

【排查、定位、修复】
https://juejin.cn/post/6984188410659340324#heading-9

说说原型和原型链

继承的八种方法

输入URL到渲染

https://juejin.cn/post/6844904155077672968

instance of的作用和原理

  • 初级：说出instanceof的作用
  • 中级：

  • 高级：

    重排与重绘

  • 初级：说清楚什么是重排，什么是重绘，在什么情况下会发生会触发哪一种？两者的性能差异

  • 中级：重排跟流式布局的关系，如何规避or避免重排？30FPS怎么衡量，怎么优化？
  • 高阶：浏览器的渲染流程是什么样的？

怎么展开加速的，3D加速有什么缺点？

聊聊你对position的理解

  • 初级：能完整说出可选值：static/absolute/relative/fixed/sticky
  • 中级：能说出流式布局的基本定义，以及对布局的影响
  • 高级：

实现add(1)(2)(3)

URL和URI的区别

URI = Uniform Resource Identifier 统一资源标志符。张三这个人，可能有多个
URL = Uniform Resource Locator 统一资源定位符。


异步

Ajax、fetch、和axios的区别

都可以用来实现异步网络请求，但是维度不一样。
1、Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。可以用XMLRequest实现或fetch实现。
2、fetch号称是AJAX的替代品，脱离了XHR，是ES规范里新的实现方式，使用了ES6中的promise对象，Fetch的代码结构比起ajax简单多。
fetch的缺点：

  • fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
  • fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: ‘include’})
  • fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
  • fetch没有办法原生监测请求的进度，而XHR可以。

3、Axios是基于Promise封装的HTTP客户端，其特点如下：

  • 浏览器端发起XMLHttpRequests请求
  • node端发起http请求
  • 支持Promise API
  • 监听请求和返回
  • 对请求和返回进行转化
  • 取消请求
  • 自动转换json数据
  • 客户端支持抵御XSRF攻击

Promise解决了什么问题

Promise的缺点

  1. 无法取消
  2. 若不设置回调函数，Promise内部会抛出错误，不会流到外部

  3. 链式语法总觉得不好看，不优雅

    Promise.all/Promise.any/Promise.race

    |

    | 返回值 | 什么时候成功 | 什么时候失败 | | —- | —- | —- | —- | | Promise.all | promise,resolve回调是数组 | 所有都完成 | 第一个失败 | | Promise.any | 返回第一个成功的promise | 第一个成功 | 都失败 | | Promise.race | 第一个有结果的promise | 第一个成功 | 第一个失败 | | Promise.allSellted | promise，所有都已经fulfilled或rejected | 所有都有结果 |

    |

【区别】

  • Promise.all 和Promise.allSellted:
    • Promise.all 是第一个失败，立即返回。
    • 后者是关心所有promise的结果，使用与不互相依赖的异步任务
  • Promise.any和Proise.race
    • Promise.any 关心第一个成功
    • Promise.race关心第一个有结果

      Async/Await的实现原理

      【缺点】
      滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性

模块化

垃圾回收机制

如何排查内存泄漏