前端面试概念题

1. CSS引入的方式有哪些？link和@import的有什么区别？各种方式的优先级如何？

A.内联（行内）： 写在页面上

<header>
  <style>
    div{color : red;}
  <style>
</header>

B. 内嵌： 直接在 HTML 标签中的 style 属性中添加 CSS

<div style="color: red;"><div>

C.外链（链接）： 通过link 标签引入外部文件

<link rel="stylesheet" type="text/css" href="style.css">

D.导入： 通过@import 导入外部文件

<header>
  <style type="text/css">
    @import url("css/style.css");
  </style>
</header>

link和@import两者都是外部引用CSS的方式，但是存在一定的区别：

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

优先级情况

• 理论上：内联（行内）>内嵌>链接>导入；
• 实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高；
• 一般情况下，在webkit中优先级情况为：!important > inline style > ID > class > tag；

2. 前端页面的三层结构：结构层（Html ），表示层（CSS），行为层（Javascript）

3. css的基本语句构成：选择器{属性1:值1;属性2:值2;……}

4. 主流浏览器内核：Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

5. 几种IE6 BUG的解决方法：

   • 双边距BUG float引起的 使用display；
   • 3像素问题 使用float引起的 使用dislpay:inline -3px；
   • 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active；
   • IE z-index问题 给父级添加position:relative；
   • Png 透明 使用js代码 改；
   • min-height 最小高度 !important 解决；
   • select 在ie6下遮盖 使用iframe嵌套；
   • 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）；

6. 标签上title与alt属性有什么区别：

   • alt 设置当图片因各种原因（网络故障、图片丢失）不能显示时用来代替显示的文字，使用户获取的信息相对完整；
   • title 设置当鼠标移上元素上是显示的提示文本；

7. CSS reset 重置浏览器的css默认属性，让其样式统一，达到兼容不同浏览器的目的；了解详情

8. css sprites（精灵） 是把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求次数从而提高访问效率，但是开发和维护相对麻烦；一般当有一堆图标时用得比较多。

9. 在W3C标准出来前各浏览器不统一的渲染模式称之为--怪异模式 ，在W3C标准出来后各浏览器统一的渲染模式称之为--标准模式 ，两种模式之间主要的区别在于对盒子模型渲染的方式不同 。了解详情

   • 在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right；
   • 在怪异模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)；
   • 通过指定DOCTYPE 可以指定以标准模式渲染；
   • 通过window.top.document.compatMode 可查看当前模式；

10. 语义化的HTML：合理的使用html标签对于搜索引擎的抓取有好处；

11. 清除浮动的几种方式以及各自的优缺点：

• 使用空标签清除浮动 clear:both（理论上能清除任何标签的浮动，但是会增加无意义的标签）；
• 使用overflow:auto（空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom:1用于兼容IE）
• 使用:afert伪元素清除浮动(用于非IE浏览器)；

12. javascript的typeof()函数返回的数据类：object, number, function, boolean, underfind

13. 常见的强制类型转换 和隐式类型转换 ：

• 制类型转换（parseInt, parseFloat, Number）；
• 隐式类型转换（== – ===）；

14. Javascript 常用方法：

• split() 切割成数组的形式；
• join() 将数组转换成字符串；
• push() 尾部添加；
• pop() 尾部删除；
• unshift() 头部添加；
• shift() 头部删除；

15. 事件绑定 和普通事件 有的区别：普通事件中的onclick是DOM0级事件只支持单个 事件，会被其他onclick事件覆盖，而事件绑定中的addEventListener是DOM2级事件可以添加多个事件而不用担心被覆盖；

16. Javascript Event事件中IE与标准DOM事件流的区别：IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件；了解详情

17. IE和标准下有哪些兼容性的写法

   /* 
   在IE8或者IE8以下的浏览器中，事件处理函数中使用的时间对象是window.event，IE8以上浏览器既可以使用window.event也可以使用传递的事件对象，不过火狐浏览器只能够使用传递的事件对象，所以以上代码主要是为了兼容火狐浏览器
   */
   var ev = ev || window.event;
   //获取视窗的高度
   var width = document.documentElement.clientWidth || document.body.clientWidth;
   //获取事件的触发源
   var target = ev.srcElement||ev.target;

18. 常用的解析json的方式通常用JSON.parse()，但是eval()方法也可以解析，两者区别如下：

