也许你须要点实用的-Web前端笔试题

时间 2019-11-10

标签也许须要实用 web 前端笔试栏目 HTML 繁體版

原文原文链接

以前发的一篇博客里没有附上答案，如今有空整理了下发出来，但愿能帮助到正在找工做的你，仍是那句话：技术只有本身真正理解了才是本身的东西，共勉。

Web前端笔试题

Html+css

1.对WEB标准以及w3c的理解与认识。

标签闭合，标签小写，不乱嵌套：提升搜索机器人的搜索概率；javascript

使用外联的css和js，结构行为表现的分离：文件下载与页面加载速度更快，内容能被更普遍的设备所访问；css

更少的代码和组件：容易维护，改版方便，不须要变更页面内容，提供打印版本而不须要复制内容，提升网站的易用性。html

2.Xhtml和html有什么区别。

Html（超文本标记语言）是标准通用标记语言下的一个应用，也是一种规范，一种标准。前端

Xhtml（可扩展超文本标记语言）是一种置标语言，表现方式与html相似，不过语法上更加严格，主要不一样：html5

1，全部元素必须被正确嵌套，java

2，全部标记必须闭合，jquery

3，标签名，属性名必须小写字母，web

4，全部的属性必须用“”括起来，ajax

5，全部非标签一部分的><&都必须以编码形式，算法

6，全部属性必需要有值，

7，注释中不要有--

8，图片必需要有说明文字

3.css的引入方式有哪些？link和@import的区别是？

四种：内联，内嵌，外链，导入

区别：

1，link属于xhtml标签，@import彻底是css提供的一种方式，link除了加载css还能够定义rss，定义rel属性等，@import只能加载css。

2，加载顺序差异：link引用的css是同时被加载的，@import引用的css会等到页面所有被下载完才会再被加载。

3，兼容性差异，@import是css2.1提出，ie5以上才支持，link没有兼容问题。

4，使用dom控制样式的差异，当用javascript去控制样式的时候，只能使用link，@import不是dom能控制的。

5，@import能够在css中再次引入其余样式表。

4.css选择符有哪些？哪些属性能够继承？优先级如何计算？内联和important哪一个优先级高？

标签选择符，类选择符，id选择符

继承的不如指定的，id>class>Tagname

Important优先级高

5.前端页面由哪三层构成，分别是什么？做用是什么？

结构层：html

由html或者xhtml负责建立，运用标签对网页内容的含义做出描述。

表示层：css

由css负责建立，对如何显示有关内容作出回答。

行为层：javascript

由javascript负责建立，负责回答应该如何对事件做出反应。

6.css的基本语句构成是？

选择器，属性，属性值

7.你曾经在哪些浏览器测试过兼容？这些浏览器的内核分别是什么？

Ie（ie内核），火狐（Gecko），谷歌（webkit），opera（presto）

8.<img>标签上title与alt属性的区别是什么？

Alt是在你的图片由于某种缘由不能加载的时候在页面显示的提示信息，它会直接输出在本来加载图片的地方，title是在鼠标悬停在图片上的显示的小提示，鼠标离开就没了，绝大数html标签都支持title。

9.写出几种IE6 BUG的解决方法

1.双边距BUG float引发的使用display

2.3像素问题使用float引发的使用dislpay:inline -3px

3.超连接hover 点击后失效使用正确的书写顺序 link visited hover active

4.Ie z-index问题给父级添加position:relative

5.Png 透明使用js代码改

6.Min-height 最小高度！Important 解决’

7.select 在ie6下遮盖使用iframe嵌套

8.为何没有办法定义1px左右的宽度容器（IE6默认的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

10.描述css reset的做用和用途。

Css reset重置浏览器的默认css样式，浏览器种类不一样，默认样式不同，经过使用css reset重置，让他们统一，方便开发。

11.你如何对网站的文件和资源进行优化？期待的解决方案包括:

1，尽量减小http请求数（文件合并）

2，使用CDN（内容分发网络）

3，添加Expire/Cache-Control头

4，启用Gzip压缩

5，css放在页面最上面

6，scrip放在页面最下面

7，避免在css中使用Expressions

8，把js和css放在外部文件中

