前端面试题整理（一）

1、什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，不是一种编程语言，而是一种标记语言，是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

2、什么是CSS？

层叠样式表(英文全称：Cascading Style Sheets)，也不是真正的编程语言，是一种用来表现HTML文件样式的语言，能够对网页中元素的样式进行精确控制。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

3、什么是javascript？

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。
组成部分：

ECMAScript（基本语法）：描述了该语言的语法和基本对象
DOM（文档对象模型）：描述处理网页内容的方法和接口
BOM（浏览器对象模型）：描述与浏览器进行交互的方法和接口

基本特点：

是一种解释性脚本语言（代码不进行预编译）
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）

基本用途

嵌入动态文本于HTML页面
对浏览器事件做出响应
读写HTML元素
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。

4、HTML5 为什么只需要写 <!DOCTYPE HTML>

HTML5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
ps：SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。但HTML5不是的。

HTML5有哪些新特性、HTML5新标签的浏览器兼容问题如何处理?

HTML5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

新增的元素

（1）语义标签

在这里插入图片描述
（2）增强型表单

HTML5 也新增以下表单元素

HTML5 新增的表单属性

placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性，是一个 boolean 属性。规定元素中可选择多个值。

(3) 视频和音频

视频播放：<video src=""><video>

音频播放：<audio src=""></audio>

（4）Canvas绘图

（5）SVG绘图

（6）地理定位

（7）拖放API

（8）WebWorker

（9）WebStorage

客户端存储数据的两个对象为：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage

（10）WebSocket

移除的元素

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

处理兼容问题
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  <!--[if lt IE 9]><script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->

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

（1）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
（2）即使在没有样式CSS 的情况下也能以一种文档格式显示，并且是容易阅读的；
（3）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

7、XHTML与HTML有什么区别？

所有标签都必须小写
标签必须成双成对（有结束标签）
标签顺序必须正确（合理嵌套）
所有属性都必须使用双引号（单引号不能使用）
不允许使用target="_blank"

8、DOCTYPE作用? 严格模式与混杂模式如何区分？它们有何意义?

1、DOCTYPE的作用
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于标签之前。它不是 HTML 标签，作用是告诉浏览器用哪种模式来渲染文档告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。<!DOCTYPE> 声明没有结束标签且对大小写不敏感
2、严格模式和混杂模式的如何区分？他们有什么意义？
标准模式(严格模式)的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式（混杂模式或怪异模式）中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

9、介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

主要分成两个部分：渲染引擎(Render Engine)和JS引擎。

渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向与只指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE，360，搜过浏览器；
Gecko内核：Netscape6及以上版本，FF
Presto内核：Opera
Blink内核：Opera；
Webkit内核：Safari，Chrome

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于渲染引擎

10、对WEB标准以及W3C的理解与认识?

web标准简单来说可以分为结构、表现和行为。web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点。
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
（1）标签字母要小写
（2）标签要闭合
（3）标签不允许随意嵌套
2.对于css和js来说
（1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
（2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
（3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
3.其他方面
（1）文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，
（2）容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

11、Iframe的作用？

Iframe也称嵌入式框架，它可以把一个HTML文档嵌入在另一个HTML中显示。

优点：
（1）重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少了数据的传输），增加了网页的下载速度。
（2）方便制作导航栏，信息管理系统会用到

缺点：
（1）会产生很多页面，不容易管理
（2）浏览器后退按钮无效
（3）代码复杂，无法被一些搜索引擎索引到
（4）多数小型的移动设备无法完全显示框架
（5）多框架的页面会增加服务器的http请求
由于上面诸多缺点，因此不符合标准网页设计的理念，已经被抛弃。目前框架的所有优点完全可以使用Ajax实现，因此没必要使用框架了。

12、CSS3新特性有哪些？

1.颜色：新增 RGBA，HSLA 模式
2.文字阴影（text-shadow）
3.边框：圆角（border-radius）边框阴影： box-shadow
4.盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸、background-origin 设置背景图片的原点、background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7.过渡：transition，可实现动画
8.自定义动画
9.在 CSS3 中唯一引入的伪元素是：selection.
10.媒体查询，多栏布局
11.border-image
12.2D 转换 3D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

13、描述一下CSS中的渐进增强，优雅降级之间的区别？

渐进增强（progressive enhancement）针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

.transition{-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;  
}

优雅降级（graceful degradation）一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

.transition{ transition: all .5s;-o-transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5s;
}

区别：优雅降级认为应该针对那些最高级、最完善的浏览器来设计网站，从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是认为应该关注于内容本身，从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

