学习前端的第n天，总结一下学过的知识

1.HTML

HTML5新特性
1.用于绘画的canvas元素
2.用于媒体回访的video和audio元素
3.对本地离线存储有更好的支持
4.新的特殊内容元素，比如 article，footer，header，nav，section
5.新的表单控件，比如calendar，date，time，emall，url，search
6.地理位置 getCurrentPosition()
7.拖拽释放（Drag和Drop）API
行内元素、块级元素、空元素有哪些？

首先我们得了解一下这各种元素是什么，css规定每个元素都应该有默认的display的值。值为inline的就是行内元素，block则是块级元素。行内元素与其他元素共占一行，无法给它们设定宽高和上下边距（设置了也不会生效）设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。块级元素则是独占一行，可以设定宽高和上下左右边距。空元素则是指元素中间没有内容，类似于单标签元素（注意，没有内容是指在html代码中而不是在页面上没有内容）。欢迎补充

行内元素：a,b,span,img,input,strong,select，label，em，button

块级元素：div，ul，li，dl，h系列，p，table，blockquote，form，ol

空元素：img，hr，br，link，meta，source，input

嵌套关系：

1.块级元素：
块级元素可以嵌套块级元素，行内元素，行内块级元素
2.行级元素：
行级元素不能嵌套块级元素，如要嵌套，需要把行级元素转成块级元素在嵌套
3.行内块级元素：
只能嵌套行级元素
4.注意：h1-h6,p不能嵌套块级元素

标签语义化的作用
1.HTML结构更加清晰，当样式无法加载的时候，还能显示基本的页面结构。
2.代码可读性更好
3.有利于搜索引擎通过标签语义确定上下文
4.方便其他设备解析，如盲人阅读器、移动设备等
5.无障碍阅读
6.便于团队开发和维护
内联框架
iframe 可用作超链接的目标（target）。超链接的 target 属性必须引用 iframe 的 name 属性
HTML < meta> 元素
元数据（metadata）是关于数据的信息。
< meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
< meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
响应式 Web 设计
RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

2.CSS

CSS引入方式

1.行内样式：

将css代码写在元素开始标签的style属性中，可以设置多个样式，使用";"隔开

2.内部样式：

在当前网页head标签中，写上一对style标签，然后在style标签中，使用选择器编写css代码

3.外部样式：

需要一个单独的css文件书写css样式，在head标签中使用link标签把单独的css文件关联起来，在同一个页面可以引入多个css文件，是使用最多的样式

4.导入样式：

把一个css文件通过@import url(“要导入的css文件路径”);导入到另一个css文件中，使用导入样式，会先加载html,再加载css，会造成页面样式延迟，不常用，也不建议使用
link和@import的区别

1.作用上：link是HTML的一个标签，不只是用来引入CSS文件，还可以定义 RSS、rel 连接属性等。而@import是css提供的语法规则，只用于导入样式表。

2.加载顺序的区别：加载页面时，由link引入的CSS文件被同时加载，而用import方法则在页面加载完毕以后再加载。

3.兼容性区别：link是HTML元素，在哪都能用；而@import是CSS2.1才有的语法，IE5+才能用。不过现在基本上已经被全面支持。

4.DOM操作可控性：前面说了，link是html标签，js能进行DOM操作，因此也能给页面添加link标签引入新的文件；而import就无法进行这样的操作了。
CSS特性
1.继承性

后代元素继承祖先元素的样式，只能继承文字，文本样式，其它样式不能继承,color,text-开头，font-开头，line-开头，可以继承

2.叠加性

当多个选择器选中的是同一个（类）元素时，加的是不一样的样式，所有选择器都会生效

3.层叠性

当多个选择器选中的是同一个（类）元素时，加的是一样的样式，只有一个选择器都会生效
CSS优先级

优先级从低到高:

继承样式 - 浏览器预设的样式 -通用选择器 - 标签选择器 - 类选择器 -id选择器 -行内样式

盒子模型

box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒子模型），border-box为IE盒子模型（怪异盒子模型）。

CSS盒模型和IE盒模型的区别：

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。盒子总宽度/高度=width/height+padding+border+margin。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。盒子总宽度/高度=width/height + margin

外边距注意事项：元素上下排列时，上下外边距会合并（上下外边距取最大值），元素左右排列时，左右外边距会叠加（左右外边距会相加)

overflow

1.visible:内容不会被修剪，会显示在元素框之外默认值
2.hidden:内容会被修剪，溢出的内容不可见
3.scroll:内容会被修剪,会显示滚动条，以便查看溢出的内容
4.auto:当内容大于元素框时，内容会被修剪,会显示滚动条，以便查看溢出的内容。当内容小于元素框时，不会显示滚动条

CSS定位
CSS选择器
CSS过渡动画transition

1.transition 简写属性，用于在一个属性中设置四个过渡属性。
2.transition-property 规定应用过渡的 CSS 属性的名称：
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果，默认。
属性名称
3.transition-duration 定义过渡效果花费的时间。默认是 0s。单位是秒或毫秒
4.transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
5.transition-delay 规定过渡效果何时开始。默认是 0s。
CSS 关键帧动画 animation

