常见面试题

谈一下你对浏览器内核的理解？常见的浏览器内核？

主要由渲染引擎和JS引擎组成。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行javascript来实现网页的动态效果。
常见内核：Webkit内核（Safiri、Chrome）、Trident内核（IE、360、搜狗）等。

html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？

新增功能：

绘画canvas
用于媒介回放的video和audio元素
本地离线存储localStorage长期存储数据，浏览器关闭不丢失数据
sessionStorage的数据在浏览器关闭后自动删除
语义化更好的内容元素（article、footer、header、nav等）以及表单元素（calendar、date、time、email、url、search）
新技术WebWorker、WebSocket

兼容性处理：

为了支持html5新标签，IE8/7/6支持通过document.createElement方法产生新标签，并添加默认样式
使用成熟框架html5shim

简述一下你对HTML语义化的理解？

用正确的标签做正确的事
html语义化让页面的内容结构化，结构更清晰，便于浏览器、搜索引擎解析，利于seo
即使在没有CSS的情况下也以一种文档格式显示，并且容易阅读
使阅读源代码的人便于对网站进行阅读理解维护

对BFC规范(块级格式化上下文：block formatting context)的理解？

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧。

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性;解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，可通过加入 CSS 属性 -webkit-text-size-adjust: none;解决。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现Html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器会根据manifest文件的内容下载相应的资源并进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器会直接使用离线资源。

如何解决跨域问题?

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

什么是Ajax？创建一个Ajax的过程是怎么样的？

概念：
异步请求，向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
过程：

创建XMLHttpRequest对象,也就是创建一个异步调用对象；
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息；
设置响应HTTP请求状态变化的函数；
发送HTTP请求；
获取异步调用返回的数据；
使用JavaScript和DOM实现局部刷新；

你有用过哪些前端性能优化的方法？

减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数.
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
当需要设置的样式很多时设置className而不是直接操作style。
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳
避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的.

http状态码有那些？分别代表是什么意思？

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等

详细版：

1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
4、进行HTTP协议会话，客户端发送报头(请求报头);
5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

简洁版：

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成

谈谈你对浏览器本地缓存的理解？

概念：本地缓存是指浏览器请求资源时命中了浏览器本地的缓存资源，浏览器并不会发送真正的请求给服务器了。
优点：

减少了冗余的网络传输，省钱了
减少了服务器的压力
Web缓存能够减少延迟和网络阻塞，进而减少显示某个资源所用的时间
加快客户端加载网页的速度

执行过程：

第一次浏览器发送请求给服务器，此时浏览器还没有本地缓存副本，服务器返回资源给浏览器，响应码是200 OK，浏览器接受到资源后，把资源和对应的响应头一起缓存下来。
第二次浏览器准备发送请求给服务器时，浏览器会先检查上一次服务器返回的响应头信息中Cache-Control，他的值是一个相对值，单位为秒，表示资源在客户端缓存的最大有效期限，计算过期时间后对比当前时间，如果本地缓存未过期，那么命中缓存，不再请求服务器。缓存是否过期判断依据Cache-Control、Expires。
若没有命中，浏览器就会把请求发送到服务器，进入缓存协商阶段。
浏览器与服务器进行缓存协商的过程中，会询问浏览器中的资源是否为最新资源，是否需要更新，此时服务器做出判断，如果缓存和服务器端资源的最新版本一致，则不更新该资源，服务器端返回304 Not Modified 状态码，如果浏览器端资源已经是旧版本了，服务器端则返回最新资源，状态码就是200 OK。判断资源是否最新：Last-Modified/If-Modified-Since 与 ETag/If-None-Match。

简述JavaScript原型、原型链概念及其特点。

每个对象都会在其内部初始化一个属性，就是prototype（原型），当我们访问一个对象属性时，如果这个对象的内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，就会一直找下去，这就是原型链。
关系：instance.constructor.prototype = instance.proto。
特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性时，JavaScript引擎会先看当前对象中是否有该属性，如果没有的话，就会查找他的prototype对象中是否有该属性，如此递推，一直检索到Object内建对象。

Javascript如何实现继承？如何判断对象是否是继承过来？

继承方式：构造继承、原型继承、实例继承、拷贝继承
常用继承方式：构造函数与原型混合方式

function Parent(){
    this.name = 'wang';
}
function Child(){
    this.age = 28;
}
Child.prototype = new Parent(); // 继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name); // 得到被继承的属性

JavaScript中hasOwnProperty函数方法是返回一个布尔值，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。object.hasOwnProperty(proName)

new操作符具体干了什么呢?

创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
属性和方法都被加入到this引用的对象中了。
新创建的对象由this所引用，并且隐式的返回this。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

谈谈对this对象的理解。

this总是指向函数的直接调用者（而非间接调用者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

Javascript作用链域？

全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。
当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。

什么是闭包？为什么要用它？它的特性？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
特性：

函数内再嵌套函数内部函数
可以引用外层的参数和变量
参数和变量不会被垃圾回收机制回收

Vue是如何实现双向绑定的？

Object.defineProperty（vue）：劫持数据的 getter 和 setter。

如何理解Vue的Virtual DOM？使用Virtual DOM的必要性？

虚拟节点类，将真实 DOM 节点用 js 对象的形式进行展示，并提供 render 方法，将虚拟节点渲染成真实 DOM。
节点 diff 比较：对虚拟节点进行 js 层面的计算，并将不同的操作都记录到 patch 对象。
re-render：解析 patch 对象，进行 re-render

必要性：

创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。