一、eventLoop

    setTimeout,ajax等异步和dom事件都是使用回调，基于eventLoop

    执行同步代码，遇到异步代码存到另一个地方，同步代码执行完毕，开始启动eventLoop，不断询问callback queue是否有代码可执行，异步代码执行完毕的时候，会把回调推到callback queue内，eventLoop访问到代码，开始到call stack执行代码，执行完毕之后弹出

    js和dom渲染共用一个进程

    call Stack空闲的时候 -> 尝试DOM渲染 -> 再触发eventLoop

二、promise

    then和catch正常都是返回一个resolved的，里面要是有报错，则直接rejected

    resolve / reject / then / catch / all / race 

    allSettled :等到所有promises都完成（每个promise返回成功或失败）,返回一个promise，并带有一个对象数组，每个对象对应每个promise的结果

    any(当其中的一个promise 成功，就返回那个成功的promise的值。) 

三、async && await

async返回的是promise对象 ，

await相当于promise.then   (返回的不是promise的话，就用promise.resolve包裹起来返回，如果promise它reject了，就报错，用try...catch捕获)

四、异步的本质

    异步的本质就是回调~

    await后面的代码，都可以看成callback里的内容，就是异

五、异步遍历（for...of）    

for ... in : 遍历获取的是对象的键名

for... of: 遍历获取的是对象的键值，等上一个有结果了，才执行下一个（异步循环）

六、宏任务和微任务

    宏任务：setTimeout / setInterval / ajax / dom事件，DOM渲染完成之后触发回调，浏览器规定

    微任务：promise，DOM渲染完成之前触发，ES6语法规定

    1、call Stack空闲的时候（同步任务完成）

    2、执行当前的微任务 

    3、尝试DOM渲染

    4、 最后触发eventLoop

七、DOM(Document Object Modal)

1、数据结构：是从html解析出来树形结构

