前端知识点

1、从输入url到浏览器呈现页面中间经历了什么？

• 在输入url的时候，会进行本地历史记录和标签页的查询，提供模糊查询效果

• 浏览器查找当前URL是否存在缓存，并比较缓存是否过期
  HTTP缓存有多种规则，根据是否需要向服务器重新发起请求来分类，将其分为强制缓存，对比缓存。
  强制缓存：判断HTTP首部字段：Expires 和 cache-control。
  Expires是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题：服务器时间与客户端时间可能不一致
  cache-control中的max-age保存了一个相对时间。例如Cache-Control: max-age = 484200，表示浏览器收到文件后，缓存在484200s内有效。 如果同时存在cache-control和Expires，浏览器总是优先使用cache-control。
  对比缓存：通过HTTP的 last-modified（最新-改进），Etag字段进行判断。
  last-modified 表示请求的URL（资源）最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。
  Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。

• DNS解析URL对应的IP
  首先查询本地host文件是否有对应地址的一个映射关系，如果没有找到，会查找本地DNS解析器缓存，如果还是没有找到则会查找本地DNS服务器，最后迭代查询，按根域服务器库（.com,.cn,.vip,.top...）->顶级域(com)->->第二层域子域（baidu.com）,最后根据baidu.com的域名找到相应的IP，返回给浏览器。

• 根据IP建立TCP连接（三次握手）
  浏览器用这个IP地址与服务器建立TCP连接，如果用的是HTTPS，还有完成TLS / SSL的握手。
  第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入等待服务器确认的状态；
  第二次握手： 服务器收到syn包，必须确认客户端的syn（ack=j+1），同时自己根据syn生成一个ACK包，此时服务器进入等待状态；
  第三次握手： 客户端收到服务器的ACK包，向服务器发送确认，此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

• 发送HTTP请求
  在建立好连接以后呢，构造HTTP请求，在构造请求的过程中，要填充少量至HTTP头部

• 服务器解析请求返回结果
  然后通过这个TCP连接发起HTTP请求，当服务器收到这个HTTP请求以后，返回给浏览器以HTTP页面作为包体的HTTP响应。

• 浏览器解析结果并渲染页面
  根据html代码生成DOM树 ，在解析到外部的css和js文件时，向服务器发起请求下载资源，如果是CSS代码会在下载的同时进行解析，如果是JS代码会阻塞页面加载，根据CSS代码生成OM树，然后生成layout树（重排），生成painting树（重绘），然后生成渲染树。

• 关闭TCP连接（四次挥手）
  第一次握手是浏览器发完数据，然后发送FIN请求断开连接。
  第二次握手是服务器向客户端发送ACK，表示同意。
  第三次握手是服务器可能还有数据向浏览器发送，所以向浏览器发送ACK同时也发送FIN请求，是第三次握手。
  第四次握手是浏览器接受返回的ACK，表示数据传输完成。

相关链接：
输入url至呈现页面过程
三次握手
四次挥手

2、js基本数据类型

Number、String、Boolean、undefined、object、symbol、bigInt、Null
js基本数据类型

3、typeof返回类型

number、 string、boolean、 undefined、object、symbol、bigint、function
typeof NaN == 'number'

4、最大安全值和最大值

Number.MAX_SAFE_INTEGER 进行运算不会丢失精度
Numebr.MAX_VALUE js能表示的最大值

5、this的绑定规则

显示绑定 call、apply、bind
隐式绑定 obj对象的属性为函数时，内部指向obj
默认绑定 函数内部的this默认指向window
new绑定
this的绑定规则

6、call、bind、apply

改变this指向的方法
call参数为列表、apply为数组、立即执行
bind为等待状态

Math.max.call(null, 1,3,5,2,4)  
Math.max.apply(null, [1,3,5,2,4])

call、apply、bind

7、promise

创建对象

let p1 = function(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('成功1！')
    },1000)
  })
}
let p2 = function(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('成功2！')
    },1000)
  })
}
let p3 = function(){
  return new Promise((resolve, reject)=>{
    setTimeout(()=>{
      resolve('成功3！')
    },1000)
  })
}

链式操作

p1().then((data)=>{
  console.log(data)
  return p2()
}).then((data)=>{
  console.log(data)
  return p3()
}).then((data)=>{
  console.log(data)
})

race函数

Promise.race([p1(),p2(),p3()]).then((data)=>{
  console.log(data)  //[p1,p2,p3]
}).catch((err)=>{
  console.log(err)
})

all函数

Promise.all([p1(),p2(),p3()]).then((data)=>{
  console.log(data)    //p1
})

