整理所有看过的文章的面试题+各种百度每一道题的答案，希望可以有效的帮助别人
本章博客，梳理所有基础的css，js，html，jquery，vue等题，包含面试题，可供参考学习，也督促自我学习

渐进增强：在网页开发中，先对低版本的浏览器进行css样式处理，构建页面，满足最基本的功能，在对高级浏览器进行效果，交互。写法如下：

优雅降级：在网页开发中，先对高版本的浏览器进行css样式处理，构建页面，完善功能，在对低版本浏览器进行测试修复，完成基本功能。写法如下：

问题一：标签最低高度设置min-height不兼容

问题二：H5新标签在IE9以下的浏览器不识别

html5shiv.js下载地址https://github.com/aFarkas/html5shiv/releases

问题三：被点击过的超链接不再具有hover和active属性

文件合并

文件压缩

使用cdn托管资源

gizp压缩你的js和css文件

使用缓存

meta标签优化（title,description,keywords）、heading标签的优化(h1-h6)、alt优化

反向链接，网站外链接优化

（1）内核

（2）渲染引擎

加载顺序

回流reflow

如果渲染树的结点发生了结构性变化，例如：宽高或者位置等，那么会触发回流reflow的逻辑。

重绘repaint

如果渲染树的结点发生了非结构性的变化，例如：背景色等，会触发repaint重绘的逻辑。

定义

关系

优缺点

http

http是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从www服务器传输超文本到本地浏览器的传输协议，它可是使浏览器更加高效，使网络传输减少。

https

https是以安全为目标的http通道，简单讲是http的安全版，是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议

OSI先有模型，后有协议，先有标准，后进行实践；而TCP/IP是先有协议和应用在提出了模型，参照OSI模型

时间复杂度： 指执行算法所需要的计算工作量，也就是语句执行次数

1.用常数1代替运行实践中的所有加法常数

2.修改后的运行次数函数中，只保留最高阶级

3.去除最高阶项的系数

for: O(n) for+for: O(n^2) while: O(logn)

冒泡排序

每次将相邻的两个元素进行比较，将较小的元素放到前面

快速排序

快速排序是冒泡排序的一种改进，第一趟排序时将数据分成两个部分，一个部分比另一个部分的所有数据都要小，然后递归调用，在两边都实现快速排序

插入排序

从第一个元素开始，该元素可以认为已经被排序，取出下一个元素，在已经排序的元素序列中从后向前扫描，如果该元素大于新元素，将该元素移到下一个位置，知道找到已排序的元素小雨或者等于新元素的位置，将新元素插入到下一个位置中，继续扫描

选择排序

在要排序的一组数中，选出最小的一个数与第一个数的位置交换，然后在剩下的数中再找最小的与第2的交换，知道由小到大排序为止

希尔排序

希尔排序是把记录按下标的一定增量分组，对每组使用直接插入排序算法排序，随着增量逐渐减少，每组包含的关键词越来越多，当增量减至1时，整个文件恰被分成一组，算法终止

归并排序

归并排序是一种稳定的排序方法，将已有序的子序列合并，得到完全有序的序列，即先使每个子序列有序，再使子序列段间有序

堆排序

堆排序可以把每一趟元素的比较结果保存下来，以便我们在选择最小/大元素时对已经比较过的元素做出相应调整。

1.将长度为n的待排序的数组进行有序化构造成一个大顶堆

2.将根结点与尾节点交换并输出此时的尾节点

3.将剩余的n-1个节点重新进行堆有序化

4.重复步骤2， 步骤3直至构造成一个有序列表

TCP三次握手

TCP四次握手（挥手）

为什么建立协议是三次握手，关闭连接却是四次握手？

dns: 域名解析，将url地址的域名解析成ip地址

dns prefetch是一种dns预解析技术，当浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在单击当前网页中的连接时就无需进行dns的解析，减少用户等待时间，提高用户体验