9，减小dns查询

10，压缩javascript和css

11，避免重定向

12，移除重复脚本

13，配置实体标签

14，使用ajax缓存

12.什么是语义化的html？

根据内容的结构化（内容语义化），选择合式的标签（代码语义化），便于开发者的阅读和写出更加优雅的代码的同时让浏览器的爬虫和机器更好地解析。

13.清除浮动有几种方式？各自的优缺点是？

1,父级定义height（优势：代码少，简单易掌握；缺点：只适合固定高度元素，没法高度自适应）

2，结尾处使用空标签清除浮动：Clear:both（优势：理论上能清除全部标签的浮动，简单代码少浏览器支持好；缺点：增长了无心义的标签）

3，父级定义伪类after和zoom（优势：浏览器支持好；缺点：代码多，两句代码结合使用才能让主流浏览器都支持）

4，父级定义overflow:hidden（优势：代码少，简单，浏览器支持好；缺点：必须定义width或者zoom，同时不能定义height，不能和position配合使用）

5，父级定义overflow:auto（优势：代码少，简单，浏览器支持好；缺点：必须定义width或者zoom，同时不能定义height，内部元素高度超过父级会出现滚动条）

还有，父级一块儿浮动，父级定义display:table，结尾加br的clear：both等

14.浏览器标准模式和怪异模式之间的区别是什么？

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器本身的方式解析执行代码，由于不一样浏览器解析执行的方式不同，因此咱们称之为怪异模式。浏览器解析时到底使用标准模式仍是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

标准模式中

IE6不认识!important声明，IE7、IE8、Firefox、Chrome等浏览器认识；而在怪异模式中，IE6/7/8都不认识!important声明

15.解释下 CSS sprites，以及你要如何在页面或网站中使用它

是一种网页图片应用处理方式。它容许你将一个页面涉及到的全部零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像之前那样一幅一幅地慢慢显示出来了。

页面icon不少的状况下使用合适。

16.讨论CSS hacks，条件引用或者其余?

各个浏览器都认识，这里给firefox用；

\9全部的ie浏览器可识别；

\0 是留给ie8的

+ + ie7定了；

_ _专门留给神奇的ie6；

:root #test { } :root是给ie9的，

