WEB前端面试题整理（一）

WEB前端面试题的记录（一）

1、获取非行间样式的函数：
function getStyle(obj, attr){

  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } 
  else {
   return getComputedStyle(obj, false)[attr];
  }

}

2、javascript的本地对象、内置对象和宿主对象：
本地对象为array、obj、regexp等可以new实例化的对象，如Array、RegExp、String、Boolean；
内置对象为global、Math 等不可以实例化的对象（无法在浏览器中发现global对象的存在，因为其属性和方法都被绑定在了window对象中）；
每一个宿主对象的实现都取决于不同的浏览器，即产生浏览器兼容性问题，其宿主为浏览器自带的document,window 等；

3、字符串反转：利用split()方法将字符串转化为数组，然后利用数组的reverse()反转方法将其反转，然后再利用join()方法将数组转化为字符串。

4、window.location.hash 返回的是什么：锚点。

5、window.location.reload()：刷新当前页面

6、BOM对象有哪些：
window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
document对象，文档对象；
location对象，浏览器当前URL信息；
navigator对象，浏览器本身信息；
screen对象，客户端屏幕信息；
history对象，浏览器访问历史信息；

7、bind(), live(), delegate()的区别：
bind()： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。
live()： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。
delegate()： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上

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

9、如何优化自己的代码：
（1）代码重用：声明函数把整个过程封装起来；把他们弄成一些对象；
（2）避免全局变量（命名空间，封闭空间，模块化mvc..）AngularJS；
（3）拆分函数避免函数过于臃肿：单一职责原则：条理更加清晰，更好的维护；
（4）适当的注释；
（5）内存管理，尤其是闭包中的变量释放；
（6）变量命名规范；

10、描述web前端性能需要考虑哪方面，优化思路是什么：
（1）减少http请求：

      1)小图弄成大图（雪碧图、精灵图）；
      2)合理的设置缓存 localStorage 、cookie；
      3)资源合并、压缩 html代码的最小化，压缩体积：就是减少带宽；

（2）一些小的js文件合并成大的js文件；
（3）将外部的js文件置底；

11、简述readyonly与disabled的区别：

readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效；
当表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去；

12、HTTP协议中，GET和POST有什么区别：

get传送的数据长度有限制，post没有；
get通过url传递，在浏览器地址栏可见，post是在报文中传递；
get提交数据的类型是文本信息，post提交数据的类型是文本信息和二进制文件；
get传送的数据会缓存在url历史状态，post不会被浏览器缓存；
分别适用什么场景：
    post一般用于表单提交；
    get一般用于简单的数据查询，严格要求不是那么高的场景；

13、HTTP状态消息分别表示什么：

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

14、列举js数组类型中的常用方法：

  方法               描述
concat()：连接两个或更多的数组，并返回结果。
join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()：删除并返回数组的最后一个元素。
push()：向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()：颠倒数组中元素的顺序。
shift()：删除并返回数组的第一个元素。
slice()：从某个已有的数组返回选定的元素。
sort()：对数组的元素进行排序。
splice()：删除元素，并向数组添加新元素。
toSource()：返回该对象的源代码。
toString()：把数组转换为字符串，并返回结果。
toLocaleString()：把数组转换为本地数组，并返回结果。
unshift()： 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()： 返回数组对象的原始值

15、列举常用的js框架以及分别适用的领域：

jquery：简化了js的一些操作，并且提供了一些非常好用的API。
jquery ui、jquery-easyui：在jqeury的基础上提供了一些常用的组件 日期，下拉框，表格这些组件。
require.js、sea.js（阿里的玉帛）+》模块化开发使用的。
jquery mobile：是jquery自己出的支持移动端网页开发，不过非常笨重，但是功能非常强大。
zepto：精简版的jquery，常用于手机web前端开发功能,touch。

16、同步和异步的区别：

同步：阻塞模式。
举例：浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面（张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭）；即指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步：非阻塞模式。
举例：浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新（张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃）；即指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回系统会通知进程进行处理，这样可以提高执行的效率；

17、ajax的缺点：
（1）ajax不支持浏览器back按钮；
（2）安全问题 AJAX暴露了与服务器交互的细节；
（3）对搜索引擎的支持比较弱；//不会执行你的js脚本，只会操作你的网页源代码
（4）破坏了程序的异常机制；
（5）无法跨域请求，解决方式：jsonp；

18、盒子模型：

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

19、行内元素有哪些，块级元素有哪些，空(void)元素有哪些：

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

20、CSS实现垂直水平居中：

div使用绝对定位；指定宽高；top为50%；left为50%；此时div的左上顶点居中，所以margin-left为负（-）宽的一半；margin-top为负（-）高的一半。

21、简述一下src与href的区别：

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。如果在文档中添加<link href=”common.css”rel=”stylesheet”/>，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理，因此建议使      用link方式来加载css，而不是使用@import方式。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内，因此要将js脚本放在底部而非头部。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