14、对BFC规范的理解有哪些？

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
创建BFC：

float的值不是none
position 的值不是static或者relative
display的值是inline-block,table-cell,flex,table-caption或者inline-flex
overflow的值不是visible

BFC的特性：

内部的BOX会在垂直方向上一个接一个的放置
于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

应用：

要阻止margin重叠，只要将俩个元素别放在一个BFC中即可
使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应

15、什么是CSS reset是什么？normalize.css 是什么？

CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset）
Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter, Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及许许多多其他的框架，工具和网站上。

优点：

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来

16、你遇到过的兼容问题有哪些？如何解决的？

1.png24位的图片在ie6浏览器上出现背景

解决方案：做成png8

2.浏览器默认的margin和padding不同

解决方案：添加一个全局的{margin：0;padding: 0;}来统一

3.ie6双边距bug：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。浮动ie产生的双倍边距 float: left; width: 10px; margin: 0 0 0 100px;这种情况之下ie会产生20px的距离

解决方案：在float的标签样式控制中加入_display: inline;将其转化为行内属性。

4.ie下可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；火狐下只能使用getAttribute()获取自定义属性

解决办法：同意通过getAttribute()获取自定义属性

5.ie下，even对象有x，y属性，但是没有pageX，pageY属性。火狐下，event对象有pageX，pageY属性，但是没有x，y属性。

解决办法：（条件注释）确定是在ie浏览器下可能会增加额外的http请求

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

解决办法：添加css属性-webkit-text-size-adjust：none;

7.超级链接访问过后，hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了。

解决办法：改变css属性的排列顺序： L-V-H-A’ -->link,visited,hover,active

8.高清屏 1px border 像素问题(window.devicePixelRatio = 1 | 2 |3 -> 如果是 2 ->css 的 1px 运行-> 2px),需求: 希望在 2|3 时->1px 的 border 仍然是 1px?

if->devicePixelRatio | @media 判断 -> 如果是 2-> border:.5px .333333px
(iOS8+) border-image | background-image -> 其中 1px 是透明 C3 属性
transform:scale(.5) C3 属性 box-shadow 渐变

17、清除浮动有几种方式?

1、父元素定义高度
父级 div手动定义 height，就解决了父级 div无法自动获取到高度的问题。简单、
代码少、容易掌握，但只适合高度固定的布局

2、在标签结尾处加空div标签 clear:both
添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度。简单、代码少、浏览器支持好、不容易出现怪问题。但是如果页面浮动布局多，就要增加很多空div，不利于页面的优化。

3、给父级添加overflow:hidden 清浮动
父级需要定义宽度，且超出盒子部分会被隐藏，不推荐使用

4、以浮制浮（父级同时浮动）
需要给每个浮动元素父级添加浮动，浮动多了容易出现问题，不推荐使用