@keyframes设置动画规则，可以理解为一个剧本
- name动画的名字必需填写
- 可以使用百分比0%-100%或者from…to…必填内容；
- 需要变化css的样式；必需；
animation 所有动画属性的简写属性，用于设置六个动画属性：animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction
animation-name 属性为 @keyframes 动画规定名称。若设置为none则覆盖已有的动画效果
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0s
animation-timing-function 规定动画的速度曲线。默认是 “ease”
animation-delay 规定动画何时开始。默认是 0s
animation-iteration-count 规定动画被播放的次数。默认是 1。infinite为无限次播放
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal 顺向播放”。/ alternate 动画应该轮流反向播放
animation-play-state 规定动画是否正在运行或暂停。默认是 “running 规定动画正在播放。”。/paused 规定动画暂停
animation-fill-mode 规定对象动画时间之外的状态

弹性布局
1.父元素属性字段

flex-direction ：(适用于父类容器的元素上):设置或检索伸缩盒对象的子元素在父容器中的位置。
row：横向从左到右排列（左对齐），默认的排列方式。

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column：纵向排列。

column-reverse:反转纵向排列，从后往前排，最后一项排在最上面

flex-wrap (适用于父类容器上) 设置或检索伸缩盒对象的子元素超出父容器时是否换行。
nowrap：当子元素溢出父容器时不换行。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：当子元素溢出父容器时自动换行,方向同 wrap反转排列。
justify-content (适用于父类容器上) 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start：弹性盒子元素将向行起始位置对齐。

flex-end：弹性盒子元素将向行结束位置对齐。

center：弹性盒子元素将向行中间位置对齐。

space-between:弹性盒子元素会平均地分布在行里。

space-around:弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

注：主轴与侧轴的概念
主轴就是弹性盒子子元素沿着排列的轴；与主轴垂直的轴称为侧轴。
如果你有 row ,则主轴是水平方向，侧轴是垂直方向。
如果你有 column,则主轴是垂直方向，侧轴是水平方向。
align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch（默认属性）：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
align-content (适用于父类容器上) 设置或检索弹性盒堆叠伸缩行的对齐方式。（属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）
flex-start：各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end：各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
center：各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。
space-between：各行在弹性盒容器中平均分布。
space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
stretch：各行将会伸展以占用剩余的空间。

2.子元素属性字段

align-self (适用于弹性盒模型子元素)设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸。
order (适用于弹性盒模型容器子元素) 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
flex (适用于弹性盒模型子元素) 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
none：none关键字的计算值为: 0 0 auto
flex-grow flex-shrink flex-basis
flex-grow (适用于弹性盒模型容器子元素) 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
lex-shrink (适用于弹性盒模型容器子元素) 设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）
flex-basis (适用于弹性盒模型容器子元素)
auto：无特定宽度值，取决于其它属性值
用长度值/百分比来定义宽度。不允许负值

关于flex布局的教程，可前往阮一峰老师的博客学习
Flex 布局教程：语法篇

CSS计数器

CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。
计数器使您可以根据内容在文档中的位置来调整其外观
CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

3.JavaScript

Javascript组成

JavaScript的实现包括以下3个部分：

1、核心（ECMAScript）：描述了JS的语法和基本对象。

2、文档对象模型（DOM）：处理网页内容的方法和接口。DOM最根本对象是document（实际上是window.document）

3、浏览器对象模型（BOM）：与浏览器交互的方法和接口。BOM的最根本对象是window

引入方式

内部引入（script标签）
外部引入（script标签，设置src属性）
行内引入（结合事件）

for in和for of的区别

for in 取 key(键) ; for of 取 value(值)
for of 只能用于数组遍历 ; for in 还可以用于对象属性的遍历
for in是ES5标准，遍历key. for of是ES6标准，遍历value.

取m-n之间的随机数 [m,n]

Math.floor(Math.random()*(n-m+1))+m

Array.of()和Array.from()

①Array.of()：为了弥补new Array()行为不一致的问题，而新增的方法，将传入的参数作为新数组的项

//行为不一致
let arr = new Array(10)        //arr是length为10的数组
let arr1 = new Array(2,1)      //arr1是[2,1]let arr2 = Array.of(10)        //arr2是[10]

②Array.from()：用于将类数组对象和具有iterator接口的对象，转为真正的对象

基本数据类型
Number、String、Boolean、Null、 Undefined、symbol(ES6)
引用数据类型
Object（JS中除了基本数据类型以外都是对象，数组函数也是对象）
typeof返回值
number, boolean, string, undefined, object, function,symbol(ES6).
typeof(NaN):number
typeof null 会返回object
arguments对象(函数内置类数组对象)
  1.在函数代码中，使用特殊对象arguments存储函数调用传递给该函数的所有参数
  2.还可以用arguments对象检测函数的参数个数，引用属性arguments.length即可
  3.arguments[0]表示第一个参数，arguments[1]表示第二个参数
  4.通过arguments还可以动态的添加参数

function sum(){var sum=0;for(var i=0;i<arguments.length;i++){sum+=arguments[i];}return sum;}alert(sum(1,2,3));

创建对象的几种模式

1.基本模式

var people=new Object()people.name='孙悟空'people.wuqi='金箍棒'people.jineng=function(){return this.name+'的武器是'+this.wuqi}alert(people.name)  alert(people.jineng())

2.工厂模式

特点：用函数来封装创建对象的细节，内部最终返回一个对象。　　
优点：解决了创建多个相似对象的问题
缺点：不能确定对象的类型（即无法用 instanceof 去判断）