promise原理

8、观察者模式

class Event{
  constructor(){
    this.list = []
  }
  subscrible(type, handler){
    if(this.list[type]){
      this.list[type].push(handler)
    }else{
      this.list[type] = [handler]
    } 
  }
  unSubscrible(type, handler){
    if(this.list[type]){
      let index = this.list[type].indexOf(handler)
      this.list[type].splice(index, 1)
    }
  }
  publish(type){
    if(this.list[type]){
      this.list[type].forEach((item)=>{
        item()
      })
    }
  } 
}
let event = new Event()
function load(index){
  console.log('load')
}
function click1(index){
  console.log('click')
}
function click2(index){
  console.log('click')
}
event.subscrible('load', load)
event.subscrible('click', click1)
event.subscrible('click', click2)
event.publish('load')
event.publish('click')

9、发布订阅模式

class Dog{
  call(){
    console.log('汪汪')
  }  
}
class  Pubsub{
  constructor(){
    this.list = []
  }
  subscrible(call){
    this.list.push(call)
  }
  publish(){
    this.list.forEach((item)=>{
      item()
    })
  }
}
let pubsub = new Pubsub()
class  Thief{
  constructor(){
    this.list = []
  } 
  action(){
    pubsub .publish()
  }
}
let thief = new Thief()
let dog1 = new Dog()
let dog2 = new Dog()
pubsub .subscrible(dog1.call)
pubsub .subscrible(dog2.call)
thief.action()

链接

10、eventLoop （堆、栈、队列）

1、先执行主线程（包含执行栈和堆）
2、遇到宏队列（macrotask）放到宏队列（macrotask）
3、遇到微队列（microtask）放到微队列（microtask）
4、主线程执行完毕（执行栈Stack被清空） （栈内存出栈后自动销毁）
5、执行微队列（microtask），微队列（microtask）执行完毕
6、执行一次宏队列（macrotask）中的一个任务，执行完毕 （宏任务有可能产生微任务）
7、执行微队列（microtask），执行完毕
8、依次循环...

11、宏任务和微任务

macroTask

setTimeout、setInterval 、setImmediate、I/O、UI Rendering

microTask

Process.nextTick（Node独有）、Promise、Object.observe(废弃)、MutationObserver

执行顺序

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
})

setTimeout(() => {
  console.log(6);
})

console.log(7);

带你彻底弄懂eventLoop
一次弄懂eventLoop

12、闭包

1. 模拟私有变量，在函数外部间接访问函数内部的变量
2. 私有变量一直保存在内存中，不被销毁
3. 内部变量不会污染全局命名空间
4. 闭包在处理速度和内存消耗方面对脚本性能具有负面影响

let count = (function(){
  let sum = 10
  function change(x){
    return sum += x
  }
  return change
})();
console.log(count(10)) //20

13、js 事件冒泡和事件捕获

事件传递有两种方式：冒泡与捕获。
事件传递顺序：捕获阶段=>目标阶段=>冒泡阶段
匿名函数事件绑定无法删除

//事件绑定
dom.addEventListener('click', fn, false)  // 默认为 false（冒泡） true（捕获）
dom.removeEventListener('click', fn, false)
dom.attachEvent('onclick', fn)        //IE
dom.detachEvent('onclick', fn)      //IE

//阻止冒泡和捕获
event.cancelBubble=true;
event.stopPropagation()

//阻止默认事件传播
event.preventDefault()
window.event.returnValue = false;

14、addEventListener 和 attachEvent 区别

1. attachEvent 为IE下的事件绑定函数,不支持捕获
2. attachEvent 指向 window, 有内存泄漏问题，全局作用域中运行 addEventListener 指向obj，依附于元素的作用域中运行
3. 都可以绑定多个事件处理函数，同一个事件处理函数可以绑定多次

15、事件委托

利用冒泡的原理，把事件加到父级上，触发执行效果。
1、提高性能，不需要为每个子元素添加事件处理函数
2、新添加的元素也可以通过之前的事件进行触发
3、事件基于冒泡，对于不冒泡的事件不触发

    
        
        
    
    
        

            

                
11
                
22
                
33
                
44
            
        
    
     

16、（本地缓存）请描述一下 cookies，sessionStorage 和 localStorage 的区别？

Web Storage有两种形式：

LocalStorage（本地存储）和sessionStorage（会话存储）。

这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。

1. 与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据，大概5M左右。
2. LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）；sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。
   注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。
3. 使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法
4. localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。

17、简述一下你对HTML语义化的理解。

1. HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

2. 即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；

3. 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；

4. 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

18、Html语义化标签