1

浏览器和协议

从输入url到展示页面加载的过程

1. 通过DNS解析获得网址的对应IP地址
2. 浏览器与远程web服务器 通过TCP三次握手协商来建立一个 TCP/IP 连接
3. 浏览器 通过TCP/IP连接 向web服务器 发送一个 HTTP 请求
4. 服务器的永久重定向响应
5. 浏览器跟踪重定向地址
6. 服务器处理请求
7. 服务器返回一个 HTTP 响应
8. 浏览器渲染:解析HTML、解析CSS、解析JS、Render树

css

css那些元素属性可以继承，那些不能继承

1. 字体的一些属性：font
2. 文本的一些属性：line-height
3. 元素的可见性：visibility:hidden
4. 表格布局的属性：border-spacing
5. 列表的属性：1ist-style
6. 页面样式属性：page
7. 声音的样式属性

js

js的组成部分

1. ECMAScript：js的核心
2. 文档对象模型：（DOM）
3. 浏览器对象模型：（BOM）

js检测数据类型有哪些方式

typeofinstanceofconstructorObject.prototype.toString.call()

什么是闭包，闭包有什么特点？

外部函数返回内部函数，内部函数又引用外部函数中的变量

特点：可以重复利用变量，并且这个变量不会污染全局的一种机制：这个变量是一直保存再内存中，不会被垃圾回收机制回收

缺点：闭包较多的时候，会消耗内存，导致页面的性能下降，在IE浏览器中才会导致内存泄漏

使用场景：防抖，节流，函数嵌套函数避免全局污染的时候

什么是事件委托

又叫事件代理，原理就是利用了事件冒泡的机制来实现，也就是说把子元素的事件绑定到了父元素的身上

基本数据类型和引用数据类型的区别

基本数据类型保存在栈内存当中，保存的就是一个具体的值

保存在堆内存当中，声明一个引用类型的变量，它保存的是引用类型数据的地址

假如声明两个引用类型同时指向了一个地址的时候，修改其中一个那么另外一个也会改变

说一下什么是原型链？

原型就是一个普通对象，它是为构造函数的实例共享属性和方法：所有实例中引用的原型都是同一个对象

使用prototype可以把方法挂在原型上，内存值保存一份

__proto__可以理解为指针，实例对象中的属性，指向了构造函数的原型(prototype)

当调用一个方法或获取一个属性时， 先从本对象上面找，再找对象的原型对象，再找原型对象的原型对象，一直找到Object的原型对象，这样原型套原型称为原型链

new操作符具体做了什么？

1. 先创建一个空对象
2. 把空对象和构造函数通过原型链进行链接
3. 把构造函数的this绑定到新的空对象身上
4. 根据构建函数返回的类型判断，如果是值类型，则返回对象，如果是引用类型，就要返回这个引用类型

function myNew(Fun, ...args){
    //1.先创建一个空对象
    let newobj  = {}
    //2.把空对象和构造函数通过原型链进行链接
    newobj.__proto__ = Fun.prototype
    //3.把构造函数的this绑定到新的空对象身上
    const result = Fun.apply(newobj,args)
    //4.根据构建函数返回的类型判断，如果是值类型，则返回对象，如果是引用类型，就要返回这个引用类型
    return result instanceof object ? result : newobj
}

js中关于this指向的问题

1. 全局对象中的this指向

   指向的是window

2. 全局作用域或者普通函数中的this

   指向全局window

3. this永远指向最后调用它的那个对象

   在不是箭头函数的情况下

4. new关键词改变了this的指向

5. apply,call,bind

   可以改变this指向，不是箭头函数

6. 箭头函数中的this

   它的指向在定义的时候就已经确定了

   箭头函数它没有this,看外层是否有函数，有就是外层函数的this,没有就是window

7. 匿名函数中的this

   永远指向了window,匿名函数的执行环境具有全局性，因此this指向window

script标签里的async和defer有什么区别？

它们的区别在于脚本加载和执行的时机：

• async 属性：表示脚本的加载和页面的解析是异步进行的，也就是说同时进行，不会阻塞其他资源的加载。而在文档解析完毕后，立即执行脚本。当存在多个 async 脚本时，这些脚本的加载和执行顺序不能保证。

  示例：<script src="example.js" async></script>