@media all and (min-width:0px){ #test {} } 这个是总是跟ie抢着认\0的神奇的opera，必须加个\0,否则firefox，chrome，safari也都认识。。。

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最后这个是浏览器新贵chrome和safari的。

这种注释的方式只有IE浏览器支持，其余浏览器只会把它当作html注释，不起任何做用。通常使用JavaScript或者服务器端程序判断User Agent。

17.解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?

从后往前判断。浏览器先产生一个元素集合，这个集合每每由最后一个部分的索引产生（若是没有索引就是全部元素的集合）。而后向上匹配，若是不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

18.你能描述一下渐进加强和优雅降级之间的不一样吗?

渐进加强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。

19.CSS字母大写?

text-transform 值：
Capitalize 英文拼音的首字母大写
Uppercase 英文拼音字母全大写
Lowercase 英文拼音字母全小写

20.CSS选择器都有哪些

派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不经常使用，不知道就算了）

除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，好比div .a{ }）
群组选择器（利用逗号间隔，好比p,div,#a{ }）

21.超连接访问事后hover样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超连接样式不在具备hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

22.浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

23.px和em的区别

PX:

PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。可是这种方法存在一个问题，当用户在浏览器中浏览咱们制做的Web页面时，若是改变了浏览器的缩放，这时会使用咱们的Web页面布局被打破。这样对于那些关心本身网站可用性的用户来讲，就是一个大问题了。所以，这时就提出了使用“em”来定义Web页面的字体。EM:

EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术须要一个参考点，通常都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。

另外，em是相对于父元素的属性而计算的，若是想计算px和em之间的换算，这个网站不错，输入数据就能够px和em相互计算。狠击这里：px和em换算

Rem:

EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能须要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，咱们只须要在根元素肯定一个参考值。

浏览器的兼容性

除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是全部浏览器都支持。

所以为了浏览器的兼容性，可“px”和“rem”一块儿使用，用"px"来实现IE6-8下的效果，而后使用“Rem”来实现代浏览器的效果。

24.透明度

html{

filter:alpha(opacity=50); /* ie 有效*/

-moz-opacity:0.5; /* Firefox 有效*/

opacity: 0.5; /* 通用，其余浏览器有效*/

}

Javascript

1.javascript的typeof返回哪些数据类型？

Object，number，function，boolean，undefined；

2.例举3种强制类型转换和2种隐式类型转换。

强制Number(),String(),Boolean(),Object();

隐式 + - == if while for in alert

3.Split()和join()的区别。

Join() 函数获取一批字符串，而后用分隔符字符串将它们联接起来，从而返回一个字符串。

Split() 函数获取一个字符串，而后在分隔符处将其断开，从而返回一批字符串。

split，是把一串字符（根据某个分隔符）分红若干个元素存放在一个数组里。而Join是把数组中的字符串连成一个长串，能够大致上认为是split的逆操做。

4.事件绑定和普通事件有什么区别？

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件能够添加多个。

5.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

6.Ie和dom事件流的区别？

1.执行顺序不同

2.参数不同

3.事件加不加on

4.this指向问题

7.Ie和标准下有哪些兼容性的写法？

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.Ajax的get和post方式的区别？

1、使用Get请求时,参数在URL中显示,而使用Post方式是放在虚拟载体里面,不会显示出来。

2、对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数均可以用Request来得到。

3、get传送的数据量较小，不能大于2KB。post传送的数据量较大，通常被默认为不受限制。但理论上，因服务器的不一样而异.

4、get安全性很是低，post安全性较高。

5、get请求需注意缓存问题,post请求不需担忧这个问题。

6、post请求必须设置Content-Type值为application/x-form-www-urlencoded

7、发送请求时,由于get请求的参数都在url里,因此send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

9.call和apply的区别？

call方法:

语法：call(thisObj，Object)

定义：调用一个对象的一个方法，以另外一个对象替换当前对象。

说明：

call 方法能够用来代替另外一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

若是没有提供 thisObj 参数，那么 Global 对象被用做 thisObj。

apply方法：

语法：apply(thisObj，[argArray])

定义：应用某一对象的一个方法，用另外一个对象替换当前对象。

说明：

若是 argArray 不是一个有效的数组或者不是 arguments 对象，那么将致使一个 TypeError。

若是没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用做 thisObj，而且没法被传递任何参数。

10.Ajax请求时，如何解析json数据？

使用eval parse 鉴于安全性考虑使用parse更靠谱

11.什么是javascript的本地对象，内置对象和宿主对象？

本地对象：独立于宿主环境的ECMAScript实现提供的对象。它们包括：Object，Function，Array，String，Boolean，Number，Date，RegExp，Error，EvalError，RangeError，ReferenceError ，SyntaxErro，TypeError URIError 能够实例化。

内置对象 Global和Math ：由ECMASscript实现提供的、独立于宿主环境的全部对象不能够实例化。

宿主对象：全部的非本地对象都是宿主对象即由ECMAscript实现的宿主环境提供的对象。全部BOM和DOM对象都是宿主对象，document,window 等。

12.Document load和document ready的区别？

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的全部元素都加载完成。

13.编写一个数组去重的方法。

1.建立一个新的数组存放结果

2.建立一个空对象

3.for循环时，每次取出一个元素与对象进行对比，若是这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容做为对象的一个属性，并赋值为1，存入到第2步创建的对象中。

1 var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //测试数组
2 for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
3     if (o[s[i]]) {
4         count++;//重复+1
5     } else {
6         o[s[i]] = 1;//不重复设置属性
7         tmp.push(s[i])//加入新数组
8 }}
9 alert(count);alert(tmp)

14.事件委托。

利用冒泡的原理，把事件加到父级上，触发执行效果。使用事件委托技术能让你避免对特定的每一个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪一个子元素的事件。

15.做用域链。

当代码在一个环境中执行时，会建立变量对象的的一个做用域链（scope chain）。做用域链的用途，是保证对执行环境有权访问的全部变量和函数的有序访问。做用域链的前端，始终都是当前执行的代码所在环境的变量对象。若是这个环境是一个函数，则将其活动对象做为变量对象。

