前端面试题

 

 1.xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

     XHTML 元素必须被正确地嵌套。

     XHTML 元素必须被关闭。

   标签名必须用小写字母。

     XHTML 文档必须拥有根元素

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

href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。

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

3、行内元素有哪些?块级元素有哪些? 空(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

4、 form中的action属性和method属性的含义是什么？method常用值有哪些？

action属性用于指定form表单提交的后台程序地址；method属性用于指定form表单提交的方法。

method的常用值有：get和post

5、 表单元素新增的属性有哪些？

required： 必填项目

placeholder：提示信息，点击input内容时会消失

pattern:校验正则表达式

autofocus：自动获得焦点

autocomplete:自动完成

6.向指定服务器提交数据的方法有哪些？

   Ajax  表单Form  

   URL?参数 

   AngularJS的$HTTP

JQ Ajax: $.POST(,,)  $.GET(,,)  $.Ajax({})

JS Ajax: 5步。(参考25题)

7、写一个function，清除字符串前后的空格。(兼容所有浏览器)

function trim(str) {

   if (str && typeof str === "string") {

            return str.replace(/(^\s*)|(\s*)$/g,"");   //去除前后空白符

           }

} 

8、如何消除一个数组里面重复的元素?

var arr1 =[1,2,2,2,3,3,3,4,5,6],

 var arr2 = [ ];

    for(var i = 0； i< arr1.length; i++){

        if(arr2.indexOf(arr1[i]) < 0){

         arr2.push(arr1[i]);

        }

}

document.write(arr2); // 1,2,3,4,5,6

9、请描述一下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仅仅是为了在本地“存储”数据而生。

10、cookie和session的区别是什么？

   Cookie 保存在客户端本机；

   Session保存在服务器端；

  联系：session的id存在cookie中。

11.页面导入样式时，使用link和@import有什么区别？

1）.link属于XHTML标签，而@import是CSS提供的；

2）.页面被加载的时，link会同事被加载，而@import引用的CSS会等到页面被加载完再加载；

3）.import只有在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

4）.link 方式的样式的权重>@import的权重

12.简单描述下定位Position:

Relative:相对定位。相对于自身原有位置定位，原DOM空间会保留；

Absolute：绝对定位。相对于第一个非static定位的祖先元素进行定位，会删除原DOM空间；

Fixed：固定定位器窗口进行定位； 会删除DOM空间

Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

Inherit：规定从父元素继承 position 属性的值。

13.display有哪些值？说明他们的作用。

  block         象块类型元素一样显示。

  none          缺省值。象行内元素类型一样显示。

  inline-block    象行内元素一样显示，但其内容象块类型元素一样显示。

  list-item     象块类型元素一样显示，并添加样式列表标记。

  table         此元素会作为块级表格来显示

  inherit       规定应该从父元素继承 display 属性的值

14、jquery中如何将数组转化为json字符串，然后再转化回来？

$.parseJSON

$.fn.stringify = function() {

   return JSON.stringify(this);

}

使用：$(array).stringify();

15.JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

如：{"age":"12", "name":"back"}

JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON对象转换为JSON字符串：

var last=obj.toJSONString();

var last=JSON.stringify(obj);

16、什么是响应式设计？响应式设计的基本原理是什么？

   根据不同设备的屏幕大小、分辨率、方向等，统一网站展示为不同效果。

   移动优先。可以使用JS跳转不同手机站和PC站，可以使用MediaQuery检测不同设备的属性展示不同的CSS，可以使用各种响应式前端框架。

   优点：用户体验好，尤其是手机端。

   缺点：包含大量冗余代码，开发成本较大(但是远低于开发手机站+PC站的模式)

17. visibility：hidden和display：none的区别？

使用display：none隐藏以后，元素的空间被释放，其余元素可以占用空间；

使用visibility：hidden仅仅是看不见，但是元素的空间依然占据，别的元素无法使用。

18、 列举数组相关的常用方法

push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

19、 列举字符串相关的常用方法

indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

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

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FireFox（火狐）,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari（苹果自带的浏览器）,Chrome（谷歌）等。   [ Chrome的：Blink（WebKit的分支）]

21.title与h1的区别、b与strong的区别、i与em的区别？

   title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

  strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<b>是展示强调内容。

  i内容展示为斜体，em表示强调的文本；

22、网页验证码是干嘛的，是为了解决什么安全问题。

  区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；

  有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

23.对前端工程师这个职位你是怎么样理解的?

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px;

c. 与团队成员，UI设计，产品经理的沟通;

d. 做好的页面结构，页面重构和用户体验;

e. 处理hack，兼容、写出优美的代码格式;

f. 针对服务器的优化、拥抱最新前端技术。

24、什么是闭包(closure),为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。可以把闭包简单理解成“定义在一个函数内部的函数”

闭包的特性：

1.函数内再嵌套函数

2.内部函数可以引用外层的参数和变量

3.参数和变量不会被垃圾回收机制回收

//li节点的onclick事件都能正确的弹出当前被点击的li索引

 <ul id="test">

    <li> index = 0</li>

    <li> index = 1</li>

    <li> index = 2</li>

    <li> index = 3</li>

</ul>

<script type="text/javascript">

    var nodes = document.getElementsByTagName("li");

    for(i = 0;i<nodes.length;i+= 1){

      nodes[i].onclick = function(){

      console.log(i+1);        //不用闭包的话，值每次都是4

        }(i);

    }

</script>

25、Ajax是什么？如何创建一个Ajax？

ajax全称为：Asynchronous javascript and XML,即异步的JavaScript和xml，也称页面无刷技术。这里的异步可以简单的理解为：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

如何创建一个Ajax？

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

26.原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

27.（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

回答出概念即可，下面是几个要点

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

mousedown事件触发后，开始拖拽

mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置

mouseup时，拖拽结束

28、 apply, call和bind有什么区别?

三者都可以把一个函数应用到其他对象上，注意不是自身对象．apply,call是直接执行函数调用，bind是绑定，执行需要再次调用．

apply和call的区别是apply接受数组作为参数，而call是接受逗号分隔的无限多个参数列表，

代码演示

    function Person() {

    }

    Person.prototype.sayName() { alert(this.name); }

    var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例

    1) apply

    Person.prototype.sayName.apply(obj, [param1, param2, param3]);

    2) call

    Person.prototype.sayName.call(obj, param1, param2, param3);

    3) bind

    var sn = Person.prototype.sayName.bind(obj);    

    sn([param1, param2, param3]); // bind需要先绑定，再执行

   sn(param1, param2, param3); // bind需要先绑定，再执行

29、iframe有那些缺点？

*iframe会阻塞主页面的Onload事件；

*搜索引擎的检索程序无法解读这种页面，不利于SEO;

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以绕开以上两个问题。

30、如何解决ajax跨域问题？

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

自己的做法：

jQuery中ajax的使用

$.ajax({

dataType:’jsonp’

})