• defer 属性：表示脚本的加载是异步进行的，不会阻塞其他资源的加载，但是执行是在 HTML 解析完成后进行的，并且这些脚本会按照出现的先后顺序依次执行，因此它们之间的执行顺序是可预测的。

  示例：<script src="example.js" defer></script>

总的来说，如果开发者不需要在页面解析成树结构之前立即运行脚本，那么建议使用 async 或 defer，以便让页面更快地呈现给用户。如果需要保证代码的执行顺序，则选用 defer。

setTimeout最小执行时间是多少？

HTML5规定的内容：

​ setTimeout.最小执行时间是4ms

​ setInterval最小执行时间是10ms

箭头函数和普通函数的区别？

不能作为构造函数使用，不能用new

箭头函数就没有原型

箭头函数没有arguments

箭头函数不能用call,apply,bind去改变this的执行

this指向外层第一个函数的this

函数的call、apply、bind的区别？

都是改变this指向和函数的调用，call和applyi的功能类似，只是传参的方法不同

ca11方法传的是一个参数列表

apply传递的是一个数组

bind传参后不会立刻执行，会返回一个改变了this指向的函数，这个函数还是可以传参的，bind()()

cal1方法的性能要比apply好一些，所以cal1用的更多一点

用递归的时候有没有遇到什么问题？

如果一个函数内可以调用函数本身，那么这个就是递归函数 函数内部调用自己 特别注意：写递归必须要有退出条件return

说一下事件循环。

]S是一个单线程的脚本语言

主线程 执行栈 任务队列 宏任务 微任务

主线程先执行同步任务，然后才去执行任务队列里的任务，如果在执行宏任务之前有微任务，那么要先执行微任务，全部执行完之后等待主线程的调用，调用完之后再去任务队列中查看是否有异步任务，这样一个循环往复的过程就是事件循环！

ajax是什么？怎么实现的？

创建交互式网页应用的网页开发技术

在不重新加载整个网页的前提下，与服务器交换数据并更新部分内容

通过XmlHttpRequest对象向服务器发送异步请求，然后从服务器拿到数据，最后通过]S操作DoM更新页面

1. 创建XmlHttpRequest对象xmh
2. 通过xmh对象里的open()方法和服务器建立连接
3. 构建请求所需的数据，并通过xmh对象的send()发送给服务器
4. 通过xmh对象的onreadystate chansge事件监听服务器和你的通信状态
5. 接收并处理服务器响应的数据结果
6. 把处理的数据更新到HTML页面上

get和post有什么区别？

1. get一般是获取数据，post一般是提交数据
2. get参数会放在url上，所以安全性比较差，post是放在body中
3. get请求刷新服务器或退回是没有影响的，post请求退回时会重新提交数据
4. get请求时会被缓存，post请求不会被缓存
5. get请求会被保存在浏览器历史记录中，post不会
6. get请求只能进行url编码，post请求支持很多种

promise的内部原理是什么？它的优缺点是什么？

Promise对象，封装了一个异步操作并且还可以获取成功或失败的结果

Promise主要就是解决回调地狱的问题，之前如果异步任务比较多，同时他们之间有相互依赖的关系，

就只能使用回调函数处理，这样就容易形成回调地狱，代码的可读性差，可维护性也很差

有三种状态：pending初始状态，fulfilled成功状态，rejected失败状态

状态改变只会有两种情况，

pending -> fulfilled; pending -> rejected 一旦发生，状态就会凝固，不会再变

首先就是我们无法取消promise,一旦创建它就会立即执行，不能中途取消

如果不设置回调，promise内部抛出的测u哦鸣就无法反馈到外面

若当前处于pending?状态时，无法得知目前在哪个阶段。

原理：

构造一个Promise实例，实例需要传递函数的参数，这个函数有两个形参，分别都是函数类型，一个是resolve一个是reject

promise.上还有then方法，这个方法就是来指定状态改变时的确定操作，resolve是执行第一个函数，reject是执行第二个函数

promise和async await的区别是什么？

1. 都是处理异步请求的方式
2. promise是ES6,async await是ES7的语法
3. async await是基于promise实现的，他和promise都是非阻塞性的

优缺点：