function createPeople(name,wuqi){var people=new Object()people.name=namepeople.wuqi=wuqipeople.jineng=function(){return this.name+'的武器是'+this.wuqi}return people//注意要返回}var wukong=createPeople('孙悟空','金箍棒')var bajie=createPeople('猪八戒','钉耙')alert(wukong.jineng())alert(bajie.jineng())

3.构造函数模式

1.new 调用的函数为构造函数，构造函数和普通函数区别仅仅在于是否使用了new来调用。
2.所谓“构造函数”，就是专门用来生成“对象”的函数。它提供模板，作为对象的基本结构。
3.构造函数内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。
4.instanceof 验证原型对象与实例对象之间的关系。
5.使用call和apply方法实现对象的冒充
6.问题：浪费内存–使用构造函数每生成一个实例，都增加一个重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

调用过程：
1.使用new操作符创建一个新对象
2.将构造函数的作用域赋给新对象（this就指向了新对象）
3.执行构造函数里的代码
4.返回新对象

function createPeople(name,wuqi){this.name=namethis.wuqi=wuqithis.jineng=function(){return this.name+'的武器是'+this.wuqi}}var wukong=new createPeople('孙悟空','金箍棒')var bajie=new createPeople('猪八戒','钉耙')// alert(wukong.jineng())// alert(wukong instanceof createPeople)//true,验证原型对象和实例对象的关系var monster1=new createPeople('小妖','长矛')var monster2=new createPeople('小妖','长矛')alert(monster1.jineng==monster2.jineng)//false，与工厂模式一样，两个对象的实例的地址是不同的，说明两个对象会占用两个地址空间的内存

4.原型模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。可以把那些不变的属性和方法，直接定义在prototype对象上。

1.prototype方式定义的方式，函数不会拷贝到每一个实例中，所有的实例共享prototype中的定义，节省了内存。
2.Prototype模式的验证方法

isPrototypeOf()这个方法用来判断，某个proptotype对象和某个实例之间的关系。
hasOwnProperty()每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。
in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。in运算符还可以用来遍历某个对象的所有属性。

3.对象的constructor属性用于返回创建该对象的构造函数.

在JavaScript中，每个具有原型的对象都会自动获得constructor属性。
这是一个指针，指向prototype属性所在的函数

function People(){} //注意花括号People.prototype.name='喽啰'People.prototype.wuqi='大刀'People.prototype.run=function(){return this.name+'的武器是'+this.wuqi}var monster1=new People()monster1.job=[]var monster2=new People()// alert(monster1.name+'\n'+monster1.run())// alert(monster2.name+'\n'+monster2.run())// alert(monster1.run==monster2.run)//true// alert(People.prototype.isPrototypeOf(monster1))//true,判断某个proptotype对象和某个实例之间的关系。// alert(monster1.hasOwnProperty('name'))//false,每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。// alert(monster1.hasOwnProperty('job'))//truealert('name' in monster1)//true,in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。in运算符还可以用来遍历某个对象的所有属性。// 原型模式,太繁琐function People(){}People.prototype.name='喽啰'People.prototype.wuqi='大刀'People.prototype.run=function(){return this.name+'的武器是'+this.wuqi}var bajie=new People()alert(bajie.constructor)//function People(){}// 在JavaScript中，每个具有原型的对象都会自动获得constructor属性// 对象的constructor属性用于返回创建该对象的构造函数function Monster(){}Monster.prototype={//原型字面量方式会将对象的constructor变为Objectconstructor:Monster,//function Monster(){},强制指回构造函数name:'喽啰',wuqi:'大刀',job:['巡山','打更']//注意用：,不是=}var monsterA=new Monster()//alert(monsterA.name)alert(monsterA.constructor)//function Object() { [native code] }

原型方式的问题:
构造函数没有参数。使用原型方式，不能通过给构造函数传递参数来初始化属性的值
属性指向的是对象，而不是函数时。函数共享不会造成问题，但对象却很少被多个实例共享，如果共享的是对象就会造成问题。

虽然可以通过实例访问保存在原型中的值，但不能通过实例对象重写原型中的值，如果在实例中添加一个在原型中的同名属性，该属性会自动屏蔽原型中的属性，但是不会修改原型中的属性，只会阻止访问原型中的属性，通过delete操作符则可以完全删除实例属性，使得可以重新访问原型中的属性。

5.组合模式

最常用的方式，但是函数和非函数属性分离，看起来不太顺眼

function Monster(name,arr){constructor:Monster,this.name=namethis.job=arr}Monster.prototype={run:function(){return this.name+'的工作是'+this.job}}var monsterA=new Monster('小旋风',['巡山','打更','挑水'])var monsterB=new Monster('小钻风',['巡山','打更','砍柴'])// alert(monsterA.run())// alert(monsterB.run())

6.动态原型模式

这种模式下的原型对象里面的函数会被创建多次，可以加入一个if判断，如果之前已经创建，则不需要再次创建。

function Monster(name,arr){this.name=namethis.job=arrif(typeof this.run!='function'){//注意！！！//alert('对象初始化')Monster.prototype.run=function(){return this.name+'的工作是'+this.job}//alert('对象初始化结束')}}var monsterA=new Monster('小旋风',['巡山','打更','挑水'])var monsterB=new Monster('小钻风',['巡山','打更','砍柴'])// alert(monsterA.run())// alert(monsterB.run())

箭头函数与普通函数的区别
1.箭头函数本身没有this，但是它可以捕获别人的this供自己使用，this的指向取决于函数的定义，而不是调用，任何方法都改变不了其指向，如call()、bind()、apply(),正是因为它没有this，所以也就不能用作构造函数，也没有原型对象。

    //   function f2() {//     console.log(this)//{num: 1}//     setTimeout(function () {//       console.log(this); //Window，普通函数中this指向了调用的对象(setTimeout=Window.setTimeout)//     }, 1000);//   }//   f2.call({ num: 1 });function f1() {// 使用call调用时，这里的this指的是call的第一个参数console.log(this); //{num: 1}setTimeout(() => {console.log(this); //箭头函数在f1()中定义，所以this指向了{num: 1}}, 1000);}f1.call({ num: 1 });//   //箭头函数中的this指向window对象，并没有被call所影响。//   var webName = "baidu";//   let web = { webName: "tencent" };//   let fn = () => {//     console.log(this); //Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}//     console.log(this.webName); //baidu//   };//   fn.call(web);

2.箭头函数不能用new，1中已经解释

3.箭头函数不能使用arguments对象获取参数列表，可以使用rest参数代替

function foo2(){console.log(arguments)//Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]}foo2(1,2)let foo=(...rest)=>{// console.log(arguments)//arguments is not definedconsole.log(rest)//(2) [1, 2],rest参数是数组，arguments对象是类数组对象，并非真正的数组
}
foo(1,2);

var 、let、const 的区别

// 预解析
console.log(a)//undefined
var a=1
// let声明的变量不会预解析
console.log(b)//Cannot access 'b' before initialization,初始化前无法访问“b”
let b=1

// let声明的变量不允许重复(同一作用域内)
var c=1
var c=2
console.log(c)//2let c=1
let c=2
console.log(c)//Identifier 'c' has already been declared

// ES6引入了块级作用域,块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。块级作用据内变量只能先声明再使用
if(true){var d=1let e=1
}
console.log(d)//1
console.log(e)//e is not defined

// const：用来声明常量
const声明的常量不允许重新赋值
const A=1;
A=2// Assignment to constant variable.

// const声明的常量必须初始化
const aaa;//Missing initializer in const declaration

Ajax

1.什么是 Ajax ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

2.基本用法

// 第一步，创建ajax对象var myajax=new XMLHttpRequest()// alert(myajax)//[object XMLHttpRequest]// 第二步，连接服务器// open('请求类型','url','异步true还是同步false')// get方法传递参数加在url后面   url+"?"+wwwwmyajax.open('GET','test.txt',true)// 第三步，发送请求myajax.send(null)//POST方法传递参数：send(string):string：仅用于 POST 请求// 第四步，接受返回的数据myajax.onreadystatechange=function(){if (myajax.readyState==4) {if(myajax.status==200){alert('成功'+myajax.responseText)//responseText 属性:responseText 属性返回字符串形式的响应，responseXML 属性:如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性var str=myajax.responseTextdiv1.innerHTML=str}else{alert('失败'+'\n'+myajax.status+'\n'+myajax.statusText)}}}

3.XMLHttpRequest 对象的三个重要的属性：
onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status:200: “OK”/404: 未找到页面

闭包

1.闭包的英文单词是closure，是指有权访问另一个函数作用域中变量的函数。（翻译问题导致它不太容易从字面上理解，实际上闭包就是一个函数）
2.在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕。
3.这是JavaScript中非常重要的一部分知识，因为使用闭包可以大大减少我们的代码量，使我们的代码看上去更加清晰等等，总之功能十分强大。
4.用途
(1)通过闭包可以访问局部变量

function myfun1(){var bb='局部变量'
}
//alert(bb);//bb is not defined 局部变量函数外无法访问function myfun2(){var cc='局部变量'return function(){return (cc)}
}
//注意：以下两种执行方式有区别，在（2）中体现
alert(myfun2()())//局部变量，成功访问var dd=myfun2()
alert(dd())//局部变量，成功访问

(2)可以让局部变量的值始终保持在内存中

// 通过闭包实现累加
function myfun3(){var num3=100;return function(){alert(++num3)}
}
// 每次调用num3也会初始化一次
// myfun3()()//101
// myfun3()()//101
// myfun3()()//101
// 闭包可以使局部变量常驻内存
var fn=myfun3()//只在这里初始化一次，后面调用都是执行匿名函数
fn()//101
fn()//102
fn()//103

5.闭包this的指向问题

匿名函数的执行环境具有全局性，this通常是指向window的。
可以使用对象冒充强制改变this的指向
将this赋值给一个变量，闭包访问这个变量

同源策略

同源策略是指协议相同，域名相同，端口相同，统称同源策略
同源策略的目的为了保证用户信息的安全，防止恶意的网站窃取数据
只要协议，域名，端口的其中一个不同，就会导致跨域
（http默认端口为 80、https默认端口为 443）

比如 https://www.51zxw.net/images/ab1.png，协议是https://，域名是www.51zxw.net，端口是443（默认端口可以省略）	同源情况
1、https://www.51zxw.net/css/reset.css	同源
2、https://51zxw.net/css/reset.css	不同源（域名不同）
3、https://api.51zxw.net/css/reset.css	不同源（域名不同）
4、https://www.51zxw.net:446/css/reset.css	不同源（端口不同）
5、http://www.51zxw.net/css/reset.css	不同源（协议不同）

正则表达式

1.字符串常用操作(都不会对原字符串进行修改)

（1）search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串

let str="HTML javascript CSS VUE"document.write(str.search('H')+'<br>')//0，找到返回位置,对大小写敏感
document.write(str.search('A')+'<br>')//-1,找不到返回-1

（2）match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配（该参数可以是需要在 stringObject 中检索的子串，也可以是需要检索的 RegExp 对象）

document.write(str.match('VUE')+'<br>')//VUE,找到返回字符串
document.write(str.match('js')+'<br>')//null，找不到返回null

（3）replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串（该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置）

    document.write(str.replace('javascript','js')+'<br>')//HTML js CSS VUE

（4）split() 方法用于把一个字符串分割成字符串数组

    document.write(str.split(' ','3')+'<br>')//[HTML,javascript,CSS]  数组

2.语法

//声明，两种方法
let reg1=new RegExp('html','g');
let reg2=/html/g
console.log('reg1:',reg1,'reg2:',reg2);//reg1: /html/g reg2: /html/g

异步加载JS

渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染。这样会阻止浏览器的后续解析，只有当前加载完成才能进行下一步操作，所以默认同步执行才是安全的。但是这样如果JS中有输出document内容、修改dom、重定向的行为，就会造成页面阻塞。所以一般建议把

$(document).ready() 需要引入jquery，兼容所有浏览器

$(document).ready(function() {alert("加载完成！");});

ES6模块type="module"属性

浏览器对于带有type=”module”的 script，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了script标签的defer属性。如下：

<script type="module" src="XXX.js"></script>

ES6模块允许内嵌在网页中，语法行为与加载外部脚本一致，如下：

<script type="module">import utils from "./utils.js";// other code
</script>

Dynamic Script Element

通常我们加载JS脚本会在HTML里：

<script type="text/javascript" src="A.js"></script>

这属于静态脚本元素，浏览器执行到这里发现script元素，会按上面所说的，下载解析执行脚本，同时阻塞其他资源文件的下载。而动态脚本元素如下：

var script = document.createElement('script');  //创建script标签
script.type = "text/javascript";
script.src = "A.js";
document.getElementsByTagName('head')[0].appendChild(script);   //塞进页面

Script async

HTML5里为script标签里新增了async属性，用于异步加载脚本：

<script type="text/javascript" src="alert.js" async="async"></script>

浏览器解析到HTML里的该行script标签，发现指定为async，会异步下载解析执行脚本。async属性仅适用于外部脚本,此方法不能保证脚本按顺序执行,他们将在onload事件之前完成

例子页面的DOM结构里由于script在img图片之前，如果你的浏览器支持async的话，就会异步加载脚本。此时DOM里已经有img元素了，所以脚本里能顺利取到img的src并弹框。

该方式可以跨域。缺点是HTML5里新增属性，如果你需要继续支持旧版本浏览器可能需要打些补丁。

Script defer

script标签里可以设置defer，表示延迟加载脚本：

<script type="text/javascript" src="alert.js" defer="defer"></script>

浏览器解析到HTML里的该行script标签，发现指定为defer，会暂缓下载解析执行脚本。而是等到页面加载完毕后，才加载脚本（更精确地说，是在DOM树构建完成后，在window.onload触发前，加载defer的脚本）。

例子页面的DOM结构里由于script在img图片之前，如果你的浏览器支持defer的话，就会延迟到页面加载完后才下载脚本。此时DOM里已经有img元素了，所以脚本里能顺利取到img的src并弹框。

该方式可以跨域。缺点是虽然不像async属于HTML5的新属性，但defer仍旧有旧版本浏览器不支持。（根据w3cschool的说法，只有IE浏览器支持defer，试验下来其他浏览器新版均已支持defer，所以w3cschool的说法已经过时）

渲染引擎

渲染引擎就是负责渲染，在浏览器窗口显示所请求的内容。不同浏览器的渲染引擎不一样，火狐的是Mozilla，Safari和Chrome使用的是webkit，引擎不一样，那么实现的方式和支持的东西就不一样，因此才会引出兼容性这样的问题。

渲染引擎的工作流程为：构建DOM树==》构建渲染树==》布局渲染树==》绘制

解析html文件，将每个标签转化为DOM树的节点。接着解析各种css代码中的样式信息，来构建渲染树。渲染树包含有颜色和大小等属性的矩形组成，然后按照正确的顺序显示到屏幕上。渲染树构建好了之后，将会进行布局过程，确定每个节点在屏幕上面的位置，再下一步就是绘制即是遍历渲染树，使用UI后端绘制每个节点。

这个过程其实不是严格按照顺序执行的，为了用户体验，可能在渲染第一个节点的时候，还在同时解析html和css代码，也就是说边绘制边继续解析。

事件委托

事件委托即是将事件处理方法注册在另外一个元素上，通过目标元素触发事件后，可以通过冒泡或者捕获机制，等待事件传递到另一个元素上，由另一个元素执行这个处理方法。

比如说，某个父元素下有很多个子元素按钮，那么如果我们为每个按钮都注册点击事件（每个按钮都需要一个监听器），那么这样引起的性能开销是非常庞大的；我们可以给这些按钮的父元素注册点击事件，让他监听子元素的点击。然后使用event事件参数的target就能获得是哪个按钮被点击。

变量提升

变量提升是指：在变量未曾声明之前调用该变量，但是不会报错。例如：

console.log(a);    //undefined
var a = 6;

可以看到，这个语句没有报错，而且输出了undefined，这是变量只声明而没有赋值的情况。这是因为浏览器执行脚本的时候，会先检查一遍代码，先执行声明语句，再执行其他的语句。也就是说，上面代码其实等同于

var a;
console.log(a);
a = 6;

web worker

web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。
1.创建web worker文件，该脚本存储于 “demo_workers.js” 文件中：

var i = 0;function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()",500);
}timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

2.创建web worker对象，并添加一个 “onmessage” 事件监听器：

var w;function startWorker() {if(typeof(Worker) !== "undefined") {if(typeof(w) == "undefined") {w = new Worker("demo_workers.js");}w.onmessage = function(event) {document.getElementById("result").innerHTML = event.data;};} else {document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";}
}

3.终止web worker
当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

4.复用web worker
如果把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

5.Web Worker 和 DOM
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：window 对象、document 对象、parent 对象

cookie，sessionStorage，localeStorage的区别

cookie是存储在浏览器端，并且随浏览器的请求一起发送到服务器端的，它有一定的过期时间，到了过期时间自动会消失。sessionStorage和localeStorage也是存储在客户端的，同属于web Storage，比cookie的存储大小要大有8m，cookie只有4kb，localeStorage是持久化的存储在客户端，如果用户不手动清除的话，不会自动消失，会一直存在，sessionStorage也是存储在客户端，但是它的存活时间是在一个回话期间，只要浏览器的回话关闭了就会自动消失。

new 操作符到底做了什么

 function Func(){this.age = 1;
};
var newFunc=new Func ();var obj = new Object();    //1.创建一个新对象，并设置新对象的原型链
obj.__proto__ = Func.prototypeFunc.call(obj);            //2.将构造函数的作用域赋给了新对象（此时this指向了新对象）obj.age = 1;               //3.给新对象设定属性和方法return obj;                //4.将新建的对象obj返回

JavaScript的作用域和作用域链

JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量，如果没有就到外部的作用域中去查找，还是没有的话，就到在外面一层作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域链存在了，比如：

var t=4;
function foo(){var tem=12;funciton bar(){var temo=34;console.log(t+" "+tem+" "+temo);}
}

在bar函数中找t变量的过程就是，先到自己的内部作用域中找，发现没有找到，然后到bar所在的最近的外部环境中找，也就是foo的内部作用域，还是没有找到，再到window的作用域中找，结果找到了

JavaScript事件模型

原始事件模型，捕获型事件模型，冒泡事件模型，

原始事件模型就是ele.οnclick=function(){}这种类型的事件模型

冒泡事件模型是指事件从事件的发生地（目标元素），一直向上传递，直到document，

捕获型则恰好相反，事件是从document向下传递，直到事件的发生地（目标元素）

怎么判断一个object是否是数组

方法一

使用 Object.prototype.toString 来判断是否是数组

function isArray(obj){return Object.prototype.toString.call( obj ) === '[object Array]';
}

这里使用call来使 toString 中 this 指向 obj。进而完成判断

方法二

使用原型链来完成判断

function isArray(obj){return obj.__proto__ === Array.prototype;
}

方法3

利用JQuery, 利用JQuery isArray 的实现其实就是方法1。

function isArray(obj){return $.isArray(obj)
}

继承

实现继承，首先有一个父类

function Monkey() {}
Monkey.prototype.type = "猴子";
Monkey.prototype.say = function () {alert("我是一只猴子");
};

原型继承

function Magic_onkey() {}
// 将Magic_onkey的prototype对象指向一个Monkey的实例
Magic_onkey.prototype = new Monkey();var wukong = new Magic_onkey("大象");//无法传入参数，type还是等于猴子alert(wukong.type);//猴子
wukong.say(); //我是一只猴子，家住花果山

优点：

简单易于实现，父类的新增的实例与属性子类都能访问

缺点：

可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面

无法实现多继承

创建子类实例时，不能向父类构造函数中传参数

对象冒充（构造函数继承）

function Monkey(type,home){this.type=typethis.home=homethis.say=function (){alert('我是一只猴子，家住'+this.home)}
}
function Hero(hp){this.hp=hp
}
function Magic_onkey(type,home,arr,hp){Monkey.apply(this,[type,home])//继承一个类Hero.call(this,hp)//继承第二个类this.skill=arr
}
var  wukong = new Magic_onkey('猴子','花果山',['七十二变','筋斗云'],'1000')
var  liuer = new Magic_onkey('猴子','花果山',['七十二变','筋斗云'],'1000')
alert(wukong.type)
alert(wukong.home)
alert(wukong.skill)
alert(wukong.hp)
alert(wukong.say == liuer.say)//false
wukong.say()//我是一只猴子，家住花果山

优点：

1.解决了子类实例共享父类引用属性的问题
2.创建子类实例时，可以向父类构造函数传参

缺点：

1.无法实现函数复用，每个子类实例都持有一个新的fun函数，如果实例太多，会造成内存大量被占用

组合模式

 function Monkey(type, home) {this.type = type;this.home = home;}Monkey.prototype.say = function () {alert("我是一只猴子，家住" + this.home);};function Magic_monkey(name, type, home) {// 使用对象冒充只能继承Mokney的属性Monkey.call(this, type, home);this.name = name;}// 使用原型链继承Monkey的方法Magic_monkey.prototype = new Monkey();var sun = new Magic_monkey("孙悟空", "猴子", "花果山");var liu = new Magic_monkey("六耳猕猴", "猴子", "十八层地狱");// alert(sun.type)// alert(sun.home)sun.say();//我是一只猴子，家住花果山alert(sun.say == liu.say)//true

es6中class的继承

class Animal {constructor(name) {this.name = name;};eat() {console.log(this.name + '正在吃东西');};
}
//继承动物类
class Cat extends Animal {catchMouse(){console.log(`${this.name}正在捉老鼠`);}
}
var cat= new Cat('Tom猫');
cat.catchMouse();// Tom猫正在捉老鼠

在Cat 类中没有构造函数, 这里有一个小的知识点，就是ES6的继承方法中如果子类没有写构造函数的话就一般默认添加构造。举个例子。

class Cat extends Animal{
}
// 等同于
class Cat extends Animal{constructor(name) {super(name);//super作为函数调用时，代表父类的构造函数。}
}

注意：如果我写了构造函数但是没有写super的话，或者super方法的参数不对等等，编译器都会报错。

函数节流和防抖
call，apply和bind的区别

4.其他部分

http状态码

http状态码是表示服务器对请求的响应状态，主要分为以下几个部分

1**：这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束

2**：表示请求成功，

3**：表示重定向

4**：表示客户端错误

5**：表示服务器端错误

100（continue），客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收

200（OK），表示请求成功，请求所希望的响应头或数据体将随此响应返回。

202（Accepted），服务器已接受请求，但尚未处理。

204（No-Content），服务器成功处理了请求，但不需要返回任何实体内容

205（Reset-Content），服务器成功处理了请求，且没有返回任何内容。但是与204响应不同，返回此状态码的响应要求请求者重置文档视图。该响应主要是被用于接受用户输入后，立即重置表单，以便用户能够轻松地开始另一次输入。

206（Partial-Content），服务器已经成功处理了部分 GET 请求。

301（Moved-Permanently），永久性重定向

302（Moved-Temporarily），暂时性重定向

304（Not-Modified），浏览器端缓存的资源依然有效

400（Bad-Reques），请求有误，当前请求无法被服务器理解。

401（Unauthorized），当前请求需要用户验证。

403（Forbidden），服务器已经理解请求，但是拒绝执行它。

404（Not-Found），请求的资源没有被找到

500（Interval Server Error），服务器内部错误

502（Bad GateWay），网关出错

503（Service Unavailable），由于临时的服务器维护或者过载，服务器当前无法处理请求。

504（Gateway Timeout），作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应。

谈谈对前端模块化的理解

前端模块话就是把复杂的文件分成一个个独立的模块，比如js文件，分成独立的模块之后有利于代码的重用和维护，但是这样又会引来模块与模块之间的依赖问题，所以就有了CommonJS、AMD、CMD规范，最后出现了webpack，webpack就是前端模块话的一种解决方案，基本上大公司都会使用webpack

xss，csrf的概念以及防范方法
CommonJs，AMD，CMD规范
懒加载和预加载

①懒加载：懒加载也叫延时加载，意思是延迟在家网络资源或者当符合条件的时候才加载资源，比如图片的延时加载。其主要目的是为了减少服务器负载，适用图片很多页面很长的电商网站。少量分批次加载能够减少用户等待的时间，减少了无效资源的加载；过多的资源加载容易阻塞js的加载。实现原理是监听页面滚动，先不给img标签添加src属性，这样浏览器就不会发送请求了，当我们要加载的图片进入页面可视区域时，修改它的src属性

②预加载：预加载是提前加载图片，存放到本地缓存中，需要时可以直接进行渲染。这样做可以减少用户的等待时间，因为接下来的资源已经被加载好了。不过这样会增加前端服务器的压力

输入一个网址到页面显示的过程发生了什么

①域名解析：浏览器根据域名，查找对应的IP地址（DNS服务）。浏览器先查找自身的DNS缓存，然后是操作系统的缓存，然后是查找hosts文件，没有则是DNS服务器查找。

②TCP链接：HTTP请求是基于TCP实现的，在高层连接之前，要先经过三次握手连接TCP。上面拿到域名的IP地址之后，浏览器以电脑某个随机端口为基础，像服务器发送连接请求，经过TCP三次握手

③发送请求：浏览器发送HTTP请求相关的资源。客户端一次发送请求行和请求头（以空行表示结束），web服务器应答，发送应答头和数据

④服务器响应：服务器响应客户端的请求，然后返回相应的内容。（③和④其实还涉及到浏览器缓存的问题，具体可以查查看）

⑤解析资源：浏览器对得到的内容进行解析，构成DOM树及渲染树等

⑥页面呈现：浏览器的UI后端绘制页面，最终能显示页面。

前端性能优化

前端性能不佳的根本原因就是用户觉得等待时间太久了没有从浏览器上面得到回应，我们只要想办法不让用户等太久即可。常见的就是对代码进行优化，此外还有其他的方法

1.减少HTTP请求：尽量将脚本和样式表合并，因为每引入一个脚本和样式表，就得请求一次。

2.减小每次请求内容的大小：一个手段是精灵图，它将多个图片合成一张，这样总大小比一张一张的图片要小。还有就是压缩脚本和css文件（将css文件和并为一个。将js合并为一个）等
打包工具：Grunt、Gulp、Webpack

3.利用缓存：很多页面其实短时间内不会做出改变（请求得到的数据的改变不算在前端），那么可以利用缓存机制，将内容缓存起来，减少DNS查找也加快了返回速度。

4.页面结构：阻塞浏览器解析的内容（如脚本）放在底部，而用户看得到的样式内容则放在顶部，这样能更快加载出页面。

5.代码优化：代码优化不仅是常见的算法上的优化，还包括了减少DOM操作（这样能减少页面重排重绘的情况）；css代码少用表达式

6.能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。避免引入第三方大量的库。而自己却只是用里面的一个小功能

渐进增强和优雅降级

渐进增强：可以理解为向上兼容，一开始针对较为低版本的浏览器来构建页面，保证页面的所有基本的功能点都能实现；然后根据更高版本的浏览器设计一些在用户体验上更为良好的交互界面、追加更多的功能。

优雅降级：可以理解为向下兼容，一开始就对高版本的浏览器构建功能、性能、体验都较为完美页面，然后针对低版本的浏览器进行兼容补充。

不同：①前者是向上兼容，后者是向下兼容；②渐进增强属于从基础的页面中增加更多的功能（加）；优雅降级是属于从功能丰富的页面上慢慢地减少页面的功能、用户的体验等等；③前者关注内容，后者关注体验。

内存泄漏

内存泄漏指的是浏览器不能正常的回收内存的现象

浏览器的垃圾回收机制

垃圾收集器必须跟踪哪个变量有用哪个变量没用，对于不再有用的变量打上标记，以备将来收回其占用的内存，内存泄露和浏览器实现的垃圾回收机制息息相关，而浏览器实现标识无用变量的策略主要有下两个方法：

引用计数法

跟踪记录每个值被引用的次数。当声明一个变量并将引用类型的值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次数加1.相反，如果包含对这个值引用的变量又取得另外一个值，则这个值的引用次数减1.当这个值的引用次数变成0时，则说明没有办法访问这个值了，因此就可以将其占用的内存空间回收回来。

如： var a = {};     //对象{}的引用计数为1b = a;          //对象{}的引用计数为 1+1a = null;       //对象{}的引用计数为2-1

所以这时对象{}不会被回收;

IE 6, 7 对DOM对象进行引用计数回收，这样简单的垃圾回收机制，非常容易出现循环引用问题导致内存不能被回收，进行导致内存泄露等问题，一般不用引用计数法。

2.标记清除法

到2008年为止，IE,Firefox,Opera,Chrome和Safari的javascript实现使用的都是标记清除式的垃圾收集策略（或类似的策略），只不过垃圾收集的时间间隔互有不同。

标记清除的算法分为两个阶段，标记(mark)和清除(sweep). 第一阶段从引用根节点开始标记所有被引用的对象，第二阶段遍历整个堆，把未标记的对象清除。

当变量进入执行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。
　　垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。

跨域的几种方式

jsonp（利用script标签的跨域能力）跨域、websocket（html5的新特性，是一种新协议）跨域、设置代理服务器（由服务器替我们向不同源的服务器请求数据）、CORS（跨源资源共享，cross origin resource sharing）、iframe跨域、postMessage(包含iframe的页面向iframe传递消息)，document.domain跨域（比如：在一个文件中设置了document.domain=“http://qq.com”,那么另一个设置了document.domain="http://qq.com"的，他们两个就是同源）

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别
了解GET和POST请求的区别

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

GET方法:通常用来从指定的资源请求数据。
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
由于GET方法提交的数据是作为URL请求的一部分所以提交的数据量不能太大
GET 请求只应当用于取回数据

POST方法: 通常用来向指定的资源提交要被处理的数据
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 请求对数据长度没有要求
POST方法主要是向服务器提交数据，尤其是大批量的数据
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

前端知识总结持续更新相关推荐

pwn学习总结（四）—— 堆基础知识（持续更新）
pwn学习总结(四)-- 堆基础知识(持续更新) 前言 chunk 使用中(分配后) 空闲中(释放后) 堆块大小空间复用 bins fastbin unsorted bin small bin 前言 ...
pwn学习总结（二） —— 基础知识（持续更新）
pwn学习总结(二) -- 基础知识(持续更新) Canary PLT表&GOT表格式化字符串漏洞 GCC编译参数 ASLR 危险函数输入流 syscall条件 shellcode 其它 ...
关于keil的一些基础知识（持续更新）
#关于keil的一些基础知识(持续更新) 1.数据类型转换 (1)写程序的时候需要将一个32位16进制数值转换到10进制显示在TF屏上,由于基础比较烂,一直没有想明白,写了各种复杂的类型转换.. 代码 ...
[GCN] 图卷积知识梳理 -持续更新
图卷积知识梳理文章目录图卷积知识梳理 1. 为什么 Graph Laplacian L=D−AL=D-AL=D−A --差分的方式理解 2. 为什么是 Graph Laplacian LLL -- ...
Java工程师进阶知识（持续更新）
生生不息,"折腾"不止:Java晋升指北,让天下没有难学的技术:视频教程资源共享,学习不难,坚持不难,坚持学习很难: >>>> 文章内容大部分来自小编的学习 ...
Java面试知识（持续更新）
(欢迎各位大佬添加新的面试知识,本文纯属博主手打,如有错误,欢迎各位大佬批评在下方,小弟一定及时改正) 基础篇 1.一个".java"源文件可以有多个类,但只能有一个public类 ...
Java后台相关知识盘点(持续更新中)
前言本篇博客取自于博主工作以来对一些Java后台开发相关的基础知识盘点和回顾, 主要涉及到Spring SpringBoot 和MyBatis相关的知识, 未来会一直更新下去- Spring ...
数据分析入门需要了解的统计学知识【持续更新】
大家早上好,本人姓吴,如果觉得文章写得还行的话也可以叫我吴老师.欢迎大家跟我一起走进数据分析的世界,一起学习! 感兴趣的朋友可以关注我或者我的数据分析专栏,里面有许多优质的文章跟大家分享哦. 最近一直 ...
前端笔记（持续更新~）
目录五星重点 1.git的使用 2.vue生命周期 3.vuex 4.vue组件通讯 5.前端性能优化 5.keep-alive的使用方法和生命周期 6.typescrpit 8.webpack 1 ...

前端知识总结持续更新

目录

学习前端的第n天，总结一下学过的知识

1.HTML

2.CSS

3.JavaScript

4.其他部分

前端知识总结持续更新相关推荐

最新文章

热门文章

前端知识总结 持续更新

目录

学习前端的第n天，总结一下学过的知识

1.HTML

2.CSS

3.JavaScript

4.其他部分

前端知识总结 持续更新相关推荐

最新文章

热门文章

前端知识总结持续更新

前端知识总结持续更新相关推荐