前端面试问答备忘

记录一些前端面试的问题及回答，有些是自己面试时遇到的，有些是网上看到的，回答并不一定准确，记录在此作备忘吧。
<i>不定期更新。。。</i>

HTML相关

• html如何上传文件？
  其实换一个问法比较好：html中上传文件使用的是什么标签。

  <input type="file" name="name" id="idname">

• localStorage与sessionStorage？
  参考w3school

H5提供了两种在客户端存储数据的新方法：
1.localStorage—没有时间限制的数据存储
2.sessionStorage—针对一个session进行数据存储。当用户关闭浏览器后数据会被删除
之前，客户端数据存储都是由cookie完成的。但是cookie不适合大量数据的存储，因为cookie由每个对服务器的请求来传递，这使得cookie速度很慢而且效率不高。
在H5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

• SVG与Canvas？
  参考w3school

** Canvas和SVG都允许在浏览器中创建图形，但它们根本上是不同的。**

• SVG
  SVG是一种使用XML描述2D图形的语言。
  SVG基于XML，这意味着SVG DOM中的每个元素都是可用的。可以为某个元素附加JavaScript事件处理器。
  在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能自动重现图形。
• Canvas
  Canvas通过JavaScript来绘制2D图形。
  Canvas是逐像素进行渲染的。
  在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已经被图形覆盖的对象。
• Canvas 与 SVG 的比较
  下面列出了canvas与SVG的一些不同之处：

• Canvas
  依赖分辨率
  不支持事件处理器
  弱的文本渲染能力
  能够以.png或.jpg格式保存结果图像
  最适合图像密集型的游戏，其中的许多对象会被频繁重绘
• SVG
  不依赖分辨率
  支持事件处理器
  最适合带有大型渲染区域的应用程序（比如谷歌地图）
  复杂度高会减慢渲染速度（任何过渡使用DOM的应用都不快）
  不适合游戏应用

CSS相关

• float导致的父元素高度塌陷问题是什么？如何解决？

父元素如果只包含设置了浮动的元素且父元素没有设置具体高度，那么父元素的高度就会塌缩为零。
解决办法：

1. 父元素紧邻的元素设置clear:both；
2. 在父元素的属性同时设置width:100%(或固定宽度)和overflow:hidden。

• 让页面中一个DIV a 浮在下面一个DIV b 上面的方法？

1. 设置a浮动，b不设置浮动
2. 设置a绝对定位，并设置z-index:number;number越大则浮层越靠上层

• 描述一下盒模型

** 盒模型规定了元素框处理元素内容element、内边距padding、边框border和外边距margin的方式。**
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
<b><i>提示：背景应用于由内容和内边距、边框组成的区域。</b></i>
盒模型大小=element + padding + border + margin

• 如何实现流星划过动画
  参考animation动画实践
• 如何实现分辨率响应式
  参考响应式网页设计

JavaScript相关

• this的理解
  参考MDN-this和阮一峰的网络日志

• 调用函数的那个对象

• 原型链和继承
  参考MDN-继承与原型链
• 谈谈HTTP及各状态码含义
  参考W3School-HTTP 方法和W3School-HTTP 状态消息、阮一峰的网络日志-HTTP 协议入门

• 1xx——信息
• 2xx——成功
• 3xx——重定向
• 4xx——客户端错误
• 5xx——服务器错误

• ajax同步异步如何实现？什么时候使用同步？
  参考JavaScript：彻底理解同步、异步和事件循环(Event Loop)
• ajax技术的优缺点

参考AJAX工作原理及其优缺点和Ajax的优缺点

• 长度不确定的二进制字符串如何转换成十进制数字

字符串转换成数值，二进制转换成十进制（长度不确定是什么鬼？）

• 正则表达式会用吗

• 如何防止URL地址加键值对登陆

• 换肤功能如何实现
  参考使用jQuery实现Web页面换肤功能的要点解析和JavaScript+CSS实现网页换肤功能

基本流程：访问网页——JS读取Cookie——如果没有则使用默认皮肤；如果有则使用指定皮肤——用户点击换肤，JS控制替换对应的CSS 样式表——将当前皮肤选项写进Cookie和后端数据库保存。

• 对象的三种声明方式？
  如声明一个字符串对象：

1. str = null;
   未进行实例化，是一个空的对象，未指向任何内存空间
2. str = "";
   str是一个实例，有自己的对象空间
3. str = new String();
   str对象分配了指向new String()所创建的内存空间，即对这个对象str进行了实例化。

• 谈一谈对闭包的理解
  参考segmentfault和MDN

闭包 是指有权访问另一个函数作用域中的变量的函数。
创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包是javascript语言的一大特点，主要应用闭包场合主要是为了：设计私有的方法和变量。
一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包的情况不同！

框架&类库&工具&其他

• IE浏览器的几种模式
  参考IE “浏览器模式”和“文档模式”的区别和浏览器模式和文档模式 学习笔记

• 浏览器模式和文档模式
  “浏览器模式”用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理（User-Agent）字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能，这样就可以向不同的浏览器返回不同的页面内容。
  “文档模式”用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新，但不会更改用户代理字符串中的版本号，也不会从服务器重新下载网页。切换浏览器模式的同时，浏览器也会自动切换到相应的文档模式。
• 标准模式和混杂模式

• jQuery选择器有哪些？
  参考《锋利的jQuery（第2版）》

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

• 基本选择器

通过元素ID、class和标签名等来查找DOM元素。

• 层次选择器
  通过DOM元素之间的层次关系来获取特定元素，例如：后代元素、子元素、相邻元素和同辈元素等。
• 过滤选择器
  通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法规则相同。
• 表单选择器
  方便地获取到表单的某个或某类型的元素。

• jQuery的$如何释放权限？（解决jQuery和其他库的冲突）
  参考《锋利的jQuery（第2版）》。

• jQuery在其他库之后导入
  1.在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数将$的控制权移交给其他库。在程序里jQuery使用jQuery()函数作为jQuery对象的制造工厂。

    jQuery.noConflict();//将$的控制权移交给其他库
    jQuery(function(){//使用jQuery
      jQuery("p").click(function(){
        //省略代码
      });
    });
  2.给jQuery自定义一个快捷方式
    var $j = jQuery.noConflict();//给jQuery自定义一个快捷方式
    $j(function(){//利用自定义快捷方式使用jQuery
      $j("p").click(function(){
        //省略代码
      });
    });
  3.如果不想自定义快捷方式，还想使用$而不管其他库的$()方法，同时又不与其他库冲突，可以用下面两种方法。
    jQuery.noConflict();//将$的控制权移交给其他库
    jQuery(function($){//使用jQuery设定页面加载时执行函数
      $("p").click(function(){//在函数内部继续使用$()方法
        //省略代码
      });
    });

---

    jQuery.noConflict();//将$的控制权移交给其他库
    (function($){//定义匿名函数并设置形参为$
      $(function(){//匿名函数内部的$均为jQuery
        $("p").click(function(){
          //省略代码
        });
      });
    })(jQuery);//执行匿名函数且传递实参为jQuery

• jQuery在其他库之前导入
  如果jQuery在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。无需调用jQuery.noConflict()函数。
  jQuery(function(){//使用jQuery
  jQuery("p").click(function(){

        //省略代码
      });
    });

• git创建分支的命令
  参考：Git-book和廖雪峰Git教程

创建dev分支，并切换到dev分支：
$ git checkout -b dev
Switched to a new branch 'dev'
git checkout命令加上-b参数表示创建并切换，相当于以下两条命令：
$ git branch dev
$ git checkout dev
Switched to branch 'dev'