1. 简要描述 浏览器拿到 index.html 文件后，就开始解析其中的 html 代码，遇到 js/css/image 等静态资源时，就向服务器端去请求下载(会使用多线程下载，每个浏览器的线程数不一样)，这个时候就可以用上 keep-alive 特性了，建立一次 http 连接，可以请求多个资源。浏览器在请求静态连接时（在未过期的情况下），向服务器端发起一个 http 请求（询问自从上一次修改时间到现在有没有对资源进行修改），如果服务器端返回 304 状态码（告诉浏览器服务器端没有修改），那么浏览器会直接读取本地的该资源的缓存文件。

1. 看代码，说输出 new Promise((resolve, reject) => { for(let i = 0; i < 3; i++){ resolve(i); console.log(i); } }).then(data => console.log(data)); // 输出是： // 0 // 1 // 2 // 0 2. async await 怎么处理错误 async await 从语法层面给人一种非常直观的方式，可以让我们避免 callback hell 与 Promise hell. async f...

AST 抽象语法树 AST 简介 在计算机科学中，抽象语法树，或简称语法树，是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 AST 可以做什么 BABEL、Sass、Less、ESLint、TypeScript、 loader 和 plugin 的区别 对于 loader,它是一个转换器，将 A 文件进行编译形成 B 文件，这里操作的是文件，比如将 A.scss 转换为 A.css，单纯的文件转换过程；plugin 是一个扩展器，它丰富了 webpack 本身，针对的是 loader 结束后，webpack打包的整个过程...

缺点 一、响应式的 useEffect 写函数组件时，你不得不改变一些写法习惯。你必须清楚代码中 useEffect 和 useCallback 等 api 的第二个参数“依赖项数组”的改变时机，并且掌握上下文的 useEffect 的触发时机。当逻辑较复杂的时候，useEffect 触发的次数，可能比你预想的多。对比 componentDidMount 和 componeneDidUpdate，useEffect 带来的心智负担更大。 二、状态不同步 怎么避免 react hooks 的常见问题 不要在 useEffect 里面写太多的依赖项，划分这些依赖项成单一功能的 useEff...

js 模块化的方法 Module 在模块化规范形成之前，JS 开发者使用 Module 设计模式来解决 JS 全局作用域的污染问题。Module 模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法。在 JavaScript，Module 模式使用匿名函数自调用(闭包)来封装，通过自定义暴露行为来区分私有成员和共有成员。 let myModule = (function(window){ // 私有 let moduleName = 'module'; // 公有 function setModuleName(name){ mod...

基础使用 const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { const start = Date.now(); await next(); const ms = Date.now - start; console.log(`${ctx.method} ${ctx.url} - ${ms}ms`); }); //response app.use(ctx => { ctx.status = 200; ctx.set('Co...

1. http 模块 一个简单的服务器 const http = reqiue('http'); const server = http.createServer((req, res) => { console.log(req.url); // 请求 url console.log(req.method); //请求方法 console.log(req.headers); //请求头部 if(req.url === '/'){ // 设置响应的状态码和头部 res.writeHead(200, {'Content-Type...

1. 三大关键阶段 执行定时器回调的阶段。检查定时器，如果到了时间，就执行回调。这些定时器就是 setTimeout、setInterval。轮询(英文叫 poll)阶段。因为在 node 代码中难免会有异步操作，比如文件I/O，网络I/O等等，那么当这些异步操作做完了。就会来通知主线程，怎么通知呢？就是通过‘data’、'connect'等事件使得时间循环到达 poll 阶段。到达了这个阶段后：如果当前已经存在定时器，而且有定时器到时间了，拿出来执行，eventLoop 将回到 timer 阶段。如果没有定时器，就会去看回调函数队列。 如果队列不为空，拿出队列中的方法依次执行； 如果...

第三次科技革命 第三次科技革命的能源是一种数字能量，本质是计算。数字能量是如何产生的：电能供给给芯片，芯片中的一种电子元件晶振(也就是石英晶体)通电后产生震荡，震荡会产生频率稳定的脉冲信号。通常这是一个高频的脉冲信号，每秒可达百万次。然后我们通过谐振效应发放这个信号，形成方波。再通过电子元件调整这种脉冲的频率，把脉冲信号转换为我们需要的频率，这就形成了驱动芯片工作的时钟信号。这种信号的频率，我们称为芯片的时钟频率。最后，时钟信号驱动着芯片工作，就像人体的脉搏一样，每一次脉冲到来，都让芯片的状态发生一次变化，用这种方法，最终存储器中的指令被一行行执行。指令被执行，其实就是数据被计算，这就是计算...

XHR 对象的用法 var xhr = new XMLHttpRequest(); open 使用 XHR 对象时，调用的第一个方法就是 open()，他接受 3 个参数：要发送的请求的类型("get", "post" 等)、 请求的 URL 和表示是否异步发送请求的布尔值。· // get 方法， 请求 "example.php", 同步发送请求 xhr.open("get", "example.php", false); 两个注意点： URL 相对于执行代码的当前页面(当然也可以...

回调地狱 多层嵌套的问题； 每种任务的处理结果存在两种可能性（成功或失败），那么需要在每种任务执行结束后分别处理这两种可能性； Promise 就是为了解决上面的问题 Promise Promise 通过三大技术手段来解决回调地狱： 回调函数延迟绑定； 返回值穿透； 错误冒泡； 回调函数不是直接声明，而是通过后面的 then 方法传入，这就是回调函数延迟绑定。 Promise 的状态 Promise 的本质是一个有限状态机，存在三种状态： PENGDING（等待） FULFILLED （成功） REJECTED （失败）对于 Promise 而言，状态的改变不可逆...

基本 import { createStore } from 'redux'; // reducer 是个函数，参数为 state（设置初始值）和 action,返回值为新的 state const reducer = (state = 0, action){ switch (action.type) { case 'add': return state + action.payload; case 'delete': return state - action.payload; defa...

JSX JSX 是 JS 的一种语法扩展，JSX 可以生成 React 元素。 // 实际上 Babel 会把 JSX 转译为 React.createElement() 函数调用 const element = ( <h1 className="greeting"> Hello React! </h1> ); // 这就是为什么你必须引入 React 库，因为使用 JSX 就需要 React 库 const element = React.createElement( 'h1', {classN...

<img src="default.jpg" data-src="http://www.xxx.com/target.jpg" /></img> 1. IntersectionObserver 这是浏览器内置的一个 API，实现了监听 window 的 scroll 事件、判断是否在视口中以及节流三大功能。 let imgs = document.getElementsByTagName("img"); const observer = new InteractionObserver(changes =&...