每个函数都有本身的执行环境，当执行流进一个函数时，函数环境就会被推入一个环境栈中，而在函数执行以后，栈将其环境弹出，把控制权返回给以前的执行环境，这个栈也就是做用域链。

当执行函数时，将建立函数的执行环境(调用对象),并将该对象置于链表开头，而后将父级函数的调用对象连接在以后，最后是全局对象。

16.闭包。

闭包就是可以读取其余函数内部变量的函数。因为在Javascript语言中，只有函数内部的子函数才能读取局部变量，所以能够把闭包简单理解成"定义在一个函数内部的函数"。因此，在本质上，闭包就是将函数内部和函数外部链接起来的一座桥梁。闭包能够用在许多地方。它的最大用处有两个，一个是读取函数内部的变量，另外一个就是让这些变量的值始终保持在内存中。

1）因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题，在IE中可能致使内存泄露。解决方法是，在退出函数以前，将不使用的局部变量所有删除。

2）闭包会在父函数外部，改变父函数内部变量的值。因此，若是你把父函数看成对象（object）使用，把闭包看成它的公用方法（Public Method），把内部变量看成它的私有属性（private value），这时必定要当心，不要随便改变父函数内部变量的值。

17.如何阻止事件冒泡和默认事件。

//若是提供了事件对象，则这是一个非IE浏览器 
if  ( e  &&  e.stopPropagation )  { 
　　e.stopPropagation();   //所以它支持W3C的stopPropagation()方法
} else {
　　window.event.cancelBubble  =  true;  //不然，咱们须要使用IE的方式来取消事件冒泡  
　　return  false; 
}
//若是提供了事件对象，则这是一个非IE浏览器 
if  ( e  &&  e.preventDefault ) {
　　e.preventDefault();  //阻止默认浏览器动做(W3C)  
}  else  { 
　　window.event.returnValue  =  false;  //IE中阻止函数器默认动做的方式
　　return  false;
}

18.javascript的同源策略。

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

19.JS排序算法。