1. promise是返回对象我们要用then,catch方法去处理和捕获异常，并且书写方式是链式，容易造成代码重叠，不好维护，async await是通过tra catch进行捕获异常
2. async await:最大的优点就是能让代码看起来像同步一样，只要遇到await.就会立刻返回结果，然后再执行后面的操作promise.then()的方式返回，会出现请求还没返回，就执行了后面的操附

浏览器的存储方式有哪些？

1. cookies

   H5标准前的本地存储方式 兼容性好，请求头自带cookie 存储量小，资源浪费，使用麻烦（封装）

2. localstorage

   H5加入的以键值对为标准的方式 操作方便，永久存储，兼容性较好 保存值的类型被限定，浏览器在隐私模式下不可读取，不能被爬虫

3. sessionstorage

   当前页面关闭后就会立刻清理，会话级别的存储方式

4. indexedDB I

   H5标准的存储方式，，他是以键值对进行存储，可以快速读取，适合WEB场景

token的登录流程。

1. 客户端用账号密码请求登录
2. 服务端收到请求后，需要去验证账号密码
3. 验证成功之后，服务端会签发一个token,把这个token发送给客户端
4. 客户端收到token.后保存起来，可以放在cookie也可以是localstorage
5. 客户端每次向服务端发送请求资源的时候，都需要携带这个token
6. 服务端收到请求，接着去验证客户端里的token,验证成功才会返回客户端请求的数据

页面渲染的过程是怎样的？

1. DNS解析
2. 建立TCP连接
3. 发送HTTP请求
4. 服务器处理请求
5. 渲染页面
   1. 浏览器会获取HTML和CSS的资源，然后把HTML解析成DOM树
   2. 再把cSs解析成CSSOM
   3. 把DOM和CSSOM合并为渲染树
   4. 布局
   5. 把渲染树的每个节点渲染到屏幕上（绘制）
6. 断开TCP连接

DOM树和渲染树有什么区别？

DOM树是和HTML标签一一对应的，包括head和隐藏元素

渲染树是不包含head和隐藏元素

精灵图和base64的区别是什么？

精灵图：把多张小图整合到一张大图上，利用定位的一些属性把小图显示在页面上，当访问页面可以减少请求，提高加载速度

base64:传输8Bit字节代码的编码方式，把原本二进制形式转为64个字符的单位，最后组成字符串 base64是会和html css一起下载到浏览器中，减少请求，减少跨域问题，但是一些低版本不支持，若base64体积比原图片大，不利于css的加载。

svg格式了解多少？

基于ML语法格式的图像格式，可缩放矢量图，其他图像是基于像素的，SVG是属于对图像形状的描述，本质是文本文件，体积小，并且不管放大多少倍都不会失真

1. SVG可直接插入页面中，成为D0M一部分，然后用]S或CSS进行操作

   <svg></svg>

2. SVG可作为文件被引入

   <img src="pic.svg"/

3. SVG可以转为base64引入页面

了解过JwT吗？

JSON Web Token通过JSON形式作为在web应用中的令牌，可以在各方之间安全的把信息作为JSON对象传输信息、授权

JWT的认证流程

1. 前端把账号密码发送给后端的接口
2. 后端核对账号密码成功后，把用户id等其他信息作为JwT负载，把它和头部分别进行base64编码拼接后签名，形成一个JWT(token)。
3. 前端每日请求时都会把JWT放在HTTP请求头的Authorization字段内
4. 后端检查是否存在，如果存在就验证JwT的有效性（签名是否正确，token是否过期）
5. 验证通过后后端使用]WT中包含的用户信息进行其他的操作，并返回对应结果

简洁、包含性、因为Token是JSON加密的形式保存在客户端，所以JwT是跨语言的，原则上是任何web形式都支持。

npm的底层环境是什么？

node package manager,node的包管理和分发工具，已经成为分发node模块的标准，是]s的运行环境

npm的组成：网站、注册表、命令行工具

说一下浏览器的缓存策略。

强缓存(（本地缓存)、协商缓存（弱缓存）

强缓：不发起请求，直接使用缓存里的内容，浏览器把 JS,CSS,image等存到内存中，下次用户访问直接从内存中取，提高性能

协缓：需要像后台发请求，通过判断来决定是否使用协商缓存，如果请求内容没有变化，则返回3©4，浏览器就用缓存里的

内容

强缓存的触发：

