笔记

1、解决异步的方法

1）promise

var p = new Promise(function(resolve,reject）{
    setTimeout(function(){
       console.log("执行成功")
       resolve("OK")
    },1000)
})
p.then((val)=>{console.log(val)})

Promise.all([p1,p2,p3]).then(function(results){console.log(results})

Promise.race([p1,p2,p3]).then(function(results){
        console.log(results)
},function(reason){
     console.log(reson)
})

2）async await（底层实现是啥？）

3）回调函数

4）事件监听

 

2、浏览器渲染页面的过程

1、解析html生成dom tree

2.解析css生成cssom

3、结合生成render-tree

4、根据render-tree计算每个节点的位置

5、绘制页面

 

DomContentLoaded和load的区别？

DomContentLoaded是document上的事件，load是window事件

DomContentLoaded是dom树加载完成。无需等待样式表、图像和子框架的完成加载。

 

3、http2.0 http1.0 http1.1之间的区别

http1.0和http1.1的区别：

1）缓存处理：

在1.0中常用header里的if-Modifiled-since和expires来作缓存判断的标准

1.1中引入了更多的缓存控制策略比如Enitity tag等缓存头来控制缓存策略

2）带宽优化及网络连接的使用

 

4、统一标准盒子模型和ie盒子模型：

box-sizing：content-box | border-box | inherit

content-box：标准的W3C盒子模型

border-box：IE盒子模型

padding-box：火狐标准，从padding开始算起

 

5、css3动画们 animation transform transition

animation：https://blog.csdn.net/u013243347/article/details/79976352

@keyframe dropdown{

.list div:first-child {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { top: 0; left:0px;}
    30% { top: 300px; left:0px;}
    50% { top: 150px; left:0px;}
    70% { top: 300px; left:0px;}
    80% { top: 0px;  left:-200px;}
    100% { top: 0px;  left:0px;}
  }

animation简写形式

animation:
[animation-name] [animation-duration] // 动画的名称、持续时间
[animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
[animation-iteration-count] [animation-direction] // 播放次数、播放顺序
[animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

transition

四个属性：transition-property，定义设置过度效果的属性。transition-duration，定义过度效果持续的时间。transition-timing-function 规定速度效果的速度曲线 。transition-delay定义过度动画何时开始

transform rotate旋转  translate  scale缩放 skew倾斜

6、强缓存和协商缓存

前端工程打包好放到静态资源服务器上的时候，需要gzip和设置缓存

cache-control是由服务器端设置的，设置了当前资源是否可缓存，缓存有效期等等。

max-age表示缓存过期时间（秒）；public 表示客户端和代理服务器等都可以缓存，private代表只有客户端可缓存；immutable代表资源永不过期，即使客户端刷新浏览器页不会向服务端发起请求；no-cache表示不进行强缓存，即本地不进行缓存，浏览器会直接走协商缓存；no-srore是都不缓存

协商缓存用到etag和last-modified字段

客户第一次请求是保存资源的cache-control etag last-modified字段等。之后请求时先看cache-control，如果没有过期的话就直接从缓存里取，如果过期了，就讲etag和last-modified发给服务器，把名字改一下。服务器对比一下如果真的过期就给它资源返回200，如果没过期就返回304，告诉客户端取缓存里取

// response header
etag: '5c20abbd-e2e8'
last-modified: Mon, 24 Dec 2018 09:49:49 GMT

// request header 变为
if-none-matched: '5c20abbd-e2e8'
if-modified-since: Mon, 24 Dec 2018 09:49:49 GMT

为啥http1.1多了个etag？

主要弥补last-modified的缺陷：

1)、有些文件可能会周期性改变，但它的内容可能并没有变，last-modifed会随着改变，引起不必要的请求

2)、最小单位是秒，有些改变可能发生在秒以内，用last-modified就无法区别

3）、某些服务器无法精确得到文件的最后修改时间

7、模块导入导出的方式有哪些？

 

8、web前端开发兼容性

 

9、手动实现一个promise all方法

 

10、怎么定时清理localStorage中的缓存？

 

11、判断一个对象是否是数组

 Object.prototype.toString.call() //'[object Array]'

Array.isArray(arr)

arr1 instanceof Array

arr1.__proto__==Array.prototype

 

媒体查询做的响应式布局

@media screen and (min-width: 400px) and (max-width: 1000px) {
            .parent {
                display: flex;
            }
            .side {
                width: 300px;
            }
            .main {
                flex: 1;
                margin-left: 10px;
            }
        }

13、执行环境和作用域链

在创建一个函数的时候，就在函数内部创建了一条包含全局环境的作用域链，保存在[[scope]]属性中。

调用函数时，会为函数创建一个执行环境，然后复制scope构建执行环境中的作用域链。

闭包产生的原因就是作用域链。

14、this

this指向是在函数执行时基于函数的执行环境绑定的

 

15、宏任务和微任务的区别

会先执行微任务，例如promise的then 和this。nextTick。执行完微任务再红任务，比如setTimeout

 

16、TCP/IP四层模型

应用层 http 传输层 TCP UDP 网络层 IP  ICMP 网络接口层 ARP

 

17、http协议

请求报文包含：请求方式、URI、http协议版本、可选的请求首部字段和内容实体。

响应：协议版本、状态码及对状态码的说明、响应的首部字段、主体

 

18、let const var

let和const都是块级作用域，const声明的变量不能被修改（引用类型的指针不能修改），而且要在声明时就赋值，不能被变量提升。let不允许变量提升，不允许在同一作用域内重复声明同一变量，存在暂时性死区，只要在同一作用域内存在let命令，他所声明的变量就“绑定”在这个作用域内，不管外部有没有声明 

 

19、CommonJS规范中的require和ESM规范中的import有什么区别？

 

20、js手动实现new方法

function _new(fn, ...arg) {
   const obj = {}; //创建一个新的对象
   obj.__proto__ = fn.prototype; //把obj的__proto__指向fn的prototype,实现继承
   fn.apply(obj, arg) //改变this的指向
   return Object.prototype.toString.call(obj) == '[object Object]'? obj : {}
}

21、将函数的arguments变成数组对象

Array.prototype.slice.apply(arguments) // apply后面跟的是数组
Array.prototype.concat.apply([],arguments)

22、闭包的应用

 

23、函数中arguments转成array的方法

1、用扩展在运算符[...arguments]

2、用Array的slice或者concat
Array.prototype.slice.call(arguments)
[].slice.call(arguments)

3、用Array.from(arguments)