5、使用单伪元素：after清除浮动(注意：作用于浮动元素的父亲）推荐使用

  .clearfix：after {content：""；display：block；visibility：hidden；height：0;line-height：0；clear：both；}    .clearfix{zoom：1} //兼容低版本IE

6、使用双伪元素

  .clearfix：before，.clearfix：after {content： ""；display： block；clear：both；}.clearfix{zoom：1} //兼容低版本IE

18、要你出一套适应不同分辨率，不同终端的前端实现方案你有什么思路？

流式布局：
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。

响应式开发：
简而言之，就是一个网站能够兼容多个终端。越来越多的设计师也采用了这种设计。CSS3中的 Media Query（媒体查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕（移动设备） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap 来完成一部分工作，当然也可以自己写响应式。

19、移动WEB和响应式有什么区别？

在这里插入图片描述

20、px em rem 取用选择依据？

1）px 像素（Pixel）。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一
个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px要换算成物理长度，需要指定精度 DPI。
2）em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字
体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
3）rem是 CSS3新增的一个相对单位（root em，根em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
4）区别： IE无法调整那些使用 px作为单位的字体大小，而em 和rem可以缩放， rem
相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既
可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8及更早版本外，所有浏览器均已支持rem。

21、css权重如何计算？

行内样式，如: style=" "，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类和属性选择器，如.content，权值为0010。
标签选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
!important 用来提升优先级，加了这句的样式的优先级是最高的。

22、水平垂直居中的方式有几种？

方法	居中元素宽高固定
absolute + 负margin	是
absolute+margin auto	是
absolute + calc	是
absolute+transform	否
writing-mode	否
lineheight	否
css-table	否
flex	否
grid	否

公共代码

/* 公共代码 */
.parent{border: 1px solid red;width: 400px;height: 400px;
}
.child{background: green;
}
.child.size{width: 200px;height: 200px;
}
/* 公共代码 */

1、absolute + 负margin（缺点：必须知道子元素宽高）
绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但是绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示，为了解决这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了，代码如下：

.parent{position: relative;
}
.child{position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;
}

2、absolute+margin auto （缺点：必须知道子元素宽高）

这种方式通过设置各个方向的距离都是0，此时再将margin设置为auto，就可以各个方向上居中

.parent{position: relative;
}
.child{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}

3、absolute + calc （缺点：兼容性差，需要知道子元素宽高）

CSS3有了计算属性，top的百分比是基于元素的左上角，那么再减去宽度的一半就好了

.parent{position: relative;
}
.child{position: absolute;top: calc(50% - 100px);left: calc(50% - 100px);
}

**4、absolute+transform **

还是绝对定位，但不需要子元素固定宽高，所以不需要size类。修复绝对定位的问题，可以使用css3新增的transform，transform的translate属性可以设置百分比，相对于自身的宽和高，将translate设置为50%，就可以居中了

.parent{position: relative;
}
.child{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

5、writing-mode

writing-mode可以改变文字的显示方向

HTML

<div class="child1">水平方向</div>
<div class="child2">垂直方向</div>

CSS

.child2{writing-mode: vertical-lr;
}

显示效果

水平方向
垂
直
方
向

所有水平方向上的CSS属性，都会变为垂直向上的属性，比如text-align，通过writing-mode和text-align就可以做到水平和垂直方向居中

HTML

<div class="parent">'<div class="parent-inner"><div class="child">hhhh</div></div>
</div>

CSS

.parent{writing-mode: vertical-lr;text-align: center;
}
.parent-inner{writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;
}
.child{display: inline-block;margin: auto;text-align: left;
}

6、lineheight

利用行内元素居中属性可以做到水平垂直居中，把child设置为行内元素，通过text-align就可以做到水平居中，还可以通过vertical-align在垂直方向做到居中。

.parent{ line-height: 400px;text-align: center;font-size: 0px; } .child{ font-size: 16px;display: inline-block;vertical-align: middle; line-height: initial; text-align: left; }

7、css—table（父元素指定宽高）

css新增的table属性，可以让我们把普通元素，变为table元素的显示效果，通过这个特性也可以实现水平垂直居中。通过CSS属性，可以让div显示得和table一样

.parent{display: table-cell;text-align: center;vertical-align: middle;
}
.child{display: inline-block;
}

8、flex布局

flex一个现代的布局方案，几行代码就可以水平垂直居中了

.parent{display: flex;justify-content: center;align-items: center;
}

9、grid

css新出的网格布局，直接上代码

.parent{display: grid;
}
.child{align-self: center;justify-self: center;
}

总结：

PC端有兼容性要求，宽高固定，推荐absolute + 负margin
PC端有兼容要求，宽高不固定，推荐css-table
PC端无兼容性要求，推荐flex
移动端推荐使用flex

23、css精灵图如何使用？

CSS Sprite直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”，是一种网页图片应用处理方式。其实就是把多张小图片整合到一张图片中去，再利用CSS的“background-image”，“background-repeat”，“background-position”进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
优点：减少网页http请求，加快页面加载速度，提高页面的性能(适合小图)。比如页面上使用到很多icon的图，如果页面一张张去请求这些图片的时后那http请求就会很多，这时候把这些图片合并为一张的话，页面就只需要加载一次了，减少了http请求带来的性能消耗。

24、src 与href的区别？

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分
src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。
<script src=“js.js”></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。
<link href=“common.css” rel=“stylesheet”/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

补充：link和@import的区别：
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

25、说说你对this的理解？

this是一个关键字，代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

1.作为纯粹的函数调用 this指向全局对象
2.作为对象的方法调用 this指向调用对象
3.作为构造函数被调用 this指向新的对象（new会改变this的指向）
4.apply调用 this指向apply方法的第一个参数

26、介绍一下 JS 有哪些内置对象。

Object 是 JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Argument、Math、Date、RegExp、Error

27、表单验证传输的什么数据？明文还是暗文==加密？如何加密？是每一次传输数据，都是加密之后才传输吗？

GET是从服务器上请求数据，POST 是发送数据到服务器。事实上，GET方法是把数据参数队列（query string）加到一个URL上，值和表单是一一对应的。比如说， name=John。在队列里，值和表单用一个&符号分开，空格用+号替换，特殊的符号转换成十六进制的代码。因为这一队列在 URL里边，这样队列的参数就能看得到，可以被记录下来，或更改。通常GET 方法还限制字符的大小（大概是 256 字节）。事实上POST 方法可以没有时间限制的传递数据到服务器，用户在浏览器端是看不到这一过程的，所以 POST方法比较适合用于发送一个保密的（比如信用卡号）或者比较大量的数据到服务器。
区别： Post 是允许传输大量数据的方法，而 Get 方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比 Post 方法好。
总结： 1、get 方式的安全性较Post 方式要差些，包含机密信息的话，建议用 Post 数据提交方式； 2、在做数据查询时，建议用 Get 方式；而在做数据添加、修改或删除时，建议用Post 方式；
所以：表达如果是向服务器传输数据(如帐号密码等)都是加密数据(post)，如果只是单单想要从服务器获得数据或者传输的数据并不重要，可以直接使用明文方式传输( get )

28、为什么会出现跨域？如何实现跨域？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

在这里插入图片描述
非同源限制：

无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
无法接触非同源网页的 DOM
无法向非同源地址发送 AJAX 请求、

跨域解决方法：

1、设置document.domain解决无法读取非同源网页的 Cookie问题

因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

// 两个页面都设置
document.domain = 'test.com';

2、跨文档通信 API：window.postMessage()

调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息（子窗口同样可以通过该方法发送消息给父窗口）

它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');

调用message事件，监听对方发送的消息

// 监听 message 消息
window.addEventListener('message', function (e) {console.log(e.source); // e.source 发送消息的窗口console.log(e.origin); // e.origin 消息发向的网址console.log(e.data);   // e.data   发送的消息
},false);

3、JSONP
在js 中，我们虽然不能直接用XMLHttpRequest 请求不同域上的数据，但是在页面上引入不同域上的js 脚本文件却是可以的，jsonp正是利用这个特性来实现的。
JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON 数据。
优点：它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest 或 ActiveX 的支持；能够直接访问响应文本，支持在浏览器与服务器之间双向通信
缺点： JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的Web 服务时，一定得保证它安全可靠。它只支持 GET请求而不支持 POST等其它类型的 HTTP 请求；它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript调用的问题
核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

（1）原生实现

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
// 处理服务器返回回调函数的数据
<script type="text/javascript">function dosomething(res){// 处理获得的数据console.log(res.data)}
</script>

（2） jQuery ajax

$.ajax({url: 'http://www.test.com:8080/login',type: 'get',dataType: 'jsonp',  // 请求方式为jsonpjsonpCallback: "handleCallback",    // 自定义回调函数名data: {}
});

（3）Vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {params: {},jsonp: 'handleCallback'
}).then((res) => {console.log(res); 
})

4、CORS

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。
1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
2、带cookie跨域请求：前后端都需要进行设置

【前端设置】根据xhr.withCredentials字段判断是否带有cookie

（1）原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.withCredentials = true; 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}
};