设置dns-prefetch

行内元素： a, b, span, img ,input, button, select ,textarea , em

块级元素：div, ul, ol ,li, dl, dt, dd, p ,h1-h6

空元素（没有内容的元素): br, hr, link, meta

localStorage和sessionStorage的区别
主要区别sessionStorage与localStorage的生命周期不一样。都属于web Storage存在客户端

cookie和session
cookie和session都是用来跟踪浏览器用户身份的会话方式
区别
(1）保持状态：
cookie保存在浏览器端，session保存在服务器端
(2）使用方式：
一、 cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie，如果在浏览器中设置了cookie的过期时间，cookir被保存在硬盘中，关闭浏览器后，cookie数据仍在，知道过期时间结束才消失

二、session机制：服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持cookie时，url不做任何处理；当浏览器不支持cookie的时候，将会重写URL将SessionID拼接到访问地址后。

四者对比

HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

方法：

区分用户是计算机还是人的程序;

可以防止恶意破解密码、刷票、论坛灌水；

title属性没有明确意义，只表示标题；
h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；
b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

优点：

缺点：

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，

在页面头部加入manifest属性

在cache.manifest文件中编写离线存储的资源

（1）去掉或丢失样式的时候能够让页面呈现出清晰的结构。
（2）有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
（3）方便其它设备解析。
（4）便于团队开发和维护，语义化根据可读性。

（1）header: header标签定义页面的页眉信息。【主要用于定义结构，一般来说也可以使用其他方式来创建头部，但使用header就标注出了这个结构是头部，比其他多出了语意】

（2） nav: 定义导航链接。【主要用于定义结构，一般来说也可以使用其他方式来创建导航，但使用nav就标注出了这个结构是导航，比其他多出了语意】

（3）article: 定义一个独立的内容,article比p，比div多了语意，虽然理论上都可以使用div来实现，但多出了语意。【比如一本书可以一章可以有多个段落，但可以有几章，而article的语意就像章节，它的内容是独立的，而不是仅仅的“段落”】

（4）footer:用来定义页尾。【主要用于定义结构，一般来说也可以使用其他方式来创建页脚，但使用footer就标注出了这个结构是页脚，比其他多出了语意】

（5）session：功能：定义网页的中的“区块”【比p多出语意“区块”，而又比div少出样式之意，div更多的用来定义样式，而session可以用来做结构划分】【如果article是一篇文章的话，那么session可以某块围绕一个论点的文章内容】

（6）autio: 可以用来定义音乐。属性：src、controls、autoplay、loop...

（7）video定义一个视频。属性：src，controls，autoplay，loop，width...

（8）embed：embed标签用来定义插入的内容（媒体内容），比如可以插入swf

声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，

Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。

新元素
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section），见11
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等

移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；

太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

灵活性差，比如要将tr设置border等属性，是不行的，得通过td

代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

不够语义

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

用来控制元素的盒子模型解析模式，默认为content-box

rgba和透明度

background-image / background-size / background-repeat

word-wrap: break-word (换行)

text-shadow：5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

font-face属性：定义自己的字体

border-radius 属性用于创建圆角

border-image: url(border.png) 30 30 round; 边框图片

box-shadow: 10px 10px 5px #888888;盒子阴影

@media媒介查询，用于适配不同分辨率下的css样式

不同浏览器下的margin和padding不一样

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态根据用户行为而动态变化。

伪元素的操作对象是DOM树中已有的元素

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。

b. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate

c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。

d. display: none；元素会变得不可见，并且不会再占用文档的空间。

e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留。

f. HTML5 hidden attribute；hidden属性的效果和相同，这个属性用于记录一个元素的状态

g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作。

h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。

px是相对长度单位，相对于显示器屏幕分辨率而言的。

em是相对长度单位，相对于当前对象内文本的字体尺寸。

px定义的字体，无法用浏览器字体放大功能。

em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值。

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

浮动元素碰到包含它的边框或者浮动元素的边框停留。

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素会跟随其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

添加额外标签，例如

使用br标签和其自身的html属性，例如

父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1；

父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout

父元素也设置浮动

父元素设置display:table

使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：

以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。

原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用link标签将样式表放在文档HEAD中。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

属性(常用)

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap属性: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

（1）less和sass在语法上有些共性：（8个）

混合：class中的class（将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性）

参数混合： 可以将class像函数的参数一样进行传递

嵌套规则：class中嵌套class，从而减少重复的代码（在一个选择器中嵌套另一个选* 择器来实现继承）

运算： css中的数学计算（在css中使用加减乘除进行数学计算，主要运用于属性值和颜色的运算）

颜色功能：可以编辑你的颜色（颜色的函数运算，颜色会被先转化成HSL色彩空间，然后在通道级别操作）

命名空间： 样式分组，从而方便被调用（将一些变量或者混合模块打包封装，更好的组织css和属性集的重复使用）

作用域：局部修改样式（先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作用域非常的相似）
js表达式：在css样式中使用js表达式赋值（在less或者sass文件中可以使用js的表达式，用来赋值）

（2）less和sass之间的区别：

他们之间的主要区别在于实现方式不同，less是基于js运行，所以less是在客户端处理；sass是基于ruby的，是在服务器端处理的。
很多开发者不选择less是因为less输出修改过的css到浏览器需要依赖于js引擎，而js引擎需要额外的时间来处理代码。关于这个有很多种方式，我选择的是只在开发环节使用less。一旦开发完成，我就复制粘贴less输出到一个压缩器，然后到一个单独的css文件来替代less文件。另一种方式是使用less app来编译和压缩你的less文件。两种方式都将是最小化你的样式输出，从而避免由于用户的浏览器不支持js而可能引起的任何问题。

string,boolean,number,undefined,function,object

强制（parseInt,parseFloat,number）
隐式（== ===）

前者是将字符串切割成数组的形式，后者是将数组转换成字符串

push()尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除

1）创建新节点

2）添加、移除、替换、插入

3）查找

前者会自动转换类型,再判断是否相等
后者不会自动类型转换，直接去比较

在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个 阶段：事件捕捉，目标阶段，事件冒泡

全局变量：当前页面内有效
局部变量：函数方法内有效

null是一个表示"无"的对象，转为数值时为0；
undefined是一个表示"无"的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
1）变量被声明了，但没有赋值时，就等于undefined。
2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
3）对象没有赋值的属性，该属性的值为undefined。
4）函数没有返回值时，默认返回undefined。

null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上

cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的cookies资料，有的话，就会依据

cookie里的内容来判断使用者，送出特定的网页内容给你。

使用prototype原型来实现。

主要数据类型：string, boolean, number
复合数据类型：function, object
特殊类型：undefined，null

(1)创建对象

(2)打开请求

(3)发送请求

(4)接收响应

(1)JSON 是一种轻量级的数据交换格式。
(2)JSON 独立于语言和平台，JSON 解析器和 JSON 库支持许多不同的编程语言。
(3)JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

alert
/confirm/i
prompt

(1)innerXXX（不兼容ie）

(2)document.documentElement.clientXXX(兼容ie)

可视区域距离页面顶部的距离

(1)元素节点：nodeType ===1;
(2)文本节点：nodeType ===3;
(3)属性节点：nodeType ===2;

(1)offsetWidth （content宽度+padding宽度+border宽度）
(2)offsetHeight（content高度+padding高度+border高度）
(3)clientWidth（content宽度+padding宽度）
(4)clientHeight（content高度+padding高度）

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
(3)私有成员的存在
(4)安全性提高

内容使用特定标签，通过标签就能大概了解整体页面的布局分布

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站

1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作

事件委托原理:事件冒泡机制

优点
1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适

缺点
事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件.

定义：浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
作用

cache的作用：
1、减少延迟，让你的网站更快，提高用户体验。
2、避免网络拥塞，减少请求量，减少输出带宽。

实现手段
Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。
对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于Javascript引擎（JavascriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供Javascript调用。由于这两块相互分离，通信是需要付出代价的，因此Javascript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。

而虚拟DOM干了什么？它直接用Javascript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的Javascript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升

1.基本数据类型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用数据类型（对象）：Object （Array，Date，RegExp，Function）

1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000

1）dom节点的根节点是不是body
回答： 不是，dom节点的根节点是html(包含head和body，head中分为meta、title等。body又分为一组)

2）dom元素都会有offsetParent吗
回答： offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

3）[1,3,5]转译成字符串是什么
回答： '1,3,5'
调用toString方法，生成该字符串

4）li标签的祖级元素可以为li，父级元素也可以为例
回答： 错误

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层

tcp属于传输层；http属于应用层。

表现层

页面加载-->创建window全局对象，并生成全局作用域-->然后生成执行上下文，预解析变量(变量提升)，生成全局变量对象；

Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。

原理
类似长轮循长连接 ; 发送一次请求 ; 源源不断的得到信息

1.XSS，也就是跨站脚本注入

攻击方法：

手动攻击:

自动攻击

1. 将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得
2. 对所有的输入做严格的校验尤其是在服务器端，过滤掉任何不合法的输入，比如手机号必须是数字，通常可以采用正则表达式
3. 净化和过滤掉不必要的html标签，比如：<iframe>, alt,<script> 等
4. 净化和过滤掉不必要的Javascript的事件标签，比如：onclick, onfocus等
5. 转义单引号，双引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符
6. 设置浏览器的安全设置来防范典型的XSS注入

2.SQL注入
攻击方法：

1. 禁止目标网站利用动态拼接字符串的方式访问数据库
2. 减少不必要的数据库抛出的错误信息
3. 对数据库的操作赋予严格的权限控制
4. 净化和过滤掉不必要的SQL保留字，比如：where, or, exec 等
5. 转义单引号，上引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字

3.CSRF，也就是跨站请求伪造

防范方法：
1. 在客户端进行cookie的hashing，并在服务端进行hash认证
2. 提交请求是需要填写验证码
3. 使用One-Time Tokens为不同的表单创建不同的伪随机值

可以通过设置domin来实现

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

添加、删除、更新 DOM 节点
通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。

proto是指内部原型，和Object.getPrototypeOf()结果等价
function f(){}
f.proto === Object.getPrototypeOf(f); //true
f.prototype === Object.getPrototypeOf(f); //false

HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接

相同点
都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
匿名函数中的this都是指向window
只能遍历数组
都有兼容问题

不同点
map速度比foreach快
map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，
map因为返回数组所以可以链式操作，foreach不能

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。

所以，大部分网上讨论是将script脚本放在<body>之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。
但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。

其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效

script放置位置的原则“页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后

概念：
（1）call()、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数，简单来说就是让函数在某个指定的对象下执行。
（2）bind()就是将某个函数绑定到某个对象上。
（3）三个方法的作用都是改变函数的执行上下文。

区别：
（1）call和apply的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。他们的区别在于参数不同，call第一个参数之后的其他所有参数就是传入该函数的值，以逗号分隔；apply只有两个参数，第二个是数组，这个数组就是该函数的参数。
（2）bind和两者的区别在于bind方法会返回执行上下文被改变的函数而不会立即执行，前两者是直接执行该函数。bind的参数和call相同。

所有任务都可以分成两种，一种是同步任务（syn），另一种是异步任务（asyn）。同步任务指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程，而进入‘任务队列’的任务，只有‘任务对列’通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
运行机制如下：

（1）所有同步任务都在主线程上执行，形成一个执行栈

（2）主线程外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件

（3）一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。那些对应的异步任务就会结束等待状态，而进入执行栈，开始执行

（4）主线程上不断重复上面三步。

（1）、构造函数、原型、实例的关系
构造函数都有一个proptotype属性；
原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数；
实例对象都有一个proto属性，该属性也指向构造函数的原型对象，他是一个非标准属性，不可以用于编程，是浏览器自己使用的。

（2）prototype和proto关系
prototype是构造函数的属性，proto是实例对象的属性。这两者都指向同一个对象。

（3）原型链属性搜索（什么是原型链）？
在访问对象的某个成员的时候，会先从对象本身进行查找，如果对象中查找不到，那么就会去它的构造函数的原型对象中进行查找，如果没有找到，那么就会去它的原型对象的原型对象中查找，这样一层一层往上查找，直到object的原型对象的原型是null为止。

闭包的概念：
闭包就是能够读取其他函数内部变量的函数。在js中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解为‘定义在一个函数内部的函数’。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包的用途：
（1）可以读取函数内部的变量
（2）让这些变量的值始终保持在内存中，因为这些变量始终被引用着，所以不会被垃圾回收机制回收

闭包的注意点：
（1）由于闭包使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页性能问题，在IE中可能导致内存泄漏。解决办法：在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时候要小心，不能随便改变父函数内部变量的值。

宿主对象是指DOM和BOM等由宿主框架通过某种机制注册到Javascript引擎中的对象。原生对象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等ECMAscript官方定义的对象。

第一个是定义了一个函数Person
第二个是把Person当普通函数执行，并把返回值赋值给person。
第三个是当做构造函数，通过new关键字创建一个实例对象，赋值给person

Function原型上定义的方法，所有函数都可以访问使用。主要应用场景在绑定函数执行的this，并返回一个新函数，可以在我们要调用的时候才执行。原理是函数的预处理思想，把this当做参数预置。

特性检测更适合针对实现了特定特性的浏览器进行操作。UA字符串由于被浏览器厂商可以随意修改因此不太靠谱。

优势
无刷新在页面与服务器通信，更新页面，用户体验好。
异步与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
前端和后端负载平衡。
界面与应用分离
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：
AJAX干掉了Back和History功能，即对浏览器机制的破坏。
AJAX的安全问题
Ajax技术就如同对企业数据建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等
对搜索引擎支持较弱。
客户端过肥，太多客户端代码造成开发上的成本。
违背URL和资源定位的初衷,采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。

Mustache

Underscore Templates

Embedded JS Templates(ejs)

HandlebarsJS

Jade templating

作用域内所有变量声明都被提到顶部，被提升的变量初始值为undefined，执行到所在行时才真正赋值。

FOUC(Flash Of Unstyled Content)–文档样式闪烁

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在之间加入一个或者<script>元素就可以了。

router 是 hash 改变
location.href 是页面跳转，刷新页面

（1）生命周期
2.0生命周期变得更加语义化了，增加了beforeUpdate、updated等，删除了attached、detached。

（2）过滤器
2.0将1.0所有自带的过滤器都删除了，我们需要自己定义过滤器：

如果想展示JSON数据，不需要调用过滤器了，框架会自动帮我们解析出来；
2.0过滤器的传参方式不是以前的方式，是以函数传参的方式：

（3）循环
在Vue2.0中丢弃了key，将track-by替换成key属性，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。

（4）片段代码
在编写template的时候，2.0必须要用一个根元素（如div）将代码片段包裹起来，否则报错。1.0则不需要。

（5）el属性绑定的元素，限制为一个普通的元素，不能再绑定再body、html元素上。

（6）v-model增加了.trim、.number等后缀修饰符

    以上就是本篇文章【web前端面试题+ 必会知识点（持续更新）】的全部内容了，欢迎阅览 ！ 文章地址：http://midet.cs-ej.cn/quote/243.html 
     行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 成事e家移动站 http://hond.cs-ej.cn/ , 查看更多