22、什么是CSS Hack：

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般分为三种：条件Hack、属性级Hack、选择符Hack
例如：
     （1）条件Hack：
          [if IE]
              <style>
         .test{color:red;}
              </style>
          [endif]
     （2）属性Hack：
          .test{
              color:#090\9; /* For IE8+ */
              *color:#f00; /* For IE7 and earlier */
              color:#ff0; /* For IE6 and earlier */
          }
     （3）选择符Hack：
          * html .test{color:#090;} /* For IE6 and earlier */
          * + html .test{color:#ff0;} /* For IE7 */

23、px和em的区别：

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易，是相对长度单位，像素是相对于显示器屏幕分辨率而言的；
em得值不是固定的，并且em会继承父级元素的字体大小；
注：浏览器的默认字体高都是16px，所以未经调整的浏览器都符合: 1em=16px；那么12px=0.75em, 10px=0.625em；
pt是印刷业上常使用的单位，磅的意思，一般用于页面打印排版，16px = 1em = 12pt =100%。

24、优雅降级和渐进增强：

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到                                        更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
  （1）优雅降级是从复杂的现状开始，并试图减少用户体验的供给；
  （2）渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要；
  （3）降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带；

25、Doctype：一种标准通用标记语言的文档声明类型。

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）。
Doctype是严格模式还是混杂模式，如何触发这两种模式，区分它们有何意义：
Doctype用于声明文档使用那种规范（html/Xhtml）一般为 严格 过渡 基于框架的html文档。加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug。

26.DIV+CSS的布局较table布局有什么优点：
（1）改版的时候更方便 只要改css文件；
（2）页面加载速度更快、结构化清晰、页面显示简洁；
（3）表现与结构相分离；
（4）易于优化（seo）搜索引擎更友好，排名更容易靠前；

27、Img标签中的alt属性和title属性的异同：

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在                       没有title时把alt当成 tool tip显示)。
title(tool tip):该属性为设置该属性的元素提供建议性的信息。

28、strong标签和em标签的异同：

strong:粗体强调标签，强调，表示内容的重要性。
em:斜体强调标签，更强烈强调，表示内容的强调点。

29、一个网站有大量的图片，加载很慢，有哪些方法优化这些图片的加载，给用户更好的体验：
（1）优化图片的大小；
（2）用延迟加载技术：

       1)图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载；
       2)如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载；
       3)如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术；
       4)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验；
       5)如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致；

30、行内元素和块级元素的具体区别是什么，行内元素的padding和margin是否可以设置：

块级元素会独占一行,默认情况下；其宽度自动填满其父元素宽度；可设margin,padding；
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化;
margin-top/bottom、padding-top/bottom不可设；

31、描述一个“reset.css”文件，并如何使用它：

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一。

32、对WEB标准以及W3C的理解与认识：

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

33、XHTML和HTML有什么区别：

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言；
最主要的不同：
XHTML 元素必须被正确地嵌套；
XHTML 元素必须被关闭；
XHTML标签名必须用小写字母；
XHTML 文档必须拥有根元素；

34、CSS引入的方式有哪些：内联 内嵌 外链 导入

35、CSS选择符有哪些，优先级算法如何计算，内联和important哪个优先级高:

标签选择符 类选择符 id选择符 
Id>class>标签选择
important优先级高

36、前端页面有哪三层构成，分别是什么，作用是什么：

结构层 HTML表示层 CSS 行为层 JS

37、css的基本语句构成：

选择器{属性1:值1;属性2:值2;……}

38、各个浏览器的内核分别是什么：

IE浏览器内核为：Ie内核（Trident） 
火狐浏览器内核为：Gecko 
谷歌浏览器为：webkit
opear浏览器为：Presto
safari浏览器为：webkit

39、解释css sprites，如何使用：

css精灵：把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

40、浏览器标准模式和怪异模式之间的区别是什么：

盒子模型；渲染模式的不同；
注：使用 window.top.document.compatMode 可显示为什么模式。

41、如何对网站的文件和资源进行优化，期待的解决方案包括：
（1）文件合并
（2）文件最小化/文件压缩
（3）使用CDN托管
（4）缓存的使用

42、清除浮动的几种方式，各自的优缺点：
（1）使用空标签清除浮动：clear:both（理论上能清楚任何标签，但会增加无意义的标签）；
（2）使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）；
（3）是用afert伪元素清除浮动(用于非IE浏览器)；

43、HTML语义化：

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

（1）在没有CSS的情况下，页面也能呈现出很好的内容结构；
（2）用户体验好；
（3）有利于SEO：可以和搜索引擎建立良好沟通，有助于爬虫抓取更多有效信息；
（4）方便其他设备解析；
（5）便于团队开发与维护，语义化更具可读性；

44、Javascript的typeof返回哪些数据类型：