var sort = {
 debug: function(str) {
   if (window.console && window.console.log) {
   console.log(str);
   }
 },
 swap: function(arr, index1, index2) { //数组数据交换
  var temp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = temp;
 },
 bubbleSort: function(arr) { //冒泡排序
  this.debug("冒泡排序before:" + arr);
  var len = arr.length;
   for (var outer = 0; outer < len - 1; outer++) { //比较的轮数
    for (var inner = 0; inner < len - outer - 1; inner++) { //每轮比较的次数
     if (arr[inner] > arr[inner + 1]) {
      this.swap(arr, inner, inner + 1)
     }
    }
    this.debug("第" + (outer + 1) + "轮后:" + arr);
   }
   this.debug("冒泡排序after:" + arr);
  },
 selectionSort: function(arr) { //选择排序
  this.debug("选择排序before:" + arr);
  var min, len = arr.length;
  for (var outer = 0; outer < len - 1; outer++) {
   min = outer;
   // 比较最小项目和第outer项以后的剩余数组项, 以寻找更小项
   for (var inner = outer + 1; inner < len; inner++) {
    if (arr[inner] < arr[min]) {
     min = inner;
     this.debug("min--" + min);
    }
   }
   this.swap(arr, outer, min);
   this.debug("第" + (outer + 1) + "轮后:" + arr);
  }
  this.debug("选择排序after:" + arr);
 },
 insertionSort: function(arr) { //插入排序
  this.debug("插入排序before:" + arr);
  var temp, inner, len = arr.length;
  for (var outer = 1; outer < len; outer++) {
   temp = arr[outer];
   inner = outer;
   while (inner > 0 && arr[inner - 1] >= temp) {
    arr[inner] = arr[inner - 1];
    --inner;
   }
   arr[inner] = temp;
  }
  this.debug("插入排序after:" + arr);
 },
 shellSort: function(arr) { //希尔排序
  this.debug("希尔排序before:" + arr);
  var gaps = [5, 3, 1],
  temp;
  for (var g = 0; g < gaps.length; g++) {
   for (var i = gaps[g]; i < arr.length; i++) {
    temp = arr[i];
    for (var j = i; j >= gaps[g] && arr[j - gaps[g]] > temp; j -= gaps[g]) {
     arr[j] = arr[j - gaps[g]];
    }
    arr[j] = temp;
   }
  }
  this.debug("希尔排序after:" + arr);
 },
 shellSortDynamic: function(arr) { //动态计算间隔序列的希尔排序
 this.debug("动态计算间隔序列的希尔排序before:" + arr);
 var N = arr.length,
 h = 1;
 while (h < N / 3) {
  h = 3 * h + 1;
 }
 while (h >= 1) {
  for (var i = h; i < N; i++) {
   for (var j = i; j >= h && arr[j] < arr[j - h]; j -= h) {
    this.swap(arr, j, j - h);
   }
  }
  h = (h - 1) / 3;
 }
 this.debug("动态计算间隔序列的希尔排序after:" + arr);
},
mergeSort: function(arr) { //归并排序
 this.debug("归并排序before:" + arr);
 var len = arr.length,
 step = 1,
 left,
 right;
 var mergeArray = function(arr, startLeft, stopLeft, startRight, stopRight) {
  var rightArr = new Array(stopRight - startRight + 1),
  leftArr = new Array(stopLeft - startLeft + 1),
  k = startRight,
  m = 0,
  n = 0;
  for (var i = 0; i < (rightArr.length - 1); ++i) {
   rightArr[i] = arr[k];
   ++k;
  }
  k = startLeft;
  for (var i = 0; i < (leftArr.length - 1); ++i) {
   leftArr[i] = arr[k];
   ++k;
  }
  rightArr[rightArr.length - 1] = Infinity; //哨兵值
  leftArr[leftArr.length - 1] = Infinity; //哨兵值
  for (var k = startLeft; k < stopRight; ++k) {
   if (leftArr[m] <= rightArr[n]) {
    arr[k] = leftArr[m];
    m++;
   } else {
    arr[k] = rightArr[n];
    n++
   }
  }
 }
 if (len < 2) {
  return;
 }
 while (step < len) {
 left = 0;
 right = step;
 while (right + step <= len) {
  mergeArray(arr, left, left + step, right, right + step);
  left = right + step;
  right = left + step;
 }
 if (right < len) {
  mergeArray(arr, left, left + step, right, len);
 }
 step *= 2;
 }
this.debug("归并排序after:" + arr);
},
quickSort: function(arr) { //快速排序
 this.debug("快速排序before:" + arr);
 var _quickSort = function(arr) {
 var len = arr.length,
 lesser = [],
 greater = [],
 pivot,
 meCall = arguments.callee;
 if (len == 0) {
  return [];
 }
 pivot = arr[0];
 for (var i = 1; i < len; i++) {
  if (arr[i] < pivot) {
   lesser.push(arr[i])
  } else {
   greater.push(arr[i])
  }
 }
 return meCall(lesser).concat(pivot, meCall(greater));
}
this.debug("快速排序after:" + _quickSort(arr));
return _quickSort(arr);
}
}
var search = {
linearSearch: function(arr, data) { //线性查找
for (var i = 0; i < arr.length; i++) {
if (arr[i] == data) {
return i;
}
}
return -1;
},
binarySearch: function(arr, data) { //二分查找 适用于已排好序的线性结构
var lowerBound = 0,
upperBound = arr.length - 1,
mid;
while (lowerBound <= upperBound) {
mid = Math.floor((lowerBound + upperBound) / 2);
if (arr[mid] < data) {
lowerBound = mid + 1;
} else if (arr[mid] > data) {
upperBound = mid - 1;
} else {
return mid;
}
    return -1;
}
}
}
var tempArr = [3, 6, 4, 2, 11, 10, 5];
//sort.bubbleSort(tempArr);
//sort.selectionSort(tempArr);
//sort.insertionSort(tempArr);
//sort.shellSort(tempArr);
//sort.shellSortDynamic(tempArr);
//sort.mergeSort(tempArr);
//sort.quickSort(tempArr);

20.解释jsonp的原理，以及为何不是真正的ajax。

一、Ajax直接请求普通文件存在跨域无权限访问的问题，不管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一概不许；

