面试复习要点

2021-01-22  本文已影响0人  三天两觉_

理解 JavaScript 中的执行上下文和执行栈-转载

let a = 'Hello World!';

function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}

function second() {
  console.log('Inside second function');
}

first();
console.log('Inside Global Execution Context');
image.png 
ExecutionContext = {
  //this的绑定
  ThisBinding = <this value>,
  //词法环境
  LexicalEnvironment = { ... },
  //var声明的变量的环境
  VariableEnvironment = { ... },
}

在 JavaScript 代码执行前，执行上下文将经历创建阶段。在创建阶段会发生三件事：

let a = 20;
const b = 30;
var c;

function multiply(e, f) {
 var g = 20;
 return e * f * g;
}
c = multiply(20, 30);

执行上下文看起来像这样:

//全局执行上下文
GlobalExectionContext = {
  ThisBinding: <Global Object>,
  LexicalEnvironment: {
    //环境记录器1(全局环境是对象环境记录器,用来定义出现在全局上下文中的变量和函数的关系。)
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>
  },
  //var声明的变量
  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      c: undefined,
    }
    outer: <null>
  }
}
//函数执行上下文
FunctionExectionContext = {
    ThisBinding: <Global Object>,
    //词汇环境
    LexicalEnvironment: {
    //环境记录器2 函数环境是声明式环境记录器，用来存储变量、函数和参数。函数环境，声明式环境记录器还包含了一个传递给函数的 arguments 对象（此对象存储索引和参数的映射）和传递给函数的参数的 length。
    EnvironmentRecord: {
        Type: "Declarative",
        // 在这里绑定标识符函数中会有一个arguments
        Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>
    },
    VariableEnvironment: {
        EnvironmentRecord: {
        Type: "Declarative",
        // 在这里绑定标识符
        g: undefined
        },
        outer: <GlobalLexicalEnvironment>
    }
}

执行阶段

这是整篇文章中最简单的部分。在此阶段，完成对所有这些变量的分配，最后执行代码。

注意 — 在执行阶段，如果 JavaScript 引擎不能在源码中声明的实际位置找到 let 变量的值，它会被赋值为 undefined。

postcss是什么

BFC元素的特点

DOM事件级别

事件流(三个阶段)

event对象

自定义事件

//方式一 使用Event
var eve = new Event("自定义事件名");
element.addEventListener("自定义事件名",function(){})
element.dispatch(eve);

//方式二 使用CustomEvent，可以额外传一些自定义的参数
element.addEventListener("cat", function(e) { process(e.detail) });
// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
element.dispatchEvent(event);

类型转换

显示类型转换
隐式类型转换
常见题目
[] + []   //""
[] + {} //"[object Object]"
{} + [] //0  注意在chrome中，此处{}会被解析成代码块，所以最后运算的是+[]，会对[]进行Number转换，得到的就是0
{} + {} //"[object Object][object Object]"
true + true //2
1 + {a:1} //"1[object Object]"

http协议

http报文组成
image.png
请求示例
image.png
响应示例
image.png
请求方法
get和post区别
http状态码

管线化

请求1->响应1->请求2->响应2->请求3->响应3

请求1->请求2->请求3->响应1->响应2->响应3

通信类

同源策略

同源策略限制从一个源加载的文档或者脚本如何与另一个源的资源进行交互。只是一个用于隔离潜在恶意文件的安全机制。

前后端如何通信
跨域通信的几种方式
安全类
csrf Cross-site request forgery 跨站请求伪造
xss cross-site scripting 跨域脚本攻击

算法

二面/三面

渲染机制类

提升页面性能

//强制开启a标签的dns预解析(在https协议中a标签的预解析是关闭的)
<meta http-equiv="x-dns-prefetch-control" content="on">
//dns预解析
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
异步加载
浏览器缓存

错误监控类

image.png image.png
image.png
上报错误的基本原理
(new Image()).src = "http://api/errorWatch?url=xxx"
上一篇下一篇

猜你喜欢

热点阅读