Object  number  function  boolean  underfind

45、列举3种强制类型转换和2种隐式类型转换：

强制：parseInt(num)  parseFloat()  Number()
隐式：num*1  +num  num-0  num/1

46、split() join() 的区别：

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

47、数组方法pop() push() unshift() shift()：

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

48、IE和DOM事件流的区别：
（1）执行顺序不一样；
（2）参数不一样；
（3）事件加不加on；
（4）this指向问题；

49、ajax请求时get 和post方式的区别：

（1）一个在url后面 一个放在虚拟载体里面；
（2）有大小限制；
（3）安全问题；
（4）应用不同，一个是论坛等只需要请求的，一个是类似修改密码的；

50、call和apply的区别：

Object.call(this,obj1,obj2,obj3);
Object.apply(this,arguments);

51、ajax请求时，如何解释json数据：

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

52、事件委托是什么：

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。

53、闭包是什么：

闭包就是能够读取其他函数内部变量的函数。

54、解释jsonp的原理，以及为什么它不是真正的ajax：
jsonp：动态创建script标签，回调函数。
ajax是页面无刷新请求数据操作。

55、document load 和document ready的区别：

Document.onload 是在结构和样式加载完才执行js。
Document.ready原生种没有这个方法，jquery中有 $().ready(function)。

56、"=="和"==="的不同：

前者会自动转换类型，后者不会。

57、javascript的同源策略：

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

58、编写一个数组去重的方法：

var arr = [1,2,3,4,5,6,5,4];
function removeRepeat() {
   var newArr = [];
   for(var i in arr) {
      if(newArr.indexOf(arr[i])==-1) {
         newArr.push(arr[i]);
      }
   }
   return newArr;
}
console.log(removeRepeat(arr));

59、js冒泡排序：

var arr = [2,4,9,11,6,3,88]; //采用冒泡排序，向上冒泡，最小值在最上边 
for(var x = 0 ; x < arr.length; x++) {//控制趟数 
   for(var y = x + 1 ; y < arr.length ; y++) { //依次比较，如果后面的元素大于前面的元素则交换 
       if(arr[x] > arr[y]){ 
            var temp = arr[x]; 
            arr[x] = arr[y]; 
            arr[y] = temp; 
       } 
   } 
} 
document.write(arr); 

60、块级元素与内联元素的区别是什么：

块级元素高度宽度都是可以设置的。块级元素默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。
非块级元素可以通过css的display:block;将其更改成块级元素；float也具有此功能。 
内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。
块级元素可以通过css的display:inline;和float来实现。
块元素(block element)：
   address - 地址
   blockquote - 块引用
   center - 举中对齐块
   dir - 目录列表
   div - 常用块级容易，也是css layout的主要标签
   dl - 定义列表
   fieldset - form控制组
   form - 交互表单
   h1 - 大标题
   h2 - 副标题
   h3 - 3级标题
   h4 - 4级标题
   h5 - 5级标题
   h6 - 6级标题
   hr - 水平分隔线
   isindex - input prompt
   menu - 菜单列表
   noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
   noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
   ol - 排序表单
   p - 段落
   pre - 格式化文本
   table - 表格
   ul - 非排序列表
内联元素(inline element)：
   a - 锚点
   abbr - 缩写
   acronym - 首字
   b - 粗体(不推荐)
   bdo - bidi override
   big - 大字体
   br - 换行
   cite - 引用
   code - 计算机代码(在引用源码的时候需要)
   dfn - 定义字段
   em - 强调
   font - 字体设定(不推荐)
   i - 斜体
   img - 图片
   input - 输入框
   kbd - 定义键盘文本
   label - 表格标签
   q - 短引用
   s - 中划线(不推荐)
   samp - 定义范例计算机代码
   select - 项目选择
   small - 小字体文本
   span - 常用内联容器，定义文本内区块
   strike - 中划线
   strong - 粗体强调
   sub - 下标
   sup - 上标
   textarea - 多行文本输入框
   tt - 电传文本
   u - 下划线
   var - 定义变量

61、<label>标签中的for属性：绑定的元素会获取焦点；

<label>标签中的accesskey属性：快捷键获取焦点；
注：要将label绑定到其他控件上，label元素上的for属性要设置为与该控件的ID相同；若要提交表单，要为label元素所绑定到的控件指定name。

62、iframe与frame区别：
（1）frame不能脱离frameset单独使用，iframe可以；
（2）frame不能放在body中；
（3）iframe必须放在body中；
（4）iframe可以随意使用；
（5）frame的高度只能通过frameset控制，iframe可以自由控制；

63、Javascript基本特点：
（1）脚本语言（一种解释型脚本语言，无需编译，直接运行）；
（2）基于对象；
（3）简单（弱类型的变量类型）；
（4）跨平台（只依赖浏览器，与操作系统无关）；
（5）嵌入式；