Web常见前端面试题及答案
Web前端常见面试题及答案
1、盒子模型
盒子模型包括四部分：内容（content）、填充（padding）、边框（border）、边界（margin）
盒子模型可以分为两种：IE盒子模型和W3C标准盒子模型
区别：两者对于width的计算方式不同，前者width=border+padding+内容宽度，后者width=内容宽度。
2、position包含几种属性？absolute和relative的区别？
static：默认状态、没有定位、正常流
inherit：从父元素集成position属性的值
fixed：生成绝对定位的元素（相对于浏览器窗口进行定位）
absolute：生成绝对定位的元素（相位与static定位以外的第一个父元素定位）
relative：生成相对定位的元素（相对于其正常位置定位）
absolute和relative区别：父元素的padding对relative的子元素布局有影响，absolute的子元素不受影响
3、前端性能优化
减少HTTP请求、使用内容发布网络、压缩组件、使用Expire头、JS放底部、CSS放顶部、避免CSS表达式等。
具体可以参考：http://www.jianshu.com/p/4bd6bb0bb49e
4、JSONP是什么？它是如何实现跨域的？为什么它可以实现跨域？
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求（因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的），然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
跨域的4种方式：
①通过动态添加script标签，然后指定callback函数，可以获取到传过来的json数据，这时候要自己写一个callback函数来处理数据；
②使用jquery封装好的getJson方法，传入不同域的url?callback=?,好处是不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。
③通过设置window.domain来处理跨域，但是只适用于不同子域的框架间的交互。所以使用的时候可以用一个隐藏的iframe来做一个代理，让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面。
④window.name是可以跨域的。window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。所以可以转化成字符串的数据都可以使用window.name来传递，比如json数据。
5、浏览器兼容问题
css兼容性问题：①不同浏览器的标签默认的外补丁和内补丁不同，解决方案：用通配符*来设置各个标签的内外补丁是0（即设置margin和padding为0）；②div的垂直居中问题 vertical-align：middle；文字居中：将行距增加到和整个div一样，高line-height=行高；③margin加倍问题：设置为float的div在ie下的margin会加倍。解决方案：为这个div设置样式：display:inline;
js兼容性问题：①在标准的事件绑定中绑定事件的方法函数为addEventListener，而IE使用的是attachEvent；②事件处理中event属性的获取不同。标准浏览器是作为参数带入，然后通过e.target获取目标元素；而IE是通过window.event方式获得，通过e.srcElement获取目标元素；
6、JS和JAVA的作用域有什么区别
java是块级作用域，js是函数作用域，没有块级作用域。
var name="global";
if(true){
var name="local";
console.log(name)
}
console.log(name);
这段都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。
7、闭包问题
闭包：函数能被外部调用到，则该作用连上的所有变量都会被保存下来。
作用：①可以读取函数内部的变量；②相当于划出了一块私有作用域，避免数据污染；③让变量始终保存在内存中
使用全局变量被认为是不好的习惯，而且容易造成错误并且维护成本较高，所以js可以采用闭包的方式读取函数的内部变量。但是如果大量使用闭包就会造成过多的变量始终保存在内存中，会造成内存泄漏。
一个简单的闭包例子：
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
8、js中this的工作原理
①全局范围内：指向全局对象；
this;
②函数调用：指向全局对象
foo();
③方法调用：this指向test对象
test.foo();
④调用构造函数：this指向新创建的对象
new foo();
⑤显示的设置this：使用call或者apply方法时，this指向第一个参数
function foo(a, b, c) {}
var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3
10、模块化编程
①AMD（异步模块定义） requirejs
defined(id,deps,factory)
require([dependency],function(){})
异步加载，浏览器不会失去响应
它指定的回调函数，只有前面的模块都加载完成后，才会运行，解决了依赖性问题
②CMD（通用模块定义） seajs
模块定义方式和模块加载时机处理不同
defined(id,deps,factory)
function(require,exports,module)
module.exports = ______;
③区别：AMD依赖前置，在定义模块的时候就要声明其依赖的模块；CMD就近依赖，只有在用到哪个模块的时候再去require；
11、JS继承与原型问题
Js所有的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型。每一个对象都有原型，在浏览器中它体现在一个隐藏的proto属性上。
当一个对象需要调用某个方法时，它回去最近的原型上查找该方法，如果没有找到，它会再次往下继续查找。这样逐级查找，一直找到了要找的方法。 这些查找的原型构成了该对象的原型链条。原型最后指向的是null。我们说的原型继承，就是将父对像的方法给子类的原型。子类的构造函数中不拥有这些方法和属性。
12、少用float？
①使用float可能会造成兼容性问题，比如在ie6以下，float元素margin加倍问题；②使用float之后会影响左右元素，有可能造成错位问题（float之后都要clear）
解决：可用display、position转化
①无序链接（ul、li），设定li标签属性：display:inline
②div左右结构，比如在右侧要放一个more（更多）来显示更多信息的时候用到了float:right，可以用定位来做。给包裹more的div设定position：relative，然后more这个标签right：0即可。结构更为清晰一点。
13、一个页面从URL到加载显示完成，都发生了什么？
①通过DNS将该地址解析成IP地址；
②发起网络连接，进行http协议会话：客户端发送报头（请求报头），服务端回馈报头（响应报头）
③返回一个页面（根据页面上的外链的URL重新发送请求获取）
④接收文件完毕，对加载到的资源进行语法解析，以及相应的内部数据结构（网页渲染）
14、队列、堆、栈的区别？
队列是先进先出：就像一条路，有一个入口和一个出口，先进去的就可以先出去。而栈就像一个箱子，后放的在上边，所以后进先出。堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别。
栈(Stack)是操作系统在建立某个进程时或者线程为这个线程建立的存储区域。在编程中，例如C/C++中，所有的局部变量都是从栈中分配内存空间，实际上也不是什么分配，只是从栈顶向上用就行，在退出函数的时候，只是修改栈指针就可以把栈中的内容销毁，所以速度最快。
堆（Heap)是应用程序在运行的时候请求操作系统分配给自己内存，一般是申请/给予的过程。由于从操作系统管理的内存分配所以在分配和销毁时都要占用时间，所以用堆的效率低的多！但是堆的好处是可以做的很大，C/C++对分配的Heap是不初始化的。
在Java中除了简单类型（int,char等）都是在堆中分配内存，这也是程序慢的一个主要原因。但是跟C/C++不同，Java中分配Heap内存是自动初始化的。在Java中所有的对象（包括int的wrapper Integer）都是在堆中分配的，但是这个对象的引用却是在Stack中分配。也就是说在建立一个对象时从两个地方都分配内存，在Heap中分配的内存实际建立这个对象，而在Stack中分配的内存只是一个指向这个堆对象的指针（引用）而已。
15、如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后添加margin:0 auto;
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
div{
width:500px;
height:500px;
magin:-150px 0 0 -250px;
position:relative;
left:50%;
top:50%;
}
16、什么是线程？进程和线程的关系是什么？
线程可定义为进程内的一个执行单位，或者定义为进程内的一个可调度实体。 在具有多线程机制的操作系统中，处理机调度的基本单位不是进程而是线程。一个进程可以有多个线程，而且至少有一个可执行线程。
打个比喻:进程好比工厂(计算机)里的车间，一个工厂里有多个车间(进程)在运转,每个车间里有一个或多个工人（线程）在协同工作，这些工人就可以理解为线程。
线程和进程的关系:
1.线程是进程的一个组成部分.
2.进程的多个线程都在进程地址空间活动.
3.系统资源是分配给进程的，线程需要资源时，系统从进程的资源里分配给线程.
4.处理机调度的基本单位是线程.
17、React为什么这么火？
18、CSS3中的transform属性和transition属性？
transform：
功能：使元素变形的属性，其配合rotate（旋转角度）、scale（缩放倍数）、skew（扭曲元素）等参数一起使用
语法：
transform:rotate(旋转角度)；//正数为顺时针、负数为逆时针；
transform:rotate(30deg);//顺时针旋转30度
transform:rotate(-20deg);//逆时针旋转20度
transform:scale(缩放倍数)；
transform:scale(1.20);//放大1.2倍
transition：
功能：设置元素由样式一变为样式二所需要的一些变化效果
语法：transition: property duration timing-function delay;
|值|描述|
|:---:|:---:|
|transition-property|规定设置过渡效果的 CSS 属性的名称。|
|transition-duration|规定完成过渡效果需要多少秒或毫秒。|
|transition-timing-function|规定速度效果的速度曲线。|
|transition-delay|定义过渡效果何时开始。|
注：使用这两个属性时应考虑到浏览器的兼容性，所以要针对不同的浏览器都添加一次样式，如下：
-webkit-transform:rotate(0deg) scale(1.20);
-moz-transform:rotate(0deg) scale(1.20);
transform:rotate(0deg) scale(1.20);
19、什么是MVVM框架？
MVVM是Model-View-ViewModel的简写。
MVVM 是 Web 前端一种非常流行的开发模式，利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon, angular 等，这些框架各有千秋，但是实现的思想大致上是相同的：数据绑定 + 视图刷新。跟MVC一样，主要目的是分离视图（View）和模型（Model）。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
在MVVM中，数据是核心，由于VIewModel与View之间的双向绑定，操作了ViewModel中的数据（当然只能是监控属性），就会同步到DOM，我们透过DOM事件监控用户对DOM的改动，也会同步到ViewModel。
<div id="mobile-list">
<h1 v-text="title"></h1>
<ul>
<li v-for="item in brands">
<b v-text="item.name"></b>
<span v-show="showRank">Rank: {{item.rank}}</span>
</li>
</ul>
</div>
var element = document.querySelector('#mobile-list');
var vm = new MVVM(element, {
'title' : 'Mobile List',
'showRank': true,
'brands' : [
{'name': 'Apple', 'rank': 1},
{'name': 'Galaxy', 'rank': 2},
{'name': 'OPPO', 'rank': 3}
]
});
vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>
以上这段如此简洁的代码，就是MVVM框架的一个简单的实现效果。在HTML代码里面，可能会嵌入很多自定义的属性（标记），以此来实现数据的绑定，而且还可以进行一些简单的逻辑处理，比如if和循环等。
react应该也算是MVVM框架，但是与传统的MVVN框架不同的是，react默认数据绑定方式是单向绑定，而vue及angular都是双向绑定；react使用虚拟DOM配合JSX，而vue及angular直接将数据通过属性绑定在真实DOM上的。
MVVM框架的优点：
1、方便测试
在MVC下，Controller基本是无法测试的，里面混杂了个各种逻辑，而且分散在不同的地方。有了MVVM我们就可以测试里面的viewModel，来验证我们的处理结果对不对。
2、便于代码的移植
可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。比如iOS里面有iPhone版本和iPad版本，除了交互展示不一样外，业务逻辑的model是一致的。这样，我们就可以以很小的代价去开发另一个app。
3、独立开发
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
20、利用@media screen实现网页布局的自适应。
判断媒体类型，执行不同的css样式属性
重要属性：min-width：设置最小分辨率大小；max-width：设置最大分辨率大小。
①方式一：通过css
///1280分辨率以上（大于1200px）
@media screen and (min-width:1200px){
#content{ width: 1100px; }
#mian,.div1{width: 730px;}
#secondary{width:310px;}
}
//1100分辨率（大于960px，小于1199px）
@media screen and (min-width: 960px) and (max-width: 1199px) {
#content{ width: 960px; }
#main,.div1{width: 650px;}
#secondary{width:250px}
}
②方式二：通过link引入不同的css文件
//意思是当屏幕的宽度大于600小于800时，应用styleB.css
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值。
21、使用原生js实现ajax
创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下：
var xmlHttpRequest;
function createXmlHttpRequest(){
if(window.XMLHttpRequest)//非IE
xmlHttpRequest = new XMLHttpRequest();
else if(window.ActiveObject)//IE6+
xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
else//IE6-
xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
}
提交请求的方法：
open(method,url);//分别为提交的方法（GET或者POST）和提交的url
send(content);
onreadystatechange(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.state == 200){
//请求成功
}
}else{
//请求失败
}
}
22、前端安全方面有没有了解？XSS和CSRF如何攻防？
XSS(Cross Site Scripting)是跨站脚本攻击，为了区分CSS，所以缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
在网页的一些公共区域（例如，建议提交表单或消息公共板的输入表单）输入一些文本，这些文本被其它用户看到，但这些文本不仅仅是他们要输入的文本，同时还包括一些可以在客户端执行的脚本。如：
"/> <script>alert(document.cookie);</script><!--
在文本框中输入以上代码，然后点击提交，就会把用户的cookie弹出来。
XSS漏洞修复
1.将重要的cookies标记为HTTP ONLY。
2.只允许用户输入我们期望的数据。如年龄框只能输入数字。
3.对数据进行HTTP Encode处理。
4.过滤或者移除特殊的HTML标签。
5.过滤JS事件的标签。
CSRF（Cross-site request forgery）是跨站请求伪造。XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。其实就是攻击者盗用了你的身份，以你的名义发送恶意请求。
CSRF攻击的思想
用户浏览并登陆信任网站A；通过验证，在用户处产生X的cookie；用户在没有登出X的时候，浏览危险网站B；B要求访问第三方网站A，发出一个请求；根据这个请求，浏览器使用刚才产生的cookie直接访问A。
一个简单的实例
银行网站A，它以GET请求来完成银行转账的操作，如：http://www.mybank.com/Transfer.php?toBankId=11&money=1000
危险网站B，它里面有一段HTML的代码如下：
<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>
首先，你登录了银行网站A，然后访问危险网站B，噢，这时你会发现你的银行账户少了1000块......
CSRF的防御
1.在表单里增加Hash值，以认证这确实是用户发送的请求，然后在服务器端进行Hash值验证。
2.验证码：每次的用户提交都需要用户在表单中填写一个图片上的随机字符串。
20、说说你对HTML5认识?（是什么,为什么）
HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。
HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。
21、什么是WebGL,它有什么优点?
WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。
WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：
第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;
第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于HTML5 游戏开发。
22、说说你对SVG理解?
SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。 SVG 是W3C('World Wide Web ConSortium' 即 ' 国际互联网标准组织 ') 在 2000 年 8 月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。 SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 SVG 于 2003 年 1 月14 日成为 W3C 推荐标准。
特点：
(1)任意放缩
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
(2)文本独立
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件
总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
(4)超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制
SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
(6)交互 X 和智能化。 SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。
是否了解什么前沿的技术、或者你自己有什么技术特长、在哪方便有优势？
持续更新中。。。
