Js 归纳

[aJean]

请先关注 Js 运行时

深度优化

总结一下大概有 inline function，编译时的常量折叠，属性访问优化等方式

• 快速属性访问
• 结合引擎优化

语言基础

主要是和 ecma script 以及运行机制相关的内容：语法，语句，运算符，上下文等

运算优先级

主要是明确各种优先级的顺序，看一个高频面试题

• ()运算：20
• 成员访问、new 带参、函数调用：19
• new 无参：18
• 后置自增、自减：17
• !、~、--、++、typeof、void、delete：16

// member expression > new 无参数 列表 > () 这里是函数调用
new new Foo.getName()

隐式转换

关键是类型计算策略和 toPrimitive 方法，同样是高频面试题

// 首先是 ! 优先级高于 ==，右侧为 false
// 然后两端转数字 Number([]) == Number(false)
[] == ![] \\true

箭头函数

const name = 123;
const foo = () => {console.log(this.name)};

// 结果 123，箭头函数没有自身的 this，只会去上层作用域查找
foo.call({name: 456})

Eventloop

看一个问题，执行结果是 1324

document.body.addEventListener('click', function() {
  Promise.resolve(0).then(() => console.log(2));
  console.log(1);
});

document.body.addEventListener('click', function() {
  Promise.resolve(0).then(() => console.log(4));
  console.log(3);
});

// 考察宏任务和微任务的执行顺序
document.body.click();

同源策略

如何理解同源策略：协议相同、域名相同、端口相同。起初知识针对 cookie，随着浏览器安全的发展，目前有三种行为受到限制

• cookie、localStorage 和 indexDB 无法读取
• 本地 dom 无法获得
• ajax 请求不能发送

更进一步的 csp，可以控制更多，包括网络资源，脚本执行，音视频播放等

攻击防范

• xss 反射型、存储型，主要通过内容过滤和安全字符来防治，比如 vue 的 decodingMap；react jsx 本身就有安全字符的机制，同时提供 dangerouslySetInnerHTML 让用户可以传 string
• csrf 跨站请求伪造，可以通过验证码、referrer、token 等方式拦截
• 人机交互验证

安全沙箱

渲染进程通过主进程与网络、ui、gpu 进程通信

• 渲染进程就是一个安全沙箱，不允许内部访问系统资源
• 渲染进程内部需要与系统交互的部分都转移出去

浏览器内核控制

• 渲染进程对持久存储的访问通过 ipc 与 内核交互，比如 cookie、localStorage、indexDb
• 渲染进程把位图传给浏内核，浏览器再调用 gpu 输出
• 渲染进程把事件发给内核，内核判断事件触发的范围

站点隔离

简单的说就是把 iframe 也用一个独立的渲染进程去处理，代替以前 tab 级别渲染进程的架构

渲染进程共用

同一站点策略，从 a 中打开 b，a b 主域名相同，不使用 rel= noopener

// 浏览上下文组 （window 对象，历史记录，滚动条位置）
window.opener | const win = window.open()