2019前端面试题 - 收集
程序员文章站
2022-03-04 12:19:57
...
2019前端面试题收集
- 1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现?
- 2.写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式?
- 3. 阐述清楚浮动的几种方式（常见问题）
- 4. 解释css sprites ，如何使用？
- 5. 如何用原生js给一个按钮绑定两个onclick事件？
- 6. 拖拽会用到哪些事件?
- 7. jquery中的选择器？
- 8. Javascript中的定时器有哪些？他们的区别及用法是什么？
- 9. 请描述一下 cookies sessionStorage和localstorage区别？
- 10. 数组去重
- 11. document.write和innerHTML的区别？
- 12. Ajax
- 13. xml和json的区别?
- 14. box-sizing常用的属性有哪些？分别有什么作用？
- 15. css选择器有哪些，选择器的权重的优先级?
- 16. 块级元素水平垂直居中的方法有哪些（三个方法）?
- 17. js有几种数据类型，其中基本数据类型有哪些?
- 18. undefined 和 null 区别
- 19. http 和 https 有何区别？如何灵活使用？
- 20. 常见的HTTP状态码
- 21. 如何进行网站性能优化
- 22. react和vue有哪些不同，说说你对这两个框架的看法
- 23. MVVM, MVC
- 24. px和em的区别
- 25. 优雅降级和渐进增强
- 26. eval()的作用
- 27. JS哪些操作会造成内存泄露
- 28. 浏览器缓存有哪些，通常缓存有哪几种
- 29. bootstrap响应式实现的原理
- 30. 关于JS事件冒泡与JS事件代理（事件委托）
- 31. CSS样式覆盖规则
- 32. 请简要描述margin重合问题，及解决方式
- 33. position的值，relative\absolute\fixed分别相对于进行谁定位，有什么区别，什么时候用？
- 34. 什么是闭包，如何使用它，为什么要使用它？
- 35. 请解释JSONP的工作原理，以及它为什么不是真正的AJAX
- 36. 请解释一下JavaScript的同源策略。
- 37. 怎样添加、移除、移动、复制、创建和查找节点？
- 38. 谈谈垃圾回收机制方式及内存管理
- 40. jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？
- 41. 浏览器的内核分别是什么?
- 42. 浏览器是如何渲染页面的？
- 43. CSS3新特性
- 44. 从输入url到显示页面，都经历了什么?
- 45. 对 meta 标签有什么理解
- 46. h5新特性
- 47. vue的生命周期
- 48. display none visibility hidden区别？
- 49. JavaScript中如何检测一个变量是一个String类型？请写出函数实现
- 50. $(document).ready()方法和window.onload有什么区别？
- 51. jquery中 `$`.get()提交和`$`.post()提交有区别吗？
- 52. 什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识）
- 53. 为什么要用ajax
- 54. 请介绍一下XMLhttprequest对象。
- 55. AJAX技术体系的组成部分有哪些
- 56. AJAX应用和传统Web应用有什么不同。
- 57. AJAX请求总共有多少种CALLBACK
- 58. Ajax和javascript的区别。
- 59. 在浏览器端如何得到服务器端响应的XML数据
- 60. XMLHttpRequest对象在IE和Firefox中创建方式有没有不同。
- 61. 介绍一下XMLHttpRequest对象的常用方法和属性。
- 62. 什么是XML
- 63. XML的解析方式
- 64. 你采用的是什么框架（架包）
- 65. 如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架
- 66. 介绍一下Prototype的$()函数，$F()函数，$A()函数都是什么作用
- 67. 介绍一下XMLHttpRequest对象
- 68. AJAX的全称是什么？ 介绍一下AJAX？
- 69. Ajax主要包含了哪些技术？
- 70. AJAX都有哪些优点和缺点？
- 71. 跨域的九种方式
1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现?
div{
width: 200px;
height: 200px;
position: absolute;
background-color: red;
top:50%;
left:50%;
margin-left:-100px;
margin-top: -100px;
z-index:1000;
}
2.写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式?
<xmp style="margin: 0;padding: 0;height: 48px;position: relative;top: -28px;">
<body>
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</body>
</xmp>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
#left {
height: 100%;
width: 200px;
background-color: yellow;
float: left;
}
#right {
height: 100%;
width: 200px;
background-color: yellow;
float: right;
}
#center {
height: 100%;
float: left;
background-color: red;
position: absolute;
left: 200px;
right: 200px;
}
css样式默认加载顺序:
1) 样式表的元素选择器选择越精确，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
2)对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
所以把类选择器center写在后面就可以了。
第一种：
左右侧采用浮动 中间采用margin-left 和 margin-right 方法
第二种：
左右两侧采用绝对定位 中间同样采用margin-left margin-right方法
第三种：
负的margin
3. 阐述清楚浮动的几种方式（常见问题）
1) 父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2) 父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
3) 结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
4. 解释css sprites ，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片
5. 如何用原生js给一个按钮绑定两个onclick事件？
1) 直接绑定多个事件
<xmp style="margin: 0;padding: 0;height: 0px;position: relative;top: -24px;">
<button onclick="aa();bb();">click me</button>
</xmp>
2) 事件监听
var btn = document.getElementById("btn");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
6. 拖拽会用到哪些事件?
· dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
· dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮.
· dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
· dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
· drag:拖拽期间在被拖拽元素上连续触发.
· drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
· dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.
7. jquery中的选择器？
基本选择器，层次选择器，基础过滤选择器，内容选择器，可见度过滤选择器，属性过滤器，子元素过滤选择器，表单对象属性过滤器，表单选择器
8. Javascript中的定时器有哪些？他们的区别及用法是什么？
setTimeout 只执行一次
setInterval 会一直重复执行
9. 请描述一下 cookies sessionStorage和localstorage区别？
相同点：都存储在客户端.
不同点：
1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
10. 数组去重
indexOf(),sort(),重复循环,new Set(arr)···
11. document.write和innerHTML的区别？
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。
每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。
你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
12. Ajax
ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。
第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步，使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，
每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数
13. xml和json的区别?
· JSON相对于XML来讲，数据的体积小，传递的速度更快些
· JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
· XML对数据描述性比较好；
· JSON的速度要远远快于XML
14. box-sizing常用的属性有哪些？分别有什么作用？
属性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
15. css选择器有哪些，选择器的权重的优先级?
选择器类型:
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type="text"]
6、伪类 ：hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
权重计算规则:
1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值
16. 块级元素水平垂直居中的方法有哪些（三个方法）?
实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，
然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，
最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。
CSS代码：
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
实现二、原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。
CSS代码：
.mycss{
position: absolute;
left: 0px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 200px;
width: 300px;
}
实现三、jQuery实现水平和垂直居中
原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，
边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。
注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。
jquery代码：
$(window).resize(function(){
$(".myblock").css({
position: "absolute",
left: ($(window).width() - $(".myblock").outerWidth())/2,
top: ($(window).height() - $(".myblock").outerHeight())/2
});
});
// 此外在页面载入时，就需要调用resize()方法
$(function(){
$(window).resize();
});
17. js有几种数据类型，其中基本数据类型有哪些?
五种基本类型: Undefined、Null、Boolean、Number和String。
1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。
Object、Array和Function则属于引用类型
18. undefined 和 null 区别
null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。
undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。
没有返回值的函数返回为undefined，没有实参的形参也是undefined。
javaScript权威指南： null 和 undefined 都表示“值的空缺”，
你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。
19. http 和 https 有何区别？如何灵活使用？
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的**用服务器方的证书进行了非对称加密。
此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份
20. 常见的HTTP状态码
2开头 （请求成功）表示成功处理了请求的状态代码
200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
400 （错误请求） 服务器不理解请求的语法。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
21. 如何进行网站性能优化
1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端优化的途径有很多，按粒度大致可以分为两类，
第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;
第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。
另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
一、页面级优化
1. JavaScript 压缩和模块打包
2. 按需加载资源
3. 在使用 DOM 操作库时用上 array-ids
4. 缓存
5. 启用 HTTP/2
6. 应用性能分析
7. 使用负载均衡方案
8. 为了更快的启动时间考虑一下同构
9. 使用索引加速数据库查询
10. 使用更快的转译方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用于未来的一个建议：使用 service workers + 流
13. 图片编码优化
22. react和vue有哪些不同，说说你对这两个框架的看法
相同点
· 都支持服务器端渲染
· 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
· 数据驱动视图
· 都有支持native的方案,React的React native,Vue的weex
不同点
· React严格上只针对MVC的view层,Vue则是MVVM模式
· virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理
23. MVVM, MVC
MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。
MVC使用非常广泛，比如JavaEE中的SSH框架
如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，
因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，
因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view
24. px和em的区别
px表示像素 (计算机屏幕上的一个点：1px = 1/96in)，是绝对单位，不会因为其他元素的尺寸变化而变化；
em表示相对于父元素的字体大小。em是相对单位 ，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。
25. 优雅降级和渐进增强
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。
比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容
26. eval()的作用
eval("2+3"); //执行加运算，并返回运算值。
eval("varage=10"); //声明一个age变量
eval的作用域:
functiona(){
eval("var x=1"); //等效于 var x=1;
console.log(x); //输出1
}
a();
console.log(x); //错误 x没有定
27. JS哪些操作会造成内存泄露
1）意外的全局变量引起的内存泄露
function leak(){
leak="xxx"; //leak成为一个全局变量，不会被回收
}
2）闭包引起的内存泄露
3）没有清理的DOM元素引用
4）被遗忘的定时器或者回调 5）子元素存在引起的内存泄露
28. 浏览器缓存有哪些，通常缓存有哪几种
一、http缓存
二、websql
cookie
localstorage
sessionstorage
flash缓存
29. bootstrap响应式实现的原理
百分比布局+媒体查询
30. 关于JS事件冒泡与JS事件代理（事件委托）
1.事件冒泡：
通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，
触发父级元素的点击事件。
2.事件委托
事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？
对，就是将子元素的事件通过冒泡的形式交由父元素来执行。
31. CSS样式覆盖规则
规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
内联样式的权值>>ID选择器>>类选择器>>标签选择器
规则四：样式权值相同时，后者获胜。
规则五：!important的样式属性不被覆盖。
!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。
如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，
大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。
32. 请简要描述margin重合问题，及解决方式
1.同向margin的重叠：
1图片的margin-top与3图片的margin-top发生重叠，2图片的margin-bottom与3图片的margin-bottom发生重叠。
这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。
解决同向重叠的方法：
（1）在最外层的div中加入overflow:hidden;zoom:1
（2）在最外层加入padding:1px;属性
（3）在最外层加入：border:1px solid #cacbcc;
2.异向重叠问题：
1图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。
解决异向重叠问题：
float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）
33. position的值，relative\absolute\fixed分别相对于进行谁定位，有什么区别，什么时候用？
34. 什么是闭包，如何使用它，为什么要使用它？
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。
它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
使用闭包的注意点：
· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，
在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
· 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），
把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值
35. 请解释JSONP的工作原理，以及它为什么不是真正的AJAX
JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，
于是我们可以通过script标记来动态加载其他域的资源。
例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，
然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。
JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。
JSONP易于实现，但是也会存在一些安全隐患，
如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。
AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样
36. 请解释一下JavaScript的同源策略。
在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。
同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？
当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。
本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。
37. 怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
38. 谈谈垃圾回收机制方式及内存管理
回收机制方式
1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。
2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。
但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。
3、实例如下：
function fn1() {
var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
var obj = {name:'hanzichi', age: 10};
return obj;
}
var a = fn1();
var b = fn2();
fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；
在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。
4、垃圾回收策略：标记清除(较为常用)和引用计数。
标记清除：
定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。
某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。
到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。
引用计数：
定义和用法：引用计数是跟踪记录每个值被引用的次数。
基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。
40. jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？
(1)、bind 【jQuery 1.3之前】
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；
语法：bind(type,[data],function(eventObject))；
特点：
(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。
(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。
实例如下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3之后】
定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；
语法：live(type, [data], fn);
特点：
(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。
(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。
(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；
实例如下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定义和用法：将监听事件绑定在就近的父级元素上
语法：delegate(selector,type,[data],fn)
特点：
(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。
(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。
实例如下：
$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});
(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】
定义和用法：将监听事件绑定到指定元素上。
语法：on(type,[selector],[data],fn)
实例如下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。
说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。
总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()
41. 浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
42. 浏览器是如何渲染页面的？
渲染的流程如下：
1.解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置《 用户设置《 外部样式《 内联样式《 HTML中的style样式；
3.将CSS与DOM合并，构建渲染树（Render Tree）
4.布局和绘制，重绘（repaint）和重排（reflow）
43. CSS3新特性
1.CSS3边框：
· border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，
在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
· box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
· border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;
2.CSS3背景：
· background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。
在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
· background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
3.CSS3文字效果：
· text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
· word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}
4.CSS3 2D转换：
transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
· translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;
值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
· rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
· scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，
把高度转换为原始高x() 5.CSS3 3D转换：
· rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);
· rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);
6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。
7.CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
8.CSS3多列：
· column-count：属性规定元素应该被分隔的列数。
· column-gap：属性规定列之间的间隔。
· column-rule ：属性设置列之间的宽度、样式和颜色规则。
9.CSS3用户界面：
· resize：属性规定是否可由用户调整元素尺寸。
· box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
· outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
44. 从输入url到显示页面，都经历了什么?
第一步：客户机提出域名解析请求,并将该请求发送给本地的域名服务器。
第二步：当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。
第三步：如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址。
第四步：本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。
第五步：重复第四步,直到找到正确的纪录。
45. 对 meta 标签有什么理解
什么是meta标签？
引自下W3school的定义说明一下。
元数据（metadata）是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
其实对上面的概念简单总结下就是：<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。
可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
meta的作用
meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容
46. h5新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
47. vue的生命周期
vue的生命周期...(waiting)
48. display none visibility hidden区别？
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；
visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流
（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），
而visibility切换是否显示时则不会引起回流。
49. JavaScript中如何检测一个变量是一个String类型？请写出函数实现
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
50. $(document).ready()方法和window.onload有什么区别？
(1) window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2) $(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。
51. jquery中 $.get()提交和$.post()提交有区别吗？
相同点：都是异步请求的方式来获取服务端的数据；
异同点：
1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多
4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。
52. 什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识）
什么是ajax：
AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术：
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
53. 为什么要用ajax
Ajax应用程序的优势在于：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
2. AJAX最大的特点是什么。
Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
54. 请介绍一下XMLhttprequest对象。
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。
简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
55. AJAX技术体系的组成部分有哪些
HTML，css，dom，xml，xmlHttpRequest，javascript
56. AJAX应用和传统Web应用有什么不同。
在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。
用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。
使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，
展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。
57. AJAX请求总共有多少种CALLBACK
onSuccess, onFailure, onUninitialized, onLoading, onLoaded, onInteractive, onComplete, onException
58. Ajax和javascript的区别。
javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。
Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们相似的名称只是一种行销策略。
在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。
在 Ajax应用中信息是如何在浏览器和服务器之间传递的通过XML数据或者字符串
59. 在浏览器端如何得到服务器端响应的XML数据
XMLHttpRequest对象的responseXMl属性
60. XMLHttpRequest对象在IE和Firefox中创建方式有没有不同。
有，IE中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到
61. 介绍一下XMLHttpRequest对象的常用方法和属性。
open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求方式可以为GET，POST或任何服务器所支持的您想调用的方式。第二个参数是请求页面的URL。
send()方法，发送具体请求
abort()方法，停止当前请求
readyState属性 请求的状态 有5个可取值0=未初始化 ，1=正在加载，2=以加载，3=交互中，4=完成
responseText 属性 服务器的响应，表示为一个串
reponseXML 属性 服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok 400对应not found
62. 什么是XML
XML是扩展标记语言，能够用一系列简单的标记描述数据
63. XML的解析方式
常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用，优点是操作方便，但是比较耗内存。
Sax是按事件驱动的方式解析的，占用内存少，但是编程复杂
64. 你采用的是什么框架（架包）
在java中比较流行的有 dojo, Prototype , JQuery, Dwr, extjs 等等
65. 如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架
DWR框架介绍
DWR(DirectWeb Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.
利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).
DWR的实现原理是通过反射，将java翻译成javascript，然后利用回调机制，从而实现了javascript调用Java代码
66. 介绍一下Prototype的F()函数，$A()函数都是什么作用
$() 方法是在DOM中使用过于频繁的document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。
$F()函数是另一个大收欢迎的“快捷键”，它能用于返回任何表单输入控件的值，比如textbox,drop-down list。这个方法也能用元素id或元素本身做为参数。
$A()函数能把它接收到的单个的参数转换成一个Array对象。
67. 介绍一下XMLHttpRequest对象
通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
AJAX开始流行始于Google在2005年使用的”Google Suggest”。
“Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口：
当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。
XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。
68. AJAX的全称是什么？ 介绍一下AJAX？
AJAX的全称是Asynchronous JavaScript And XML.
AJAX是2005年由Google发起并流行起来的编程方法， AJAX不是一个新的编程语言，但是它是一个使用已有标准的新的编程技术。
使用AJAX可以创建更好，更快，更用户界面友好的Web应用。
AJAX技术基于Javascript和HTTP Request.
69. Ajax主要包含了哪些技术？
Ajax（Asynchronous JavaScript + XML）的定义
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。
事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。
AJAX的应用使用支持以上技术的web浏览器作为运行平台。
这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。
70. AJAX都有哪些优点和缺点？
优点:
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点:
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
71. 跨域的九种方式
跨域原因：
因为所有的浏览器都遵循由网景公司提出的著名的安全策略-同源策略，
所谓同源是指域名、协议、端口相同，当页面在执行一个脚本时会检查访问的资源是否同源，
如果非同源，那么在请求资源的时，浏览器会在控制台报一个异常，提示拒绝访问。
跨域的解决方案：
1. 通过jsonp跨域
原理：动态创建script标签，利用标签的src属性不受同源策略限制的特点将请求到的数据放到回调函数里面当参数；与cors相比：支持get请求与老式浏览器；
2. 跨域资源共享(CORS)
用法简而言之：是服务端设置Access-Control-Allow-Origin字段为相关域名或者*；支持所有请求方式，老式浏览器上无法使用
3. WebSocket协议跨域
H5新特性，对http协议上的补充，可提供全双工通信；使用时先new 一个WebSocket, 按需监听open、message、 error、与close事件实现需求；
4. node.js中间件代理跨域
使用webpack做前端自动化构建工具时，修改webpack-dev-server的proxy属性；其他情况引用http-proxy-middleware模块；
5. nginx代理跨域
在nginx.conf文件里面配置server下面的location；
6. postMessage跨域
发送方用postMessage(data,origin)方法， 接收方监听message事件；
7. window.name+iframe跨域
利用同一个窗口中的代码共享window.name属性且iframe的src属性不受同源策略限制的特点；
传输方设置window.name的值，接收方设置一个隐藏的iframe，在iframe onload时获取iframe.contentWindow.name;
8. document.domain+iframe跨域
在主域的情况下相同，把document.domain设置成自身或更高一级的父域，也需要引入iframe；
9. location.hash+iframe跨域
服务端将数据当做改变后的路径的hash值加在路径上， ifram加载时获取；
超详细：https://mp.weixin.qq.com/s/LV7qziMyrMt0_EJWo05qkA
上一篇： 使用jquery实现下拉列表选项
下一篇： php怎么改变字符串编码