• JSON.parse()解析json前会对其是否符合json格式进行检查，如果格式不正确则不进行解析，为保证安全性推荐使用；但某些低级的浏览器尚不支持JSON.parse()；
• eval()可以解析任何字符串而不对格式进行检查，所以eval()是不安全的；

19. js事件委托 ：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行，事件监听器会分析从子元素冒泡上来的事件，找到是那个触发事件的子元素，进而进行相关处理，这样处理的目的是不需要为每一个子元素分别添加事件，特别是当子元素有增加或减少的时候，提高性能，添加的元素还会有之前的事件。；了解详情

20. 闭包 闭包就是能够读取其他函数内部变量的函数，由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。作用： 一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。使用中需要注意的点：了解详情

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

21. 阻止事件冒泡和默认事件的方法：

 ``` javascript
 //阻止事件冒泡
 function stopBubble(e) {  
   if(e && e.stopPropagation){  
       e.stopPropagation();  
   } else {  
     window.event.cancelBubble = true;  
   }  
 };  
 // 阻止浏览器的默认事件  
 function stopDefault(e){  
   if(e && e.preventDefault) {  
     e.preventDefault();  
   } else {  
     window.event.returnValue = false;  
   }  
   return false;  
 };  
 ```

22. 解释jsonp的原理，以及为什么不是真正的ajax。了解详情

 jsonp动态创建script标签，回调函数
 Ajax是页面无刷新请求数据操作

23. javascript的本地对象，内置对象和宿主对象

 > * 本地对象为array obj regexp等可以new实例化
 > * 内置对象为gload Math 等不可以实例化的
 > * 宿主为浏览器自带的document,window 等

 ​

24. Javascript的同源策略： 一种安全策略，限制一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。

25. 什么是盒子模型:

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

26. 行内元素有哪些？块级元素有哪些？ 空(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、img

27. 简述一下src与href的区别:

 > * href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
 > * src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

28. 什么是CSS Hack?
    一般来说是针对不同的浏览器或同一浏览器不同的版本写不同的CSS,就是 CSS Hack。
    IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack。例如：

 ``` css
 /* 条件Hack */
 <!--[if IE]>
   <style>
      .test{color:red;}
   </style>
 <![end if]-->

 /* 属性Hack */
 .test{
   color:#090\9;     /* For IE8+ */
   color:#f00;       /* For IE7 and earlier */
   _color:#ff0;      /* For IE6 and earlier */
 }

 /* 选择符Hack */
 - html .test{color:#090;}     /* For IE6 and earlier */
 -- html .test{color:#ff0;}    /* For IE7 */
 ```

29. 简述同步和异步的区别（过桥模型）

 > * 同步是**阻塞模式** ，异步是**非阻塞模式** 。
 > * 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
 > * 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

30. 什么叫优雅降级和渐进增强？

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

31. px和em都是长度单位，区别是px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小 。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

32. 浏览器的内核分别是什么?

  > * IE: trident内核
  > * Firefox：gecko内核
  > * Safari：webkit内核
  > * Chrome：Blink(基于webkit，Google与Opera Software共同开发)
  > * Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

33. 怎样添加、移除、移动、复制、创建和查找节点？

  > * 1）创建新节点
  >   * createDocumentFragment() //创建一个DOM片段    
  >   * createElement() //创建一个具体的元素
  >   * createTextNode() //创建一个文本节点
  > * 2）添加、移除、替换、插入
  >   * appendChild() //添加
  >   * removeChild() //移除
  >   * replaceChild() //替换
  >   * insertBefore() //插入
  > * 3）查找
  >   * getElementsByTagName() //通过标签名称
  >   * getElementsByName() //通过元素的Name属性的值
  >   * getElementById() //通过元素Id，唯一性

34. caller是返回一个对函数的引用，该函数调用了当前函数；callee是返回正在被执行的function函数，也就是所指定的function对象的正文，它是arguments的一个属性。了解详情

35. 请描述一下cookies，sessionStorage和localStorage的区别

  > * sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
  > * localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
  > * web storage和cookie的区别Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。
  >   * Cookie的大小是受限的；
  >   * 并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽；
  >   * 另外cookie还需要指定作用域，不可以跨域调用；
  >   * Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
  >   * 但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

36. 一次完整的HTTP事务是怎样的一个过程：

  > *  域名解析
  > * 发起TCP的3次握手
  > * 建立TCP连接后发起http请求
  > * 服务器端响应http请求，浏览器得到html代码
  > * 浏览器解析html代码，并请求html代码中的资源
  > * 浏览器对页面进行渲染呈现给用户