h5新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
CSS3新增的属性
border-radius
box-shadow
border-image
background-size
text-shadow
transform
box-sizing
垂直居中的方式
行高=高
Margin auto 0
绝对定位 top-50%,自身宽度的-50%
flex布局 align—center
水平居中的方式
绝对定位
flex布局 juest—center
margin 0 auto
text-align center
垂直居中DIV
<div class="father">
<div class="son">我是垂直居中的div</div>
</div>
1.绝对定位(盒子宽高已知)
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;(-盒子一半宽度)
margin-top: -150px;(-盒子一半高度)
width: 300px;
height:300px;
background-color: blue;
}
2.绝对定位(宽高已知)
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son{
position:absolute;
margin:auto;
top:0; left:0; bottom:0;right:0;
width: 300px;
height:300px;
background-color: blue;
}
3.定位 (宽高未知)
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
}
4.flex布局(父元素设置)
.father {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background-color: red;
}
两栏布局左边固定右边自适应
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
1.float布局
.left {
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
.right {
margin-left: 200px;
height: 200px;
background-color: red;
}
2.绝对定位
.father {
position: relative;
height: 200px;
}
.left {
position:absolute;
width: 200px;
height: 100%;
float: left;
background-color: blue;
}
.right {
position:absolute;
height: 100%;
left:200px;
right: 0;
background-color: red;
}
3.flex布局
.father {
height: 300px;
width: 100%;
display: flex;
}
.left {
width: 300px;
height: 100%;
background-color: blue;
}
.right {
flex: 1;
height: 100%;
background-color: red;
}
三栏布局左右固定中自适应
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="main"> </div>
</div>
1.float布局
.father{
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
float: left;
background-color: red
}
.main {
margin-left: 200px;
margin-right: 200px;
background-color: blue
}
.right {
float: right;
width: 200px;
background-color: yellow
}
2.绝对定位
.father{
position: relative;
height: 50px;
div{
position: absolute;
height: 100%;
}
}
.left {
left: 0;
width: 200px;
background-color: red
}
.main {
left: 200px;
right: 200px;
background-color: blue
}
.right {
right: 0;
width: 200px;
background-color: yellow
}
3.flex布局
.father {
display: flex;
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
background-color: red
}
.main {
flex: 1;
background-color: blue
}
.right {
width: 200px;
background-color: yellow
}
介绍一下盒模型
1.盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成
2.盒模型分为IE盒模型和W3C标准盒模型。
3.W3C标准盒模型又叫content-box,元素宽度/高度由border+padding+content组成。
4.IE盒模型又叫border-box,元素宽度/高度由content组成。
阐述清除浮动的几种方式(常见问题)
1.父级div定义 height
2.父级div定义 overflow:hidden
- 结尾处加空div标签 clear:both
display none visibility hidden区别?
display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素
visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
重绘与重排
重绘(repaint):当元素的外观属性发生变化,即元素的颜色,背景色发生改变但没有影响到dom树的位置改变的时候,会触发重绘;
**重排(reflow):**当页面内的元素尺寸发生了变化,导致部分或者全部DOM树,渲染树需要重新更新,会触发重排, 重排又称为回流;
如何产生:一般情况下,页面的重排必定会导致重绘,但重绘不一定会导致重排,写echarts容易引起重排
如何避免:避免频繁使用 style,而是采用修改class的方式。将动画效果应用到position属性为absolute或fixed的元素上。
也可以先为元素设置display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
使用createDocumentFragment进行批量的 DOM 操作。
对于 resize、scroll 等进行防抖/节流处理。
bootstrap响应式实现的原理**
百分比布局+媒体查询
基本数据类型和引用数据类型
基本数据类型:直接存储在栈内存中,占据空间小,大小固定,属于被频繁使用的数据。
引用数据类型:同时存储在栈内存与堆内存中,占据空间大,大小不固定。
引用数据:类型将指针存在栈中,将值存在堆中。 当我们把对象值赋值给另外一个变量时,复制的是对象的指针,指向同一块内存地址
引用类型存储把值存储在堆内存中,堆内存是从下往上存储。生成唯一内存地址。然后在栈内存中把地址赋值给变量。栈内存是从上往下存储的
堆和栈有什么区别存储机制
栈 是一种连续储存的数据结构,具有先进后出的性质。
通常的操作有入栈(压栈),出栈和栈顶元素。想要读取栈中的某个元素,就是将其之间的所有元素出栈才能完成。
堆 是一种非连续的树形储存数据结构,每个节点有一个值,整棵树是经过排序的。特点是根结点的值最小(或最大),且根结点的两个子树也是一个堆。常用来实现优先队列,存取随意。
BFC
即块级格式化上下文,它是页面中一个独立的容器,容器中的元素不会影响到外面的元素
触发BFC
的条件包含不限于:
- 根元素,即HTML元素
- 浮动元素:float值为left、right
- overflow值不为 visible,为 auto、scroll、hidden
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed
Javascript中的定时器有哪些?他们的区别及用法是什么?
setTimeout 只执行一次
setInterval 会一直重复执行
原型,原型链、构造函数
原型:JS中的对象都包含了一个prototype的内部属性,这个属性所对应的就是该对象的原型。
构造函数:原型对象包含一个constructor属性,对应创建所有指向该原型的实例的构造函数。
原型链:原型链是是有一些用来继承和共享属性的对象组成的对象链。并且原型链的长度是有限的,
原型链其实就是继承链,首先在这个对象的自身查找,如果没有该属性,就在其原型链上一层一层向上查找,如果查到原型链的顶端也没有该属性,那么就返回null。
当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。
JavaScript六种继承
1.原型链:原型链继承基本思想就是让一个原型对象指向另一个类型的实例
2.借用构造函数 :为了解决原型中包含引用类型值所带来的问题 这种方法的思想就是在子类构造函数的内部调用父类构造函数,可以借助apply()和call()方法来改变对象的执行上下文
3.组合继承(原型链+构造函数):使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承
4.原型式继承:借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型
5.寄生式继承:寄生式继承的思路与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数
6.寄生组合式继承:组合模式(原型链+构造函数)中,继承的时候需要调用两次父类构造函数 父类
undefined 和 null 区别
null表示没有对象,即不应该有值,经常用作函数的参数,或作为原型链的重点
undefined表示缺少值,即应该有值,但是还没有赋予(变量提升时默认会赋值为undefined,函数参数未提供默认为undefined,函数的返回值默认为undefined)
常见的HTTP状态码
200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
400 (错误请求) 服务器不理解请求的语法。
403 (禁止) 服务器拒绝请求。
500 (服务器内部错误) 服务器遇到错误,无法完成请求。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
常用的es6的功能?
1.let、const
let定义变量,可以被重新赋值;const定义常量,不能被重新赋值
2.解构赋值
按照一定的模式从数组或者对象中取值,对变量进行赋值的过程
3.模板字符串 ‘’
4.块级作用域
5.箭头函数
this指向?
1.普通函数胡它还会this指向window
2.构造函数this指向实例对象
3.调用方法this指向改方法所属的对象
4.定时器this指向window
改变this指向的方法?
1.call()
2.apply()
3.bind()
数组去重?
- IndexOf()
- 双重for循环
- es6的 […new Set()]
- filter()
- sort()
1.Set去重
var arr = [1,1,8,8,12,12,15,15,16,16];
function unique (arr) {
return Array.from(new Set(arr))
}
console.log(unique(arr)) //1,8,12,15,16
闭包的理解
理解:主要是为了设计私有的方法和变量。
优点:可以避免全局变量造成污染。
缺点:闭包会常驻内存,增加内存使用量,使用不当会造成内存泄漏。
特征:(1)函数嵌套函数。(2)在函数内部可以引用外部的参数和变量。(3)参数和变量不会以垃圾回收机制回收。
Promise
异步编程的一种解决方案,用来解决回调地狱
三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败) (Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。)
resolved函数作用:将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved)。
reject函数的作用:将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected)。
Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。
then: Promise 实例添加状态改变时的回调函数。可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。
缺点:无法取消Promise,一旦新建它就会立即执行,无法中途取消。如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
说一下宏任务和微任务?
JS是单线程,代码自上而下执行;
宏任务:当前调用栈中执行的代码成为宏任务(定时器)
微任务:当前宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为事件的回调(promise.then/proness.nextTick)
宏任务与微任务执行顺序:
script代码为第一层宏任务,如果有setTimeout,setInterval,则他们的回调函数会成为第二层的宏任务,
promise.then()和process.nextTick()是微任务,在执行完该一层的宏任务后执行,且process.nextTick()优先于promise.then();
数组一些常用的方法(es5+es6)
1.添加(push与unshift)
2.删除(pop与shift)
3.从数组中连续删除、插入数据:splice()
4.数组串联:join()
5.数组排序:sort()
6.数组颠倒:reverse()
7.数组抽取:slice()
8.数组合并:concat()
9.数组转为字符串:toString()
(ES5中数组常用方法)
1.forEach()
2.map(映射)
3.filtter(过滤)
4.every(所有)和some(存在)
5.reduce()和reduceRight()
6.indexOf()和lastIndexOf()
对象一些常用的方法
1、Object.keys( ) 对象不具有length属性,因此,你也可以通过Object.keys( )用来获取对象的长度
2、Object.freeze( ) 防止对象中的数据突变
3、Object.seal( ) 它可以防止向对象添加新属性,但是可以更改和更新现有属性
4、Object.values( )允许你将对象内的所有值作为数组获取
5、Object.entries( ) 它允许你同时获取对象的键和值,并返回一个多维数组,该多维数组包含每个键和值的其他数组。
6、Object.create( ) 用于从另一个现有对象的原型创建一个新对象。
怎样添加、移除、移动、复制、创建和查找节点?
1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性
页面渲染html的过程?
1.浏览器根据请求的URL交给DNS域名解析,找到真实IP;
2.浏览器根据 IP 地址向服务器发起 TCP 连接,与浏览器建立 TCP 三次握手
3、发送HTTP请求,接受HTTP响应
5.服务器处理请求并返回内容。
6、根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件,浏览器解析HTML代码,请求js,css等资源,最后进行页面渲染,呈现给用户
TCP三次握手和四次挥手
三次握手:(客户端和服务端都需要直到各自可收发,因此需要三次握手)
第一次:客户端请求建立链接
第二次:服务器端针对客户端的SYN的确认应答并建立链接
第三次:客户端针对服务器端的SYN的确认应答
完成三次握手,随后客户端与服务器端之间可以开始传输数据了
四次挥手:
第一次:客户端请求断开链接
第二次:服务器端针对客户端的FIN的确认应答
第三次:服务器端请求断开链接
第四次:客户端针对服务器端的FIN的确认应答
服务器收到客户端的确认后,就关闭链接,此刻客户端等待一段时间后没有收到回复,就已经证明服务器端已经关闭,这时候客户端也可以关闭链接了
HTTP与HTTPS
http:超文本传输协议,是一个客户端和服务器端请求和应答的标准(TCP)
https:是以安全为目标的HTTP通道,即HPPT下加入SSL层,比http更安全
区别:
http传输的数据都是未加密的(明文),https协议是由https和SSL协议构建的可进行加密传输和身份认证的网络协议,需要ca证书,费用较高
TCP与UDP的区别
TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接。
TCP面向字节流,实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的
每一条TCP连接只能是点到点的;UDP支持一对一,一对多,多对一和多对多的交互通信
TCP首部开销20字节;UDP的首部开销小,只有8个字节。
TCP提供可靠的服务。UDP适用于一次只传少量数据、对可靠要求不高的环境。
GET和POST的区别
1、get请求不安全,post安全 ;
2、get请求数据有大小限制,post无限制 ;
3、get请求参数会在url中显示,容易被他人窃取,post在请求体中,不会被窃取;
4、post需要设置请求头。
如何解决跨域
什么是跨域?
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域
常见的:
1、JSONP跨域 —原理就是利用了script标签,在标签外套了一层壳,利用标签特性达到跨域加载资源的效果
2、跨域资源共享(CORS)—跨站资源共享,它是跨域的官方解决方案,升级版的JSONP。原理是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。请求和响应都不包含cookie信息。
3、nginx代理—代理跨域。反向代理跨域。
4、WebSocket协议跨域 ----不受同源策略影响。原理是因为它不使用HTTP协议,而使用一种自定义的协议,专门为快速传输小数据设计
对MVC和MVVM的理解
M:model(数据模型),V:view(视图),C:controller(逻辑处理),VM:(连接model和view)
MVC:单向通信。必须通过controller来承上启下。
MVVM:数据双向绑定,数据改变视图,视图改变数据。
深拷贝,浅拷贝
浅拷贝:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。
深拷贝:将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象
防抖与节流
防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
应用场景:
提交按钮、用户注册时候的手机号验证、邮箱验证、
节流:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
应用场景:
window对象的resize、scroll事件
拖拽时候的mousemove
射击游戏中的mousedown、keydown事件
文字输入、自动完成的keyup事件性能优化
性能优化
- 减少http请求次数
- 减少DNS查找
- 避免重定向
- 使用Ajax缓存
- 少用全局变量、减少DOM操作的使用
- 优化图片大小,通过CSS Sprites(精灵图)优化图片,
- 将css放在顶部,将js放在底部
webpack是怎么打包的,babel又是什么
Webpack:把所有依赖打包成一个 bundle.js文件,通过代码分割成单元片段并按需加载。Webpack是以公共JS的形式来书写脚本的,但对AMD/CMD的支持也很全面,方便旧项目进行代码迁移。
把项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
babel 将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。
git 和 svn的区别
SVN是集中式版本控制系统,版本库是集中放在中央服务器的,首先要从中央服务器哪里得到最新的版本,干完活后,需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作(如果在局域网还可以,带宽够大,速度够快,如果在互联网下,如果网速慢的话,就纳闷了)
Git是分布式版本控制系统,没有中央服务器的,每个人的电脑就是一个完整的版本库,这样,工作的时候就不需要联网了,因为版本都是在自己的电脑上。自己在电脑上改了文件A,其他人也在电脑上改了文件A,这时,只需把各自的修改推送给对方,就可以互相看到对方的修改了。
webSocket
webSocket:只要建立一次连接,就可以连续不断的得到服务器推送的消息,节省带宽和服务器端的压力。
WebSocket协议是基于TCP的一种新的网络协议。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
Vue中双向数据绑定是如何实现的?
(答:通过数据劫持结合发布—订阅模式,通过Object.defineProperty()为各个属性定义get、set方法,在数据发生改变时给订阅者发布消息,触发相应的事件回调。)
getter: 是读取对象属性时调用的函数(实际上执行的是get方法)
setter: 是写入对象属性时调用的函数(实际上执行的是set方法)
vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法
vue生命周期
概念:从创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程,称为为Vue 实例的生命周期。
beforeCreate:创建前。此时,组件实例刚刚创建,还未进行数据观测和事件配置,拿不到任何数据。
created:创建完成。vue 实例已经完成了数据观测,属性和方法的计算(比如props、methods、data、computed和watch此时已经拿得到),但尚未开始挂载。
beforeMount:挂载前。挂在开始之前被调用,相关的render函数首次被调用(虚拟DOM)。编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂在html到页面上。
mounted:挂载完成。也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。
beforeUpdate:在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,不会触发附加地重渲染过程。
updated:更新后。在由于数据更改导致地虚拟DOM重新渲染和打补丁之后调用,
beforeDestroy;销毁前。在实例销毁之前调用,实例仍然完全可用。(一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件)
destroyed:销毁后。在实例销毁之后调用,调用后,vue实列指示的所有东西都会解绑,所有的事件监听器会被移除。
其他:
activated:在keep-alive组件激活时调用。
deactivated:在keep-alive组件停用时调用。
组件之间如何传值
**父组件向子组件传值 ** 通过 props
传值。
子组件向父组件传值 $emit
绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg
传递给父组件,父组件通过 v-on
监听并接收参数。
ref/refs(父子组件通信)
一、Vue父子 组件之间传值
子组件通过props来接受数据和通过$emit来触发父组件的自定义事件;
二、兄弟组件之间的传值
建一个公共组件bus.js.。传递方通过事件触发bus.
e
m
i
t
。
接
收
方
通
过
在
m
o
u
n
t
e
d
(
)
生
命
周
期
里
触
发
b
u
s
.
emit。接收方通过在mounted(){}生命周期里触发bus.
emit。接收方通过在mounted()生命周期里触发bus.on。
三、可以通过Vuex 来跨组件传参。路由之间如何传参
路由传值的区别
1.params只能用name来引入路由,query用path/name来引入
2.params类似于post,query更加类似于我们ajax中get传参,说的再简单一点,前者在浏览器地址栏中不显示参数,后者显示,所以params传值相对安全一些
3.取值用法类似分别是this.
r
o
u
t
e
.
p
a
r
a
m
s
.
n
a
m
e
和
t
h
i
s
.
route.params.name和this.
route.params.name和this.route.query.name。
4.params传值一刷新就没了,query传值刷新还存在,
路由之间如何传参
-
跳转时使用push方法拼接携带参数**
this.$router.push({ path: `/getlist/${id}`, })
- 通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'Getlist',
params: {
id: id
}
})
-
使用path来匹配路由,然后通过query来传递参数**
this.$router.push({ path: '/getlist', query: { id: id } })
谈一谈VUEX
原理:Vuex是专门为vue.js应用程序设计的状态管理工具。
构成:
state:vuex的基本数据,用来存储变量。
mutations:提交更改数据,同步更新状态。
actions:提交mutations,可异步操作。
getters:是store的计算属性。
modules:模块,每个模块里面有四个属性。
watch和computed的区别
computed一定有返回值,而watch不需要返回值
computed是依赖的数据发生改变时重新调用, watch是监听的响应式数据发生改变时重新调用
watch和methods的区别
methods是每次调用都会执行函数
watch不需要调用,并且只有监听数据发生改变时才会重新调用
Route和router的区别
- route:是路由信息对象,包括“path,parms,hash,name“等路由信息参数。
- Router:是路由实例对象,包括了路由跳转方法,钩子函数等。
v-show和v-if的区别
- v-if:组件的销毁和重建,更适合带有权限的操作,切换开大。如果开始条件为false则什么都不做,只有为true才会编译。
- v-show:css切换,隐藏显示更适合频繁切换。在任何情况下都会被编译,然后被缓存,而且dom元素会被保留。
vue中data为什么是函数而不是对象?
在Vue中组件是可以被复用的,而当data是一个函数的时候,每一个实例的data都是独立的,不会相互影响了。
Vue导航守卫的钩子函数有哪些?
全局守卫
- router.beforeEach:全局前置守卫,进入路由之前
- router.afterEach:全局后置钩子,进入路由之后
vue首屏加载优化
第一,路由懒加载。
第二,使用CDN引入第三方依赖。
1. 为什么使用CDN
使用CDN主要解决两个问题:
- 打包时间太长、打包后代码体积太大,请求慢
- 服务器网络不稳带宽不高,使用cdn可以回避服务器带宽问题
第三,按需加载第三方类库
第四,去掉编译文件中map文件
第五,将静态资源使用cdn加载
第六,开启 gzip压缩
第七,冗余代码
第八,浏览器缓存
基本原理:浏览器缓存分强缓存和协商缓存,他们是将网络资源存储在本地,等待下次请求该资源时,如果命中就不需要到服务器重新请求该资源,直接在本地读取该资源。
- 强缓存:在web服务器返回的响应中添加Expires和Cache-Control Header
- 协商缓存:通过【Last-Modified, If-Modified-Since】和【ETag, If-None-Match】两对Header分别管理
第九,图片压缩
前端的报错类型
1、xxx is not defined
xxx 没有定义
2、xxx is not a function
xxx 不是一个函数
xxx此时是undefined
3、Cannot read property ‘xxx’ of undefined
不能读取undefined的xxx属性
xxx前面的变量是undefined
4、Cannot set property ‘xxx’ of null
不能给null设置xxx属性
xxx前面的变量是null
请描述一下 cookies sessionStorage和localstorage区别
**相同点:**都存储在客户端
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。