​ HTTP1.0:时间戳响应标头

​ HTTP1.1:Cache-Control响应标头

协商缓存触发：

​ HTTP1.0:请求头：if-modified-since响应头：last-modified

​ HTTP1.l:请求头：if-none-match响应头：Etag

说一下什么是同源策略

同源策略是浏览器的核心，如果没有这个策略就会遭受网络攻击

主要指的就是协议+域名+端口号三者一致，若其中一个不一样则不是同源，会产生跨域

三个允许跨域加载资源的标签：img link script

跨域是可以发送请求，后端也会正常返回结果，只不过这个结果被浏览器拦截了！

JSONP CORS websocket 反向代理

防抖和节流是什么？

都是应对页面中频繁触发事件的优化方案 防抖：避免事件重复触发 使用场景：1.频繁和服务端交互2.输入框的自动保存事件 节流：把频繁触发的事件减少，每隔一段时间执行 使用场景：scro11事件

解释一下什么是json?

JSON是一种纯字符串形式的数据，它本身不提供任何方法，适合在网络中进行传输 JSON数据存储在，json文件中，也可以把]SoN数据以字符串的形式保存在数据库、Cookise中 js提供了JSON.parse()JSON.stringify() 什么时候使用json:定义接口：序列化：生成token;配置文件package.json

HTML5 CSS3

语义化的理解。

在写HTML页面结构时所用的标签有意义

头部用head主体用main底部用foot,·.

怎么判断页面是否语义化了？

把cSS去掉，如果能够清晰的看出来页面结构，显示内容较为正常

为什么要选择语义化？

1. 让HTML结构更加清晰明了
2. 方便团队协作，利于开发
3. 有利于爬虫和SE0
4. 能够让浏览器更好的去解析代码
5. 给用户带来良好的体验

H5C3有哪些新特性？

H5的新特性：

1. 语义化的标签
2. 新增音频视频
3. 画布canvas
4. 数据存储1 ocalstorage sessionstorage
5. 增加了表单控件emai1 url search...
6. 拖拽释放API

CSS3的新特性：

• 新增选择器：属性选择器、伪类选择器、伪元素选择器
• 增加了媒体查询
• 文字阴影
• 边框
• 盒子模型box-sizing
• 渐变
• 过度
• 自定义动画
• 背景的属性
• 2D和3D

如何理解MWM的？ 是Model-View-ViewModel的缩写。前端开发的架构模式 M:模型，对应的就是data的数据 V:视图，用户界面，DOM VM:视图模型：Vue的实例对象，连接View和Model的桥梁 核心是提供对View和ViewModel的双向数据绑定，当数据改变的时候，ViewModel能监听到数据的变化，自动更新视图， 当用户操作视图的时候，ViewModel也可以监听到视图的变化，然后通知数据进行改动，这就实现了双向数据绑定 ViewModel通过双向绑定把View和Model:连接起来，他们之间的同步是自动的，不需要认为干涉，所以我们只需要关注业 务逻辑即可，不需要操作DOM,同时也不需要关注数据的状态问题，因为她是由MM统一管理

Vue

如何理解MVVM的？

是Model-View-ViewModel的缩写。前端开发的架构模式

M: 模型，对应的就是data的数据 V: 视图，用户界面，DOM VM: 视图模型：Vue的实例对象，连接View和Model的桥梁

核心是提供对View和ViewModel的双向数据绑定，当数据改变的时候，ViewModel能监听到数据的变化，自动更新视图， 当用户操作视图的时候，ViewModel也可以监听到视图的变化，然后通知数据进行改动，这就实现了双向数据绑定 ViewModel通过双向绑定把View和Model:连接起来，他们之间的同步是自动的，不需要认为干涉，所以我们只需要关注业 务逻辑即可，不需要操作DOM,同时也不需要关注数据的状态问题，因为她是由MM统一管理

vue路由的hash模式和history模式有什么区别？

1. hash的路由地址上有#号，history模式没有
2. 在做回车刷新的时候，hash模式会加载对应页面，history会报错4a4
3. hash模式支持低版本浏览器，history.不支持，因为是H5新增的API
4. hash不会重新加载页面，单页面应用必备
5. history有历史记录，H5新增了pushState和replacestate()去修改历史记录，并不会立刻发送请求
6. history需要后台配置