（2） jQuery ajax

$.ajax({url: 'http://www.test.com:8080/login',type: 'get',data: {},xhrFields: {withCredentials: true    // 前端设置是否带cookie},crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
});

（3）vue-resource

Vue.http.options.credentials = true

（4） axios

axios.defaults.withCredentials = true

【服务端设置】

服务器端对于CORS的支持，主要是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

(1) Java后台

/** 导入包：import javax.servlet.http.HttpServletResponse;* 接口参数中定义：HttpServletResponse response*/
// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); // 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

(2) Nodejs后台

var http = require('http');
var server = http.createServer();
var qs = require('querystring');server.on('request', function(req, res) {var postData = '';// 数据块接收中req.addListener('data', function(chunk) {postData += chunk;});// 数据接收完毕req.addListener('end', function() {postData = qs.parse(postData);// 跨域后台设置res.writeHead(200, {'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）/* * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，* 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问*/'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie});res.write(JSON.stringify(postData));res.end();});
});server.listen('8080');
console.log('Server is running at port 8080...');

(3) PHP后台

<?phpheader("Access-Control-Allow-Origin:*");

(4) Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下内容即可

Header set Access-Control-Allow-Origin *

29、什么是闭包？

我们的理解是，闭包就是能够访问其他函数内的局部变量的函数。

function outer(){var a=1;function inner(){return a;}return inner();
}
outer(); //1

也就是说，在上段代码里面，内部函数inner就是一个闭包。那么对闭包的另一层理解就是，闭包是定义在一个函数内部的函数。
本质上来说，闭包就是将函数内部和函数外部连接起来的一座桥梁。
js垃圾回收机制： js 垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。
闭包的用途：保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量。
1、模仿块级作用域
所谓块级作用域就是指在循环中定义的变量，一旦循环结束，变量也随之销毁，它的作用范围只在这一小块。而在JavaScript中没有这样的块级作用域，由于JavaScript不会告诉你变量是否已经被声明，所以容易造成命名冲突，如果在全局环境定义的变量，就会污染全局环境，因此可以利用闭包的特性来模仿块级作用域。

function X(num) {(function(){for(var i = 0; i < num.length; i++){num++}}).call() //声明一个函数立即调用以后，浏览器刷新页面会报错，可以用一个小括号把整段函数包起来。console.log(i)//undefined
}

在上面的代码中，闭包就是那个匿名函数，这个闭包可以当函数X内部的活动变量，又能保证自己内部的变量在自执行后直接销毁。这种写法经常用在全局环境中，可以避免添加太多全局变量和全局函数，特别是多人合作开发的时候，可以减少因此产生的命名冲突等，避免污染全局环境。

2、储存变量

闭包的另一个特点是可以保存外部函数的变量，内部函数保留了对外部函数的活动变量的引用，所以变量不会被释放。

function S(){var a = 1return {function(){renturn a}}
}
var d = S() // 1

这种写法可以用在把一些不经常变动计算起来又比较复杂的值保存起来，节省每次的访问时间。

3、封装私有变量

我们可以把函数当作一个范围，函数内部的变量就是私有变量，在外部无法引用，但是我们可以通过闭包的特点来访问私有变量。

var person = function(){//变量作用域为函数内部，外部无法访问var name = "default";return {getName : function(){return name;},setName : function(newName){name = newName;}}
}();
console.log(person.name);//直接访问，结果为undefined
console.log(person.getName()); // default
person.setName("abruzzi");
console.log(person.getName()); // abruzzi

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

30、什么是原型链？

概念补充：每个函数function都有一个prototype，即显式原型（属性），默认指向一个空的object对象。每个实例对象都有一个__ptoro__，称为隐式原型。对象的隐式原型的值为其对应构造函数显式原型的值。

所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型）
所有函数拥有prototype属性（显式原型）（仅限函数）
原型对象：拥有prototype属性的对象，在定义函数时就被创建

当调用某种方法或查找某种属性时，首先会在自身调用和查找，如果自身并没有该属性或方法，则会去它的__proto__属性中调用查找，也就是它构造函数的prototype中查找，如果还没有找到就会在构造函数的的prototype的__proto__也就是Object.prototype中查找，直到null，如果没有就返回undefined。这样一层一层向上查找形成的链式结构，称为原型链。

在这里插入图片描述

31、实现继承的方法有哪些？

1、原型链继承

// 原型链继承function Person(){this.name = 'xiaopao';}Person.prototype.getName = function(){console.log(this.name);}function Child(){          }Child.prototype = new Person();var child1 = new Child();child1.getName(); // xiaopao

 function Person(){this.name = 'xiaopao';this.colors = ['red', 'blue', 'green'];}Person.prototype.getName = function(){console.log(this.name);}function Child(){}Child.prototype = new Person();var child1 = new Child();var child2 = new Child();child1.colors.push('yellow');console.log(child1.colors);console.log(child2.colors);

缺点：
引用类型的属性被所有实例共享
在创建Child 的实例时，不能向Person传参

2、借用构造函数继承（经典继承）

  // 借用构造函数继承（经典继承）function Person(){this.name = 'xiaopao';this.colors = ['red', 'blue', 'green'];}Person.prototype.getName = function(){console.log(this.name);}function Child(){Person.call(this);}var child1 = new Child();var child2 = new Child();child1.colors.push('yellow');console.log(child1.name);console.log(child1.colors); // ["red", "blue", "green", "yellow"]console.log(child2.colors); // ["red", "blue", "green"]

优点：
1.避免了引用类型的属性被所有实例共享
2.可以在Child中向Parent传参
缺点：
1.只是子类的实例，不是父类的实例
2.方法都在构造函数中定义，每次创建实例都会创建一遍方法

// 借用构造函数继承， 向Parent传参
function Person(name){this.name = name;}Person.prototype.getName = function(){console.log(this.name);}function Child(name){Person.call(this,name);var child1 = new Child('xiaopao');var child2 = new Child('lulu');console.log(child1.name); // xiaopaoconsole.log(child2.name); // luluconsole.log(child1 instanceof Person); // false  不能识别是Person的实例

3、组合继承

组合原型链继承和借用构造函数继承
背后的思路是：使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。

function Parent(name){this.name = name;this.colors = ['red', 'blue', 'green'];}Parent.prototype.getName = function(){console.log(this.name);}function Child(name,age){Parent.call(this,name);// 第二次调用 Parent()this.age = age;}Child.prototype = new Parent(); // 第一次调用 Parent()var child1 = new Child('xiaopao',18);var child2 = new Child('lulu',19);child1.getName(); // xiaopaochild2.getName(); // luluconsole.log(child1.age); // 18console.log(child2.age); // 19child1.colors.push('yellow');console.log(child1.colors);  // ["red", "blue", "green", "yellow"]console.log(child2.colors); // ["red", "blue", "green"]console.log(child1 instanceof Child); // trueconsole.log(child1 instanceof Parent); // true

优点：融合原型链继承和构造函数的优点，是JavaScript中最常用的继承模式

缺点：调用了两次父类构造函数
（组合继承最大的问题是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部）

4、寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象，可以理解为在原型式继承的基础上新增一些函数或属性

// 寄生式继承  可以理解为在原型式继承的基础上增加一些函数或属性var ob = {name: 'xiaopao',friends: ['lulu','huahua']}function CreateObj(o){function F(){};  // 创建一个构造函数FF.prototype = o;return new F();}// 上面CreateObj函数 在ECMAScript5 有了一新的规范写法，Object.create(ob) 效果是一样的 , 看下面代码var ob1 = CreateObj(ob);var ob2 = Object.create(ob);console.log(ob1.name); // xiaopaoconsole.log(ob2.name); // xiaopaofunction CreateOb(o){var newob = CreateObj(o); // 创建对象 或者用 var newob = Object.create(ob)newob.sayName = function(){ // 增强对象console.log(this.name);}return newob; // 指定对象}var p1 = CreateOb(ob);p1.sayName(); // xiaopao

缺点：跟借用构造函数一样，每次创建对象都会创建一遍方法

5、寄生组合式继承

子类构造函数复制父类的自身属性和方法，子类原型只接收父类的原型属性和方法。所谓寄生组合继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型的原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给予类型的原型。

/ 寄生组合式继承
function Parent(name){this.name = name;this.colors = ['red', 'blue', 'green'];}Parent.prototype.sayName = function(){console.log(this.name);}function Child(name,age){Parent.call(this,name); this.age = age;}function CreateObj(o){function F(){};F.prototype = o;return new F();}// Child.prototype = new Parent(); // 这里换成下面function prototype(child,parent){var prototype = CreateObj(parent.prototype);prototype.constructor = child;child.prototype = prototype;}prototype(Child,Parent);var child1 = new Child('xiaopao', 18);console.log(child1);

优点：这种方式的高效率体现它只调用了一次Parent构造函数，并且因此避免了再Parent.prototype上面创建不必要的，多余的属性。普遍认为寄生组合式继承是引用类型最理想的继承方式

32、字符串操作方法

charCodeAt 方法返回一个整数，代表指定位置字符的 Unicode 编码；
charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串；
substring方法返回位于String 对象中指定位置的子字符串。（参数2表示个数）
substr方法返回一个从指定位置开始的指定长度的子字符串。
slice方法返回字符串的片段；（用法与substr类似）
indexOf方法返回 String 对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1；
lastIndexOf方法返回 String对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1；
search方法返回与正则表达式查找内容匹配的第一个字符串的位置。
concat 方法返回字符串值，该值包含了两个或多个提供的字符串的连接；
split 将一个字符串分割为子字符串，然后将结果作为字符串数组返回；
trim 去除字符串两边的所有空格
replace 替换，参数1被替换的部分，参数2要替换成什么

33、前端性能优化汇总

1、减少请求资源大小或请求次数
（1）尽量和并和压缩css和js文件。（将css文件和并为一个。将js合并为一个）
　　原因：主要是为了减少http请求次数以及减少请求资源的大小
　　打包工具：　webpack　gulp　grunt
（2）尽量所使用的字体图标或者SVG图标来代替传统png图，因为字体图标或者SVG是矢量图，代码编写出来的，方大不会变形，而且渲染速度快
（3）采用图片的懒加载（延迟加载）目的为了，减少页面第一次加载过程中http的请求次数
　　具体步骤：
　　　　1、页面开始加载时不去发送http请求，而是放置一张占位图
　　　　2、当页面加载完时，并且图片在可视区域再去请求加载图片信息
（4）能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。
　　避免引入第三方大量的库。而自己却只是用里面的一个小功能
（5）使用雪碧图或者是说图片精灵，把所有相对较小的资源图片，绘制在一张大图上，只需要将大图下载下来，然后利用，图片定位来讲小图展现在页面中（background-position:百分比，数值）
（6）减少对cookie的使用（最主要的就是减少本地cookie存储内容的大小），因为客户端操作cookie的时候，这些信息总是在客户端和服务端传递。如果上设置不当，每次发送一个请求将会携带cookie
（7）前端与后端进行数据交互时，对于多项数据尽可能基于json格式来进行传送。相对于使用xml来说传输有这个优势。目的：是数据处理方便，资源偏小
（8）前端与后端协商，合理使用keep-alive
（9）前端与服务器协商，使用响应资源的压缩
（10）避免使用iframe，不仅不好管控样式，而且相当于在本页面又嵌套其他页面，消耗性能会更大，因为还回去加载这个嵌套页面的资源

2、代码优化相关
（1）在js中尽量减少闭包的使用。原因：使用闭包后，闭包所在的上下文不会被释放
（2）减少对DOM操作，主要是减少DOM的重绘与回流（重排）关于重排（回流）的分离读写：如果需要设置多个样式，把设置样式全放在一起设置，不要一条一条的设置。使用文档碎片或者字符串拼接做数据绑定（DOM的动态创建）
（3）在js中避免嵌套循环和"死循环"(一旦遇到死循环，浏览器就会直接卡掉)
（4）把css放在body上，把js放在body下面，让其先加载css（注意：这里关于优化没有多大关系）
（5） css导入的时候尽量减少@import导入式，因为@import是同步操作，只有把对应的样式导入后，才会继续向下加兹安，而link是异步的操作
（6）基于script标签下载js文件时，可以使用defer或者async来异步加载
（7）在事件绑定中，尽可能使用事件委托，减少循环给DOM元素绑定事件处理函数。

3、存储
（1）结合后端，利用浏览器的缓存技术，做一些缓存（让后端返回304，告诉浏览器去本地拉取数据）（注意：也有弊端）可以让一些不太会改变的静态资源做缓存。比如：一些图片，js，cs
（2）利用h5的新特性（localStorage、sessionStorage）做一些简单数据的存储，避免向后台请求数据或者说在离线状态下做一些数据展示。

34、进程和线程的区别

进程是资源分配最小单位，线程是程序执行的最小单位；
进程有自己独立的地址空间，每启动一个进程，系统都会为其分配地址空间，建立数据表来维护代码段、堆栈段和数据段，线程没有独立的地址空间，它使用相同的地址空间共享数据；
CPU切换一个线程比切换进程花费小，凡是进程必须有并且至少有一个线程
创建一个线程比进程开销小；
线程占用的资源要比进程少很多。
线程之间通信更方便，同一个进程下，线程共享全局变量，静态变量等数据，进程之间的通信需要以通信的方式（IPC）进行；（但多线程程序处理好同步与互斥是个难点）
多进程程序更安全，生命力更强，一个进程死掉不会对另一个进程造成影响（源于有独立的地址空间），多线程程序更不易维护，一个线程死掉，整个进程就死掉了（因为共享地址空间）；
进程对资源保护要求高，开销大，效率相对较低，线程资源保护要求不高，但开销小，效率高，可频繁切换；

打个比方：比如：开个QQ，开了一个进程；开了迅雷，开了一个进程。
在QQ的这个进程里，传输文字开一个线程、传输语音开了一个线程、弹出对话框又开了一个线程。所以运行某个软件，相当于开了一个进程。在这个软件运行的过程里（在这个进程里），多个工作支撑的完成QQ的运行，那么这“多个工作”分别有一个线程。所以一个进程管着多个线程。

35、AJAX简介、优缺点、请求数据的步骤是什么？open的参数

Ajax 全名为： Asynchronous JavaScript and XML 异步的JavaScript和XML
Ajax技术可以向服务器请求额外的数据而无需刷新页面
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内容，必须重新加载整个网页。Ajax的出现，使得使网可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
注意：ajax本身不支持跨域请求，需要在服务器端处理。
Ajax技术的核心是XMLHttpRequest对象（简称XHR） XHR提供的接口实现了以异步的方式向服务器请求数据和解析服务器响应。

优点：1、页面无刷新 2、使用异步的方式与服务器通信 3、不需要插件
缺点：
1、不支持浏览器的回退机制
2、易造成脚本攻击，sql注入
3、对搜索引擎的支持较弱 4、手持设备不能很好的支持ajax

请求过程：

1、创建XmlHttpRequest对象，ActiveXObject兼容IE浏览器

var xhr = XMLHTTPRequest（）
var xhr = ActiveXObject(‘Mircosoft.XMLHTTP’); （兼容IE浏览器）

2、创建与服务器的连接的请求
xhr.open(‘get’, ‘url’, ‘true’)

参数1：发送请求的方式，分别有get和post
参数2：请求地址
参数3：是否异步提交，true异步，false同步，同步会阻塞后续对send（）的调用，直到响应完全接收

如果使用post请求需要设置一个请求头（必须在发送数据之前），

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

3、向服务器发送数据（get与post发送方式不同）

xhr.send()
get发送：数据要拼接到open方法里的url地址后面，格式为urlencoded
post发送：数据直接写到send方法里即可

4、监听对象状态的改变
xhr.onreadystatechange=function(）

在这里插入图片描述

5、判断状态码，处理响应数据

if(xhr.readyState === 4）{console.log（数据接收完毕）}

36、JS内置的常用对象有哪些？并列句常用方法

对象：是js核心概念，一般由若干个键值对构成，键代表属性名，值代表属性值，键名与键值之间用冒号分隔，如果有多个键值对，每隔键值对之间用逗号分隔
内置对象：js内部自带的一些对象，供开发者使用，这些对象提供了一些常用打的或者是最基本而必要的功能

常见内置对象：
Arguments 函数参数集合
Array数组
pop（）删除数组中最后一个元素，返回删除的那个值
push（）往数组结尾添加添加元素
shift（）删除数组中第一个元素，返回删除的那个值
unshift（）往数组前面添加元素
join（）把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的
reverse（）将数组中个元素顺序颠倒
concat（）连接数组
slice（）返回数组的一部分
sort（）对数组元素进行排序
splice（）插入、删除或替换数组的元素
Boolean布尔对象
Date日期时间
Error异常对象
Function函数构造器
Math数学对象
Math.PI 圆周率
Math.abs（）绝对值
Math.ceil（）向上取整
Math.floor（）向下取整
Math.round（）四舍五入
Math.sqrt（）求平方根
Number数值对象
Object基础对象
RegExp正则表达式对象
RegExp.text（）检测一个字符串是否匹配某个模式
String字符串对象
toLowerCase（）转小写
toUpperCase（）转大写
charAt（index）返回指定下标位置的一个字符，如果没有找到，返回空字符串
substr（）在原始字符串，返回一个子字符串
substring（）在原始字符串，返回一个子字符串
split（）将一个字符串转成数组
concat（）连接字符串
indexOf（）返回一个子字符串在原始字符串中的索引值，没找到返回-1
replace（）替换一个与正则表达式匹配的子串
slice （）抽取一个子字符串

37、JavaScript的数据类型有哪些？

简单数据类型：Undefined、Null、Boolean、Number、String
复杂数据类型：Object

38、javascript的Dom节点相关操作

（1）创建
creatElement（标签名）创建一个元素节点（具体的一个元素）
（2）插入节点
appendChild（节点）插入节点、可以添加已经存在的元素，
insertBefore（a，b）a节点会插入b节点的前面
（3）删除节点
removeChild（节点）删除一个节点，返回被移除的节点
（4）复制节点
cloneNode（）接受一个布尔值，true表示深复制（复制节点及其所有子节点）
false表示浅复制（复制节点本身，不复制子节点）
（5）替换节点
replaceChild（要插入的节点，被替换的节点）
（6）查找节点
getElementById（）通过id名称查找
getElementsByTagName（）通过标签名称查找
getElementsByClassName（）通过class名称查找

39、事件委托机制和好处

（1）基本概念
事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。
事件委托的原理是DOM元素的事件冒泡。一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段在这里插入图片描述

捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling
phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

（2）事件委托的优点

提高性能，可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件
可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

40、谈谈对jQuery的理解

jQuery是继prototype之后又一个优秀的javascript库，它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery使用户能更方便地处理HTML，events、实现动画效果，并且方便地为网站提供ajax交互。
jQuery还有一个比较大的优势，它的文档说明很全，而且各种应用也说的很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用在html里面插入一堆js来调用命令了，只要定义id即可。
jQuery是一个兼容多浏览器的js库，核心理念是write less，do more。jQuery是开源免费的，语法设计使开发更便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件，其模块化的使用方式使开发者可以很轻松的开发出强大的网页。
内部封装原理：
1、为了防止全局变量污染，把jQuery的代码写在一个自调用函数中
2、我们平时使用的$实际上是jQuery对外暴露的一个工厂函数
3、构造函数在jQuery内部叫init，并且这个构造函数还被添加到了jQuery的原型中。当我们调用工厂函数的时候，返回的其实是一个构造函数的实例
4、jQuery为了让第三方能够对其功能进行扩展，所以把工厂函数的原型与构造函数的原型保持了一致，这样就只对外暴露工厂函数，即可对原型进行扩展