2、常用API：

     获取节点：getElementById()，getElementsByTagName(数组) , getElementsByClassName(数组），querySelectorAll(数组)

    property：以js.语法操作的属性，node.style.xxx / node.className 修改对象属性，不体现到html中（推荐）

    attribute：getAttribute() / setAttribute()，修改html属性，体现到html结构中

    两者都会有可能引起重新渲染

4、节点操作

    新建：const p1 = document.createElement('p')

    插入：div1.appendChild(p1)

    移动：将现有节点appendChild到其他元素下面

    父元素：p1.parentNode

    子元素列表：div1.childNodes，nodeType === 1的是元素节点

    删除子元素：div1.removeChild(p1)

3、优化dom操作性能 

    避免频繁操作

    DOM查询缓存

    将频繁操作改为一次操作：

        const frag = document.createDocumentFragment()

八、BOM(Browser Object Modal)

    1、识别浏览器类型

        const ua = window.navigator.userAgent

        浏览器类型检测方法

    2、分解url

            location.href : 全

            location.protocal : https

            location.search : 参数（?a=2&b=3）

            location.hash : hash值

            location.host  : www.baidu.com

            location.pathname :  路径

    3、history:

        history.back()

        history.forword()

九、事件        

1、阻止事件冒泡

    stopPropagation  /  cancelBubble

2、阻止默认行为

    preventDefault / return false

3、事件监听器

    addEventListener / attachEvent

    removeEventListener / detachEvent

4、事件代理

基于事件冒泡

十、同源（协议、域名、端口）

css / js / img可无视同源策略    

img可用于统计打点（一般是1px *1px 的gif）

link和script可用CDN

script可实现JSONP进行跨域

十一、ajax

readyState 状态 状态说明

(0)未初始化：表示对象已经存在

(1)载入：表示正在向服务端发送请求。

(2)载入完成：表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

(3)交互：表示正在解析数据。

(4)完成：表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：

创建－初始化请求－发送请求－接收数据－解析数据－完成

十二、http

1、状态码

    1xx：服务器收到请求

    2xx: 请求成功，200

    3xx: 重定向，301（永久重定向），302（临时重定向），304（命中协商缓存，资源未被修改），

    4xx：客户端错误，404（找不到），401（无权限），403（forbidden）

     5xx: 服务端错误，500，503（服务器正在启动），502（bad request）,504（网关超时）

2、headers

    requestHeaders:

        Accept：浏览器可接受数据格式

        Accept-Encoding: 浏览器可接受的压缩算法，gzip

        Accept-Language: 浏览器可接受的压缩算法，zh-CN

        Connection:keep-alive(长链接)

        cookie: 同域自动带

        host: 请求域名

        User-Agent:浏览器信息

        Content-type:发送数据的格式

    responseHeaders:

        Content-type:返回数据的格式    

        Content-length: 返回数据的大小，字节

        Content-Encoding: 返回数据的压缩算法，gzip

        set-cookie:   服务器设置cookie  

        cache-control / expires / etag / last-modified / if-modified-since / if-none-match          

十三、Restful-API

请求分成增删改查，4种methods去请求，用method表示操作类型

十四、http缓存

    js / css / img可以被缓存    

    1、强制缓存：命中返回200状态码

        expires: http1.0的属性，权重低于cache-control

        cache-control : response headers里，控制强制缓存的逻辑，

            max-age: 最大缓存时间，s

            no-cache: 跳过强制缓存，询问服务端（走协商缓存）

            no-store: 不缓存

            public: 浏览器和中间服务器都可缓存

            private: 只有浏览器可以缓存

   2、 协商缓存：命中返回304状态码

       response header 

            Last-modified: 资源最后修改时间，只能精确到秒级

            Etag : 资源的唯一标识（计算起来比较耗性能），更准确

        requset header

            If-Modified-Since

            If-None-Match

        权重：Etag > Last-Modified

    3、刷新对缓存的影响：

        ①、正常操作：地址栏输入url，跳转连接，浏览器前进后退   

            强制缓存，协商缓存都有效

       ②、 手动刷新：F5 ，点击刷新，右键刷新

            强制缓存失效，协商缓存都有效

        ③、强制刷新： Ctrl + F5     

            全部失效

十五、从输入url到出页面    

1、DNS解析

2、发起请求

3、 请求返回

4、生成DOM Tree

5、生成CSSOM

6、 DOM Tree和CSSOM合成render Tree

7、根据render Tree渲染页面

8、遇到js暂停渲染，优先加载执行js，完成再继续渲染

9、渲染完成

十六、window.onload和DOMContentLoaded

    window.onload： 全部资源加载完成，触发

    DOMContentLoaded：只有dom渲染完成就触发

十七、TCP && UDP

十八、tree-shaking

    依赖于es6的module特性：

       1、只能作为模块顶层的语句出现

        2、import 的模块名只能是字符串常量

        3、import binding 是 immutable（一成不变）的

也就是说es6的mudule是确定的，静态的，tree-shaking只能识别静态代码（不执行代码），从字面量分析，所以wepack和rollup一定要基于es6才能实现tree-shaking

wepack和rollup本身是不能进行tree-shaking的，是uglify操作的

特殊情况：

    tree-shaking不能进行跨文件优化，

     tree-shaking对函数效果较好

十九、for/forEach/for...in/for...of

1、for只能遍历数组，遍历数组的下标作为key，可以break，不可以return

2、forEach也只能遍历数组，遍历数组的值，但是不能用break退出循环体，也不能从循环体return出啥来

3、for...in即可遍历数组，也可以遍历对象，遍历的是数组的下标或者是对象的key，break可以终止，

4、for...of只能遍历数组，遍历的是数组的值，break可以终止，

 return只能用在函数体

continue/break 只能用在for、for/of、for/in、while、do/while的循环体

二十、安全

1、XSS(跨站请求攻击)

    ①、反射

        就是用户访问的时候，部分不是我们自己的代码会在浏览器执行，造成问题，信息泄露啥的。

        就是可能搜索的地方，用户输入个js代码，发送个啥数据给我，我可能就干坏事了，

        但是搜索只能是自己搜索，你总没有超能力控制受害者输入啥吧，那就可能从url入手，携带恶意代码，被浏览器拿来执行

    ②、存储

        用户的输入被发送并存储到数据库，下次读取的时候，造成问题

        就像是评论，我评论个一个恶意js代码，你再看到时候，就把你的信息发给我，我是不是就要坏事儿了

    ③、DOM：我不知道

    防御：

        httpOnly

        转义

2、xsrf（跨站请求伪造）

    攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的

    受害者登陆过被攻击网站，并在本地保存着凭证

    受害者点击第三方网站，执行代码，伪造是受害者的请求

    被攻击网站确认时受害者的请求，执行代码

    防御：

        token

        同源

二十一、css module

css-loader有配置项在，在配置css-loader的时候，options的配置项

六、代码规范yorkie

lint && commitMessage校验

gitHooks:{

"pre-commit": 'lint-staged',

"commit-msg" : "commitlint -e $GIT_PARAMS"

}

二十二、scrollTop

scrollTop：元素被卷去的高度

scrollHeight：算上被卷去的总高度，内容不超出盒子高度时为盒子的clientHeight

offsetWidth 水平方向 width + 左右padding + 左右border

clientWidth 水平方向 width + 左右padding

offsetTop 获取当前元素到 定位父节点 的top方向的距离

getBoundingClientRect() 获取元素到body

    *  bottom: 元素底边（包括border）到可视区最顶部的距离

    *  left: 元素最左边（不包括border）到可视区最左边的距离

    *  right: 元素最右边（包括border）到可视区最左边的距离

    *  top: 元素顶边（不包括border）到可视区最顶部的距离

    *  height: 元素的offsetHeight

    *  width: 元素的offsetWidth

    *  x: 元素左上角的x坐标

    *  y: 元素左上角的y坐标

获取以上元素都会触发回流，慎用

八、回流和重绘

会导致回流的操作：

页面首次渲染。

浏览器窗口大小发生改变。

元素尺寸或者位置发生改变。

元素内容变化(文字数量或者图片大小发生改变)。

元素字体大小的改变。

添加或者删除可见的DOM元素。

激活CSS伪类 (eg::hover)。

查询某些属性或调用某些方法。

一些常用且会导致回流的属性和方法。

clientWidth、clientHeight、clientTop、clientLeft

offsetWidth、offsetHeight、offsetTop、offsetLeft

scrollWidth、scrollHeight、scrollTop、scrollLeft

scrollIntoView()、scrollIntoViewIfNeeded()

getComputedStyle()

getBoundingClientRect()

scrollTo()

二十三、setTimeout && requsetAnimationFrame

1、setTimeout是异步执行任务，放进任务队列，可能造成卡顿，页面不可见的情况下，会继续在后台执行，损耗cpu，

2、requsetAnimationFrame，屏幕的刷新频率是每秒60帧，也就是每16.67ms刷新一次。requsetAnimationFrame会在页面不可见的时候，不执行回调，减少损耗cpu资源，可以取消，该函数返回一个id，使用cancelAnimationFrame(id)取消。由系统来决定回调函数的执行时机，跟着系统的刷新频率走，保证回调函数在屏幕每一次的刷新间隔中只被执行一次，但是兼容性不太好，需要优雅降级

二十四、数组方法

forEach：不修改原数组，不能break, continue, return，跳过后面的代码，进行下一次循环

map：不修改原数组，返回新数组，不能break，可以return，跳过后面的代码，进行下一次循环

函数体都是return，for循环体都是continue && break;

pop,shift返回被删除或者被新增的那个元素，unshift push返回新数组的长度

二十五、关于new

函数内，不明确return什么的时候，默认是返回    undefined，入砂锅是new操作符的话，默认返回的是this对象。但是但是但是！！！如果明确了return，那不管是直接执行还是new操作，返回的都是return的东西。

如果是return对象，且new操作了，那么被返回的对象的原型是不指向该类的原型的，也就是说，原型链并不是类的原型链了哦