整理

内容

• 浏览器渲染
• 执行上下文
• js 事件循环机制
• this 作用域
• new
• 原型 原型链
• 防抖&节流
• 闭包
• 深浅拷贝
• 继承: call apply bind
• Promise & Generator & async await
• 跨域
• 移动端适配 rm rem pm
• vue
• vuex
• webpack
• es6

---

内容拓展

浏览器渲染

1. DNS 查询
2. TCP 连接
3. HTTP 请求即响应
4. 服务器响应
5. 客户端渲染

其中浏览器对内容的渲染包括：

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。

框架

MVVM： Model：数据模型； View：界面； ViewModel：作为桥梁负责沟通 View 和 Model
核心：数据双向绑定
类型：

1. 脏数据检测
   调用 watch 函数，然后再次调用 $digest 循环直到发现没有变化。循环至少为二次 ，至多为十次。
2. 数据劫持
   vue 实现双向绑定：

• 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
• 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
• 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

浏览器

1. 事件机制

• window 往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往 window 传播，遇到注册的冒泡事件会触发
  **2. 注册事件 **
  addEventListener
  stopPropagation：阻止事件冒泡的，也可以阻止捕获事件
  stopImmediatePropagation：实现阻止事件，还能阻止该事件目标执行别的注册事件
  3. 事件代理
  如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上
  优点：节省内存；不需要给子节点注销事件
  4. 跨域
  浏览器出于安全考虑，有同源策略。如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。
  解决方法：
• JSONP：只限于 get 请求，利用 <script> 标签没有跨域限制的漏洞。通过 <script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时。
• CORS
• document.domain： 只能用于二级域名相同的情况下
• postMessage：通常用于获取嵌入页面中的第三方页面数据。一个页面发送消息，另一个页面判断来源并接收消息
  5. Event loop
• 概念
  浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务
  微任务（microtask-> jobs）：process.nextTick ，promise ，Object.observe ，MutationObserver
  宏任务（macrotask-> task）：script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering
• 顺序

1. 执行同步代码，这属于宏任务
2. 执行栈为空，查询是否有微任务需要执行
3. 执行所有微任务
4. 必要的话渲染 UI
5. 然后开始下一轮 Event loop，执行宏任务中的异步代码
6. 渲染机制
7. 处理 HTML 并构建 DOM 树。
8. 处理 CSS 构建 CSSOM 树。
9. 将 DOM 与 CSSOM 合并成一个渲染树。
10. 根据渲染树来布局，计算每个节点的位置。
11. 调用 GPU 绘制，合成图层，显示在屏幕上。

性能

1. DNS 预解析
2. 缓存：强缓存和协商缓存
强缓存: 通过两种响应头实现: Expires 和 Cache-Control

Expires: Wed, 22 Oct 2018 08:41:00 GMT //表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期
Cache-control: max-age=30 // 优先级高于 Expires 。该属性表示资源会在 30 秒后过期，需要再次请求

协商缓存:协商缓存需要请求，如果缓存有效会返回 304。 Last-Modified 表示本地文件最后修改日期,If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级比 Last-Modified 高
缓存策略：

• 对于某些不需要缓存的资源，可以使用 Cache-control: no-store ，表示该资源不需要缓存
• 对于频繁变动的资源，可以使用 Cache-Control: no-cache 并配合 ETag 使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新。
• 对于代码文件来说，通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用，然后对文件进行指纹处理，一旦文件名变动就会立刻下载新的文件。
  3. 使用 HTTP / 2.0
  优点：引入了多路复用，能够让多个请求使用同一个 TCP 链接，极大的加快了网页的加载速度。并且还支持 Header 压缩，进一步的减少了请求的数据大小。
  3. 预加载

<link rel="preload" href="http://example.com" />

4. 预渲染

<link rel="prerender" href="http://example.com" />

5. 优化渲染

• 懒执行
• 懒加载
  原理：只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

// 图片的预加载
 var images = new Array();
 function preloader() {
   if(document.images){
     for (i = 0; i < document.images.length; i++) {
       images[i] = new Image();
       images[i].src = document.images[i].src
     }
   }
 }
 function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
       window.onload = func;
   } else {
       window.onload = function() {
           if (oldonload) {
               oldonload();
           }
           func();
       }
   }
 }
 addLoadEvent(preloader);   

6. 使用 Webpack 优化项目

• 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
• 使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码
• 优化图片，对于小图可以使用 base64 的方式写入文件中
• 按照路由拆分代码，实现按需加载
• 给打包出来的文件名添加哈希，实现浏览器缓存文件

安全

1. XSS 跨网站指令码(Cross-site scripting)
攻击：通过修改 HTML 节点或者执行 JS 代码来攻击网站
防御：1. 转义输入输出的内容，对于引号，尖括号，斜杠进行转义；富文本通过白名单过滤
**2. CSP(内容安全策略) : **用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等，通过HTTP Header 中的 Content-Security-Policy 来开启 CSP，

2. CSRF 跨站请求伪造(Cross-site request forgery) : 挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法(利用用户的登录态发起恶意请求)
攻击：假设网站中有一个通过 Get 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口;如果接口是 Post 提交的，就相对麻烦点，需要用表单来提交接口
防御:
- Get 请求不对数据进行修改
- 不让第三方网站访问到用户 Cookie (设置SameSite)
- 阻止第三方网站请求接口 (验证 Referer)
- 请求时附带验证信息，比如验证码或者 token (每次发起请求时将 Token 携带上，服务器验证 Token 是否有效)

3. 密码安全
防御: 对密码加盐，然后进行几次不同加密算法的加密。
// 加盐也就是给原密码添加字符串，增加原密码长度 sha256(sha1(md5(salt + password + salt)))