二、可是Web页面上调用js文件时则不受是否跨域的影响（凡是拥有"src"这个属性的标签都拥有跨域的能力，好比<script>、<img>、<iframe>）；

三、因而能够判断，当前阶段若是想经过纯web端（ActiveX控件、服务端代理、属于将来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

四、有一种叫作JSON的纯字符数据格式能够简洁的描述复杂数据，更妙的是JSON还被js原生支持，因此在客户端几乎能够为所欲为的处理这种格式的数据；

五、web客户端经过与调用脚本如出一辙的方式，来调用跨域服务器上动态生成的js格式文件（通常以JSON为后缀），显而易见，服务器之因此要动态生成JSON文件，目的就在于把客户端须要的数据装入进去。

六、客户端在对JSON文件调用成功以后，也就得到了本身所需的数据，剩下的就是按照本身需求进行处理和展示了，这种获取远程数据的方式看起来很是像AJAX，但其实并不同。

七、为了便于客户端使用数据，逐渐造成了一种非正式传输协议，人们把它称做JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。

一、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也同样，都是请求一个url，而后把服务器返回的数据进行处理，所以jquery和ext等框架都把jsonp做为ajax的一种形式进行了封装；

二、但ajax和jsonp其实本质上是不一样的东西。ajax的核心是经过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

三、因此说，其实ajax与jsonp的区别不在因而否跨域，ajax经过服务端代理同样能够实现跨域，jsonp自己也不排斥同域的数据的获取。

四、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax同样，它也不必定非要用json格式来传递数据，若是你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

总而言之，jsonp不是ajax的一个特例，哪怕jquery等巨头把jsonp封装进了ajax，也不能改变着一点！

21.CSS预处理。

Css预处理器定义了一种新的语言将Css做为目标生成文件，而后开发者就只要使用这种语言进行编码工做了。预处理器一般能够实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。

目前比较流行的两种是Sass和Less，其余的还有 Stylus 、Dtcss等。不用你就out了吗，仍是要视状况而定？LESS CSS是个强大的工具，它弥补了css没有变量、没法运算等一些“先天缺陷”。

22.原型链。

函数的原型对象constructor默认指向函数自己，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针proto，该指针指向上一层的原型对象，而上一层的原型对象的结构依然相似，这样利用proto一直指向Object的原型对象上，而Object的原型对象用Object.proto = null表示原型链的最顶端，如此变造成了javascript的原型链继承，同时也解释了为何全部的javascript对象都具备Object的基本方法。

23.你知道attribute和property的区别么。

1. 定义

Property：属性，全部的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每一个HTML元素都有下面的这5个标准特性：id，title，lang，dir，className。DOM节点是一个对象，所以，他能够和其余的JavaScript对象同样添加自定义的属性以及方法。property的值能够是任何的数据类型，对大小写敏感，自定义的property不会出如今html代码中，只存在js中。

Attribute：特性，区别于property，attribute只能是字符串，大小写不敏感，出如今innerHTML中，经过类数组attributes能够罗列全部的attribute。

2. 相同之处

标准的 DOM properties 与 attributes 是同步的。公认的（非自定义的）特性会被以属性的形式添加到DOM对象中。如，id，align，style等，这时候操做property或者使用操做特性的DOM方法如getAttribute()均可以操做属性。不过传递给getAttribute()的特性名与实际的特性名相同。所以对于class的特性值获取的时候要传入“class”。

3. 不一样之处

对于有些标准的特性的操做，getAttribute与点号(.)获取的值存在差别性。如href，src，value，style，onclick等事件处理程序。

href：getAttribute获取的是href的实际值，而点号获取的是完整的url，存在浏览器差别。

4.浏览器兼容性上的差异

在IE<9的浏览器中，能够用点号和getAttribute在相互之间访问自定义属性。

IE<8（包括IE8种的IE7兼容模式），property和attribute相同。由于attribute对大小写不敏感，在这种状况下，用getAttribute访问特性的时候，浏览器会选择第一次出现的值。

24.解释下 JavaScript 中 this 是如何工做的。

在函数中：this 一般是一个隐含的参数。

在函数外（顶级做用域中）：在浏览器中this 指的是全局对象；在Node.js中指的是模块(module)的导出(exports)。

传递到eval()中的字符串：若是eval()是被直接调用的，this 指的是当前对象；若是eval()是被间接调用的，this 就是指全局对象。

25.解释下原型继承的原理?

当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止。

26.AMD vs CommonJS?

CommonJS 是javascript模块化编程的一种规范，主要是在服务器端模块化的规范，一个单独的文件就是一个模块。每个模块都是一个单独的做用域，也就是说，在该模块内部定义的变量，没法被其余模块读取，除非定义为global对象的属性。

CommonJS加载模块是同步的，只有加载完成，才能执行后面的操做，主要是因为服务端的编程模块文件都存在于本地硬盘，因此加载较快。

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。异步方式加载模块，模块的加载不影响它后面语句的执行。全部依赖这个模块的语句，都定义到一个回调函数中，等到加载完成以后，这个回调函数才会运行。

27.AMD vs CMD?

1. 对于依赖的模块，AMD 是提早执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改为能够延迟执行（根据写法不一样，处理方式不一样）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。好比 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每一个 API 都简单纯粹。

4. 还有一些细节差别，具体看这个规范的定义就好，就很少说了。

28.扩展 JavaScript 内置对象?

通常来讲，业界公认的是持后一种观点，不过若是你以为你的代码是可控的话，扩展内置对象的prototype是很方便的一种方式（prototype库中大量使用了这种手段），尤为是扩展后以原对象实例为this上下文调用，api比较美观直接，不然的话，把对象实例做为参数传给方法，看起来就不那么“面向对象”了，固然，这个问题能够经过给原对象封装一层wrap来解决，好比jquery的包装，能够在$实例化的dom对象上调用方法，而且能够链式调用。

29.如何从浏览器的 URL 中获取查询字符串参数?

//正则

function getQueryString(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

    var r = window.location.search.substr(1).match(reg);

    if (r != null) return unescape(r[2]); return null;

}

//获取URl参数

function parseUrl(url) {

    var parse = url.substring(url.indexOf("?") + 1),

    params = parse.split("&"),

    len = params.length,

    item = [],

    param = {};

    for (var i = 0; i < len; i++) {

        item = params[i].split("=");

        param[item[0]] = item[1];

    }

    return param;

}

// demo:

parseUrl("www.baidu.com/js?name=baidu&age=22&page=3")

// 结果

{name: "haorooms", age: "21", page: "2"}

30.什么是 "use strict"; ? 使用它的好处和坏处分别是什么?

严格模式

1. 消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;

2. 消除代码运行的一些不安全之处，保证代码运行的安全;

3. 提升编译器效率，增长运行速度;

4. 为将来新版本的Javascript作好铺垫。

缺点：

如今网站的JS 都会进行压缩，一些文件用了严格模式，而另外一些没有。这时这些原本是严格模式的文件，被 merge 后，这个串就到了文件的中间，不只没有指示严格模式，反而在压缩后浪费了字节。

31.常见兼容性问题?

png24位的图片在iE6浏览器上出现背景，解决方案是作成PNG8.

浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin状况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种状况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从整体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从全部状况中分离出来。

接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css

.bb{

/*全部识别*/

. /*IE6、7、8识别*/

+/*IE6、7识别*/

_/*IE6识别*/

}

IE下,可使用获取常规属性的方法来获取自定义属性,

也可使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性.

解决方法:统一经过getAttribute()获取自定义属性.

IE下,even对象有x,y属性,可是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,可是没有x,y属性.

解决方法：（条件注释）缺点是在IE浏览器下可能会增长额外的HTTP请求数。

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

可经过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超连接访问事后hover样式就不出现了被点击访问过的超连接样式不在具备hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

32.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？?

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

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，好比 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持经过document.createElement方法产生的标签，

能够利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还须要添加标签默认的样式：

固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>

<![endif]-->

如何区分： DOCTYPE声明\新增的结构元素\功能元素

33.前端须要注意哪些SEO?

合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提升网站速度：网站速度是搜索引擎排序的一个重要指标

34.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别?

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding，若是有滚动条，也不包含滚动条

scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