有很多小伙伴们特别关心面试Web前端开发工程师时，面试官都会问哪些问题。今天小卓把收集来的“阿里Web前端开发面试题”整理贴出来分享给大家伙看看，赶紧收藏起来做准备吧~~
　　一、CSS盒子模型，绝对定位和相对定位
　　1）清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
　　2）如何保持浮层水平垂直居中
　　3）position 和 display 的取值和各自的意思和用法
　　4）样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验
　　二、JavaScript基础
　　1）JavaScript 里有哪些数据类型，解释清楚 null 和 undefined，解释清楚原始数据类型和引用数据类型。比如讲一下 1 和 Number(1) 的区别
　　2）将一下 prototype 是什么东西，原型链的理解，什么时候用 prototype
　　3）函数里的this什么含义，什么情况下，怎么用。
　　4）apply 和 call 什么含义，什么区别？什么时候用。
　　5）数组和对象有哪些原生方法，列举一下，分别是什么含义，比如链接两个数组用哪个方法，删除数组的质定项。
　　三、JavaScript的面向对象
　　1）JS 模块包装格式都用过哪些，CommonJS、AMD、CMD、KMD。定义一个js 模块代码，最精简的格式是怎样。
　　2）JS 怎么实现一个类。怎么实例化这个类。
　　3）是否了解自定义事件。jQuery里的fire函数是什么意思，什么时候用。
　　4）说一下了解的js 设计模式，解释一下单例、工厂、观察者。
　　5）ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理？
　　四、开源工具
　　1）是否了解开源的工具 bower、npm、yeoman、Grunt、gulp，有无用过，有无写过，一个 npm 的包里的 package.json 具备的必要的字段都有哪些（名称、版本号，依赖）
　　2）fiddle、charles 有没有用过，什么时候用
　　3）会不会用 ps 扣图，png、jpg、gif 这些图片格式解释一下，分别什么时候用。
　　4）说一下你常用的命令行工具
　　5）会不会用git，说上来几个命令，说一下git和svn的区别，有没有用git解决过冲突
　　五、计算机基础
　　1）说一下网络五层模型（HTTP协议从应用层到底层都基于哪些协议），HTTP 协议头字段说上来几个，缓存字段是怎么定义的，http和https的区别，在具体使用的时候有什么不一样。是否尽可能详细的掌握HTTP协议。
　　2）cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制
　　3）从敲入 URL 到渲染完成的整个过程，包括 DOM 构建的过程，说的约详细越好。
　　4）是否了解web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度。
　　5）是否了解公钥加密和私钥加密。如何确保表单提交里的密码字段不被泄露。验证码是干嘛的，是为了解决什么安全问题。
　　6）编码常识：文件编码、URL 编码、Unicode编码 什么含义。一个gbk编码的页面如何正确引用一个utf8的的资源
　　六、考察学习能力和方法
　　1）你每天必须登录的网站（前端技术相关）是什么？
　　2）前端技术方面看过哪些书，有无笔记，都有哪些收获。
　　3）收藏了哪些代码片段？
　　4）怎么理解前端技术的大趋势？自己再做哪方面的知识储备？
　　看完了你能答出几道？不会赶快去做下功课吧！通过上面一些知识，我们可以找出自己的一些不足，进而学之，何乐不为？相信只要掌握了硬实力，你的职场通道肯定会一路绿灯。“如果你想加入互联网IT行业，恰巧你又是零基础，或者想再充实一下技能，那就别犹豫，来吧！2017上海中软卓越与你有约~我们用诚信打造品牌，用品牌证明我们的实力！上海中软卓越值得你的青睐与信赖！”
本文已收录于以下专栏：
相关文章推荐
在了解正则表达式之前，我们有必要了解一下传统js操作字符串的方法，包括search()，substring()，charAt()以及split()等等，具体使用方法可查阅参考文档
，而传统方法针对某些...
前几天收到阿里前端的面试通知，整体面试比较顺利，但是还是有个问题回答的不令面试官满意。
本来面试都快结束了，该涉及的都涉及了，而且交谈过程中比较轻松，面试官突然来了句你不是精通布局吗，给你3个DIV...
综合类综合类
前端知识体系
/sb/p/3894452.html
前端知识结构
/JacksonT...
阿里、京东、微店前端面试题
1、下列哪个操作是W3C标准定义的阻止事件向父容器传递：
A、e.preventDefault()
B、e.cancelBubble=true
C、e.stopPropagation()
http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件，chrome控制台下的Frames即展示的是浏览器的ht...
WEB客户端发送给WEB服务器的HTTP请求消息分为三个部分：
请求行 POST /demo/login HTTP/1.1
请求消息头
消息正文（也叫实体内容） username=xxxx&pa...
版权所有，转载请注明出处，谢谢！
http://blog.csdn.net/walkinginthewind/article/details/7518888
树是一种比较重要的数据结构，尤其是二叉树...
美团内推面试的一道题。如果没有变量限制，方法很多很多，这里面试官要求不要定义新的引用型变量
其实吧，只是不开辟一个对象或数组变量。用splice修改自身：function fn(resArr){
二维数组的全排列组合。
如输入[[1,2],[3,4],[5,6]]
[ 1, 3, 5 ]
[ 1, 3, 6 ]
[ 1, 4, 5 ]
[ 1, 4, 6...
他的最新文章
讲师：AI100
讲师：谢梁
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)1 请说明下面各种情况的执行结果，并注明产生对应结果的理由。
function doSomething() {
alert(this);
①&element.onclick&=&doSomething，点击element元素后。
②&element.onclick&=&function()&{doSomething()}，&点击element元素后。
③&直接执行doSomething()。
参考答案：
1、element：调用执行时直接指向事件元素。
2、window：函数调用中的&this&绑定到全局对象。
3、window：函数调用中的this绑定到全局对象。
评分要点：
同参考答案
2 请用JavaScript语言实现&sort&排序函数，要求：
sort([5,&100,&6,&3,&-12])&//&返回&[-12,&3,&5,&6,&100]
如果你有多种解法，请阐述各种解法的思路及优缺点。（仅需用代码实现一种解法，其它解法用文字阐述思路即可）
参考答案：
有冒泡、插入、选择、快速、归并等各种排序算法。如果能阐述两种以上排序算法的思路和优缺点，就非常不错了。
3 请根据下面的HTML和CSS代码，画出布局示意图：
&div id="page"&
&div class="main"&&div class="sub"&&/div&&/div&
&div class="nav"&&/div&
&style type="text/css"&
#page { width: 520 }
{ width: 200 float: }
.main { width: 200 float: padding-left: 110 }
{ width: 100 float: margin: 10px 0 10px -100 }
.main { border: 1px solid #000; }
.nav, .sub { border: 1px dashed #000; height: 300 }
.sub { height: 280 }
宽度值不必精确到像素，示意即可。
4 阅读以下JavaScript代码：
if (window.addEventListener) {
var addListener = function(el, type, listener, useCapture) {
el.addEventListener(type, listener, useCapture);
} else if (document.all) {
addListener = function(el, type, listener) {
el.attachEvent("on" + type, function() {
listener.apply(el);
a)&代码的功能；
b)&代码的优点和缺点；
c)&listener.apply(el)&在此处的作用；
d)&如果有可改进之处，请给出改进后的代码，并说明理由。
参考答案：
a)&功能：事件注册
b)&优点：跨浏览器，特性探测，性能优化。缺点：document.all
c)&作用：使得IE中listener的this&为&el，与其它浏览器一致
d)&改进：document.all改成window.attachE&useCapture的默认值
阅卷说明：
合格：a正确，b能命中2个要点
良好：d正确，b能命中3个要点
优秀：d正确，b能命中4个要点
5 请编写一个JavaScript&函数toRGB，它的作用是转换CSS中常用的颜色编码。&要求：
alert(toRGB("#0000FF"));&&&&&&&&&&//&输出&rgb(0,&0,&255)
alert(toRGB("invalid"));&&&&&&&&&&//&输出&invalid
alert(toRGB("#G00"));&&&&&&&&&&&&&&//&输出&#G00
参考答案：
function toRGB(val) {
var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
reg2 = /^#([0-9A-F])([0-9A-F])([0-9A-F])$/i,
reg3 = /[0-9A-F]{2}/g,
if(reg2.test(val)) {
val = val.replace(reg2, "#$1$1$2$2$3$3");
if(reg1.test(val)) {
= val.match(reg3);
val = "rgb(" + [
parseInt(m[0], 16),
parseInt(m[1], 16),
parseInt(m[2], 16)
].join(", ") + ")";
阅卷说明：
合格：程序逻辑正确
良好：使用parseInt,&正则
优秀：性能优异，比如使用join,&exec,&PARSE_INT
注：如果良好4分，优秀5分，上面的参考代码约4.5分
6 尝试实现注释部分的Javascript代码，可在其他任何地方添加更多代码（如不能实现，说明一下不能实现的原因）：var Obj = function(msg){
this.msg =
this.shout = function(){
alert(this.msg);
this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法
参考答案：
this.waitAndShout = function(){
//隔五秒钟后执行上面的shout方法
var _self = this;
setTimeout(function(){
_self.shout();
7 请编写一个JavaScript函数，它的作用是校验输入的字符串是否是一个有效的电子邮件地址。要求：
a)&使用正则表达式。
b)&如果有效返回true&，反之为false。
参考答案：
var checkEmail
= function(email){
var preg =
"(^[a-zA-Z]|^[\\w-_\\.]*[a-zA-Z0-9])@(\\w+\\.)+\\w+$"，,
=new RegExp(preg);
return pregObj.test(email);
关键评分看能否写出正则表达式，考虑多种情况即可。
8 请分别列出HTML、JavaScript、CSS、Java、php、python的注释代码形式。
参考答案&Js：
&单行&//&注释内容
Css：/*&注释内容&*/&
Html：&!--注释的内容--&
PHP：&//单行注释内容&
多行注释内容
#单行注释内容
9&根据下图，编写HTML结构。要求：遵循xHTML&1.0规范且符合Web语义。
参考答案：
&div class="item"&
&div class="item-pic"&
&a href="path/to/item"&
&img src="path/to/img" alt="商品图片" /&
&div class="item-desc"&
&a href="path/to/item/"&联想IdeaPad U130红色至尊 高性价比&/a&
&div class="item-price"&
&em&￥8888.00&/em&
阅卷说明：
合格：结构与class命名的语义化
良好：img的alt属性，del&和&em/strong&标签的使用
10 请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。
&div&id=&example&&
&p&class=&slogan&&淘！你喜欢&/p&
参考答案：
var oDiv = document.createElement(&div&);
oDiv.setAttribute(&id&, &example&);
oDiv.className = &box&;
var oP = document.createElement(&p&);
oDiv.appendChild(oP);
var oText = document.createTextNode(&淘宝前端笔试题&)
oP.appendChild(oText);
document.body.appendChild(oDiv);
评分要点：
1、&创建元素的DOM方法&&&createElement；
2、&设置元素属性的DOM方法&&&setAttribute；&
3、&添加到元素上的DOM方法&&&appendChild；
4、&创建文字的DOM方法&-&&createTextNode；
5、&设置样式的DOM属性&&&className（HTML&DOM属性）
if(isIE) {//
oDiv.setAttribute(&className&, & box&);
oDiv.setAttribute(&class&, & box&);
11 请列举7种以上常用的HTML标签，说明其语义：
定义文档中的节。
水平分割线
12 请用CSS定义&&p&&标签，要求实现以下效果:&字体颜色在IE6下为黑色(#000000)；IE7下为红色(#ff0000)；而其他浏览器下为绿色(#00ff00)。
color:#0f0;
*color:#f00;
_color:#000;
color:#000;
color:#f00;
13 请简化以下的CSS代码，并给出简单的说明。
div.container {
width: 500px;
background-image: url(/img/sprite.png);
background-repeat: no-repeat;
background-position: 0px -78px;
div.container ul#news-list, div.container ul#news-list li {
margin: 0px;
padding: 0px;
div.container ul#news-list li {
padding-left: 20px;
background-image: url(/img/sprite.png);
background-repeat: no-repeat;
background-position: -120px 0px;
font-size: 14px;
font-weight：bold；
line-height: 150%;
color: #000000;
参考答案：
div.container {
width: 500px;
background: url(/img/sprite.png) no-repeat 0 -78px;
#news-list, #news-list li {
padding: 0;
#news-list li {
padding-left: 20px;
background: url(/img/sprite.png) no-repeat -120px 0;
font: bold 14px/150%;
color: #000;
如果div.container和#news-list&li背景图合并，使用
div.container,#news-list&li{&background:&url(/img/sprite.png)};
14 对于下面这段代码：
&a&href=&somewhere.html&&onclick=&dosomething()&&
问题一：请列举其优缺点，说说你的看法。
问题二：请编写一个通用的事件注册函数（请看下面的代码）。&
function&addEvent(element,&type,&handler)&{
//&在此输入你的代码，实现预定功能
function addEvent(element, type, handler) {
// 在此输入你的代码，实现预定功能
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) { //for IE
element.attachEvnet(&on& + type, handler);
element[&on&+ type] =
15 下面是个输入框，当没有获取焦点时，显示灰色的提示信息：
当用户输入时，隐藏提示文字，且恢复为默认色：
当输入框失去焦点，如果输入为空，需还原提示信息：
a)&写出HTML和CSS代码
b)&用JavaScript实现功能
参考答案：
&style type="text/css"&
.tip { color: }
&input type="text" id="test" class="tip" value="请输入内容" /&
&script type="text/javascript"&
(function(){
var test = document.getElementById("test"),
REG = /(^|\s+)tip(\s+|$)/,
TIP_CLS = "tip",
TIP_STR = "请输入内容";
test.addEventListener("focus", function() {
var className = this.classN
if(className.match(REG)) {
this.value = "";
this.className = className.replace(TIP_CLS, "");
}, false);
test.addEventListener("blur", function() {
if(this.value.length == 0) {
this.value = TIP_STR;
this.className += " " + TIP_CLS;
}, false);
阅卷说明：
合格：HTML和CSS代码正确，JS功能正确
良好：事件注册采用addEventListener或attachEvent；样式和行为分离，JS代码中通过class改变样式
优秀：事件注册兼容主流浏览器；根据className而不是value值来判断切换；封装成通用util
注：如果优良4分，优秀5分，上面的参考代码约4.5分
16 请给JavaScript的String&原生对象添加一个名为trim&的原型方法，用于截取空白字符。要求：
alert("&taobao".trim());&&&&&//&输出&"taobao"
alert("&taobao&".trim());&&&&//&输出&"taobao"
参考答案：
String.prototype.trim&=&function()&{
&&&&&&&&return&this.replace(/^\s+|\s+$/g,&"");
阅卷说明：
合格：程序逻辑正确
良好：用正则实现，方法添加在String.prototype上
17 请编写一个JavaScript函数&parseQueryString，它的用途是把URL参数解析为一个对象，如：
var&url&=&&/index.php?key0=0&key1=1&key2=2.....&
var&obj&=&parseQueryString(url);
alert(obj.key0)&&//&输出0
function parseQueryString ( name ){
name = name.replace(/[\[]/,"\\\[");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
return results[1];
18& 根据下图，编写HTML结构。要求：符合xHTML&1.0规范。
参考答案：
有正确使用 &thead&,&th&,&tbody&标签。如果表头使用caption，添加summary属性。更好
19 根据下图，编写HTML结构。要求：遵循xHTML&1.0规范且符合Web语义。
评分要点：
1、&表单：form
2、&表单元素：input(type=type=password)、select、button
3、&分组信息和标题:&fieldset、legend
4、&label标签以及其for属性和表单元素关联
20 请指出下面代码中不符合xHTML&1.0规范的地方，说明理由，并写出改善后的代码：
&h1&&p&小明的表白&/p&&/h1&
&dt&&p&&div&小明说：&/div&&/p&&/dt&
&dd&&淘宝网，&i&天天上&/i&。&&/dd&
&dd&&b&&淘我喜欢！& &/b&&/dd&
不合理的地方：
1、&h1元素包含p元素，理由：h1元素内不能包含其他块级元素；
2、&dt元素包含p元素和div元素，理由：dt元素内不能包含其他块级元素；
3、&p元素包含div元素，理由：p元素内不能包含其他块级元素；
4、&i元素，理由：i表样式斜体，不符合语义化。
5、&b元素，理由：b表样式粗体，不符合语义化。
&h1&&span&小明的表白&/span&&/h1&
&dt&&span&小明说：&/span&&/dt&
&dd&&淘宝网，&em&天天上&/em&。&&/dd&
&dd&&strong&&淘我喜欢！&&/strong&&/dd&
21 请把以下用于连接字符串的JavaScript代码修改为更有效率的方式
var htmlString = &&div class=&container&&&
&&ul id=&news-list&&&;
for (var i = 0; i & NEWS. i++) {
htmlString += &&li&&a href=&& +
NEWS[i].LINK + &&& +
NEWS[i].TITLE + &&/a&&/li&&;
htmlString += &&/ul&&/div&&;
参考答案：
原方法每运行一次&+&会生成新的string对象。改用数组进行join。
22 请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
Array.prototype.distinct = function() {
var result = [];
for (var i = 0; i & this. i++) {
if (result.indexOf(this[i]) == -1) {
result.push(this[i]);
//for test
alert(['a', 'b', 'c', 'd', 'b', 'a', 'e'].distinct());
23 请根据下面的描述，用JSON语法编写一个对象:
&小明今年22岁，来自杭州。兴趣是看电影和旅游。他有两个姐姐，一个叫小芬，今年25岁，职业是护士。还有一个叫小芳，今年23岁，是一名小学老师。&
var&person&=&?
var person = {
"name": "小明", "age": 22,
"city": "杭州",
"interest": ["电影", "旅游"],
"sisters": [
{"name": "小芬", "age": 25, "job": "护士"},
{"name": "小芳", "age": 23, "job": "小学老师"}
24 请改善以下HTML代码，使其符合xHTML&1.0规范：
&A id='go-home' href=''
onClick='doSomething();'&
&IMG src="/logo.png"&
参考答案：
&a id=&go-home& href=&&
onclick=&doSomething();&&
&img src=&/logo.png& /&
标签小写（包括onclick）
属性名要使用引号(单双不限)
必须闭合标签
阅读(...) 评论()2017年前端面试题大全集，只发一次！
2017年BAT公司常见的Web前端面试题整理
2017年BAT公司常见的Web前端面试题整理
1.JavaScript是一门什么样的语言，它有哪些特点？
没有标准答案。
2.JavaScript的数据类型都有什么？
基本数据类型：String,boolean,Number,Undefined
引用数据类型：Object(Array,Date,RegExp,Function,Null)
那么问题来了，如何判断某变量是否为数组数据类型？
方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：
如果你想学习web前端可以来这个群，首先是二九一，中间是八五一，最后是一八九，里面可以免费的学习交流，也有资料可以下载。
3.已知ID的Input输入框，希望改变文本框的背景颜色，怎么做？(原生JS)
4.希望获取到页面中所有的checkbox怎么做？(原生JS)
5.Html事件绑定有几种方式？
直接在DOM里绑定事件：
这种方式称为原生事件或者属性事件
在JS里通过onclick绑定：xxx.onclick = test
Dom标准通过事件添加进行绑定：addEventListener("click",test, false) //第三个参数为是否支持事件捕捉
IE事件：attachEvent("onclick",test)
那么问题来了，Javascript的事件流模型都有什么？
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
IE事件流：目标事件和事件冒泡
阻止事件冒泡的方式：
阻止事件的默认行为：
6.看下列代码，将会输出什么?(变量声明提升)
上面的代码经过变量提升后，等价于下面的代码
再看下面的输出结果：
此时打印a函数，不会打印1，因为下面是一个函数表达式，跟变量声明一样，只会把提升到最前面，a=function(){}保留，会覆盖前面的a=1;因此打印函数。
此题目，我再百度面试的时候问到过。
7.掌握样式的优先级。
!important & style(内联) & Id(权重100) & class(权重10) & 标签（权重1） 同类别的样式，后面的会覆盖前面的。
百度视频部门一道面试题是这样的：
8.怎样添加、移除、移动、复制、创建和查找节点
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
9.用js写一个正则匹配标签中是否包含一个class(百度面试题)
10.事件循环绑定，输出结果（考察闭包）
通过闭包封装后的代码：
闭包我所知道的两个作用：
a.通过闭包可以把局部变量传递出来，就是通过闭包可以访问函数内部的变量，比如下面的代码：
通过闭包就可以访问函数内部的局部变量，并且实现数量累加。
b.使用闭包可以避免空间污染，闭包内部的变量都只能在内部使用，这样有效避免和外部变量的混淆。（个人理解）
11.js数组去重。
12.两个div标签，如何控制标签左边固定，右边自适应，左边div标签的宽度为100px（滴滴面试题）
滴滴面试起初问我，现在有并排的三个Div框，如何实现三个div都自适应，我当时就懵了，这个考察的是display:table的使用
13.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
考察点2：是否知道如何判断一个变量是什么类型的
考察点3：递归算法的设计
14.继承的使用
15.请评价以下代码并给出改进意见
不应该在if和else语句中声明addListener函数，应该提前先声明，定义全局变量；
不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
改进如下：
16.对作用域上下文和this的理解，看下列代码：
版权声明：本文内容由互联网用户自发贡献，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至： 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
用云栖社区APP，舒服~
【云栖快讯】红轴机械键盘、无线鼠标等753个大奖，先到先得，云栖社区首届博主招募大赛9月21日-11月20日限时开启，为你再添一个高端技术交流场所&&
业内领先的面向企业的一站式研发提效平台，通过项目流程管理和专项自动化提效工具，能够很好地支持互联网敏捷项目的快速...
面向阿里云ECS实例、HPC和Docker的文件存储服务。
用于实时预测用户对物品偏好，支持企业定制推荐算法，支持A/B Test效果对比
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
MaxCompute75折抢购
Loading...评论-4136&
今天微博看到了寒冬大神的面试题，觉得挺有意思的，这里就做一点解答
谈谈你对CSS布局的理解
讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。
谈谈你对Web前端组件化的理解，Web Component会带来怎样的影响
谈谈你对前端资源下载性能优化的经验和思考
现在有很多的MV*框架，你对它们有什么看法
iOS体验好在哪里，Web能赶上么？
网页游戏怎么做？
Hybrid技术应当如何应用？
你最爱的前端框架是什么，为什么？
首先老师的题目都很大，不好答，我这里技术有缺陷，答得不好大家不要喷我，可以好好教育我嘛
浅谈CSS布局
从网页表现来看，HTML是实体本身，要实现各种优雅的布局的需要依赖CSS
HTML元素两大类型为块级元素与行内元素，网页的布局一般由块级元素组织，元素不同便有不一样的表现
要实现布局就要用到与布局有关的CSS属性为position，常用属性为static、absoulute、fixed、relative
position的作用是改变元素的状态，由文档流转为相对文档流或者脱离文档流元素（定位元素）
当然float也能引发块级元素脱离文档流，但是其表现与原理与上面不一致，而且要慎用float布局
于是这里便已经有三种&流&了，不同的布局元素会处于不同的&执行环境&，在&执行环境&中才能方便的对其进行管理
这个管理的依据便是BFC（块级作用域上下文），根据我粗浅的理解是，BFC也就是浏览器提供的一块渲染区
文档流的元素处于一个渲染区，而定位元素处于另一层渲染区，float元素又会与之不同
各个渲染区中的元素具有其定位规则，最简单的便是文档流中的元素，遵循其块级元素独占一行+盒模型的规则：
① 块级元素独占一行，并且具有框（经典盒模型）
② 块级元素间由margin属性分割，并且垂直方向的margin会取其大者
③ 块级元素必定左靠这父级块级元素左边框（包含块，布局上下文）
④ float元素不能影响块级元素的BFC区域，但是其高度会参与计算
创建BFC的方式有：
② overflow
③ display（使行内元素具有BFC）
④ position
基于此，我们便可以实现我们的布局了，这里以最简单的两列布局为例（左边导航，右边内容主体）
由于先出现的DOM先展示，所以内容优先原则，我们会将主体dom先展示
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
* { margin: 0; padding: 0; }
div { border: 1px solid black; }
#sidebar { position: absolute; left: 0; top: 0; width: 95px; }
#content { margin-left: 100px; }
&script src="../jquery-1.7.1.js" type="text/javascript"&&/script&
&div id="content"&
&div id="sidebar"&
这里从理论上说，便是触发了siderbar元素的定位特性，其BFC与文档流不相关了
当然，这里siderbar可以使用float实现，但是float本身应该用于处理文字与图片包裹的需求，我们本着职责分离的想法就别那样干了
而且使用float还会引起元素坍塌，这里还要费劲去处理清除浮动
行内元素的处理比较复杂，首先行内元素的高度由其line-height决定，所以不要妄想其设置一个行内元素的高度，这会引起意想不到的问题
举一个例子来说，很多大型网站都会具有统计代码，而此类统计代码一般是以img做请求发出，这个时候可能会导致10px左右的白屏问题
这个就是妄想设置行内元素高度的结果，独立的inline元素出现时，会为其创建一个line boxes作为容器（文字框）
一行文字一个line Boxes，一行高度由其中最高的行内元素确定，上例中有一个height为0的img，却为其生成了一个高度为10的行高
下面的代码中，div会被行内元素撑开，其高度会由span中line-height高者决定
&span id="span1"&主体 &/span&&span id="span2"&导航 &/span&
移动端的建议
① 移动端的文档流渲染效率最高，应该避免大范围使用定位元素，在小米，三星等低端下定位元素可能渲染不出来（解决方案是引起回流）
② img元素加载失败时候会有边框，需要搞掉
③ 慎用fixed属性，fixed对于移动端来说有点头疼，首先会有文本聚焦fixed定位错乱问题，其次在ios4的屏幕中，如果加上浏览器上下工具条，再用fixed可视区域会变得很小
④ ios是按块渲染的，布局时候可以分块，不会渲染可视区域外的内容
⑤ 动画或者border-radius、box-shadow等属性皆会使手机耗电加剧（但是这个好像与我们没关系）
⑥ fixed元素为其设置html可能不响应或者说渲染看不见，常见于ipod或者低端android
⑦ 当然能在布局上用上一些语义化标签自然是好事，这样对SEO或者特殊人事有一定帮助，比如strong、article之类的
因为我本身专注点在js对css了解较少只能做此解析，请尽量拍砖指正
一次请求的完整流程
我们一次网址输入会发起一连串连锁效应，但是因为我这边对HTTP一块不是十分熟悉，只能解释自己了解的
一次URl输入后，其流程如下，首先是请求响应的流程：
1 解析URL，解析域名生成唯一IP地址，开始搜索服务器
2 找到服务器后，服务器接收请求被服务器进程拦截；一般而言，.net的程序会被IIS处理，java会被jBoss或者tomcat处理
3 服务器处理请求，如果静态文件的话直接返回，若是.net或者java等动态脚本会经过服务器编译，执行其中的服务器端代码
4 若是服务器端具有数据库操作的话，这里还需要与DB建立连接，操作数据库
5 服务器处理结束后，生成最终的静态HTML字符串返回，开始向请求者（客户端）返回请求字符串，一次返回量过大就会分批次，这是一个优化点
6 服务器响应到达浏览器，浏览器开始处理请求，进入浏览器解析流程
请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM
上面的文字描述的很简单，事实上发生的事情，却很复杂，这里与代码实现也很有关联，但是有几个关键点：
页面一定会等所有的HTML结构与CSS加载下来才渲染（webkit内核）
比如我们这里使用fiddler限制其外链加载，我们为其限速为10s
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
div { border: 1px solid black; }
a { color: Red; }
&a id="span1" href=""&主体 &/a&&span id="span2"&导航 &/span&
&link href=" /style/common.css" rel="stylesheet" /&
我们看到事实上62ms后页面整体dom结构就加载好了，这个时候我们是可以使用js操作dom结构的，但这里一个重点是：
CSS外链加载会阻塞js的执行，并且重置CSS会引起浏览器的回流或者重绘，也就是：
css外链会阻塞整个页面的渲染（显示），但是其DOM结构是可操作的，中间如果有阻塞性的操作，比如alert的话会强制浏览器绘制页面
上面的特性与css外链的顺序无关，并且有几个样式相关的操作，便会执行几次，最终采用最近或者优先级最高的样式
&html xmlns="http://www.w3.org/1999/xhtml"&
&title&&/title&
div { border: 1px solid black; }
a { color: Red; }
&a id="span1" href=""&主体 &/a&&span id="span2"&导航 &/span&
document.getElementById('span2').innerHTML = '测试';
&link href=" /style/common.css" rel="stylesheet" /&
一个需要注意的地方是，chrome与firefox或者IE表现不一致，firefox与IE都是先渲染页面最后等段CSS下来后再次渲染
所以我们很多同学面试时说将css外链放到header中，而不是body中的理解都是一知半解，这里真实的处理办法是异步插入css外链才行
至少对于chrome需要做这个处理，否则页面就是出不来，因为多数手机是webkit内核，保不齐这里出多少事情
根据以上流程后，页面也基本出来了，这里简述其流程
① 生成DOM树
② 计算CSS样式
③ 构建render Tree
④ reflow，定位元素位置与大小
⑤ 绘制页面
上面过程如果js操作dom或者终结有一段style都会引起reflow，由于img会在文档加载结束后加载，可能会撑开页面，导致回流，所以一般需要对img设置尺寸
对于这块的优化各位自己来吧，我这里便只能理解到这个程度了
PS：事实上chrome获得请求时本身也有几个事件点，这里可以用其开发性能插件，但对前端基本透明，我们这里不关注了
MVC与组件化
这里我将2块题目合到一起了，我觉得这里可以连到一起做说明
很多程序的变革集中积累在VIEW一块的处理，原因是这里的需求是最复杂的，就View分离来说，最成功的我觉得是ASP到ASP.net的变革
最初的ASP程序，会将C#代码写在asp代码中，这样的结果便是页面里面既有html又有C#代码，甚至一个js循环中会嵌套出C#的循环
PS：你一定要相信，那个时候不会有js分成的概念，因为需求达不到
所谓的View分离便是，程序员确实受不了维护显示与逻辑同时处于一个页面的程序了，于是他选择了改变，改变的结果便是拆分
View分离一大核心思维便是，分得开，合得拢，他们这里引入一个codebehind方案将一个页面文件分成两个（事实上是三个）
① index.apsx
② index.aspx.cs
&%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="_00综合_11mvc_index" %&
public partial class _00综合_10doc_write_index : System.Web.UI.Page
protected void Page_Load(object sender, EventArgs e)
最终这两个文件会和到一起，两个文件之间也可通信，而通信的桥梁是.net一个个被人诟病的组件，比如：
① button组件
② datalist
③ label组件
④ 伟大的gridview
各个组件在C#层面上会拥有一个ID进行约束，.cs文件便可以根据该ID为其注册各个事件，这个与javascript的模型便非常类似了
View分离的第一个优点便是，用户的界面变得干净了，不会有代码混杂的现象，第二个优点便是业务端的代码可以再分离，从而多了数据层、业务层等各个概念
而组件的出现让.net变成了世界上开发最快的语言，这点谁也不可否认，而这些都是前端MVC出现或者组件出现的意义
前端View分离
与asp当初的情况一致，js进行dom操作或者字符串拼接的目的事实上就是想形成一个可供展示的View，前端jser已经再也不能忍受这种代码了：
很多时候，我们想将对应的模板单独的放到一个地方，每次样式若是有更改，只需要更改那个文件即可，只要与之呼应的&ID&不丢失即可，比如这样的结构和代码：
&div class="cui-pop-box"&
&div class="cui-hd"&
&%=title%&
&div class="cui-bd"&
&div class="cui-error-tips"&
&%=content%&&/div&
&div class="cui-roller-btns"&
&% for(var i = 0, len = btns. i & len; i++ ) {%&
&div class="cui-flexbd &%=btns[i].className%&"&
&%=btns[i].name%&&/div&
这样做的道理是，这个样子做到了表现与行为分离，我们分得开，然后回根据基类的一个机制，让他们最终合到一块，以完成功能
这里我们依旧需要强调一个前提：&ID&关联不可丢失，否则&行为&将不可表现，只要两者间关联不丢，这里便可轻松满足以下逻辑：
① CSS名修改（非标识性CSS名）
② 标签改变
③ 描述性文字改变
重构一书有说，重复性或者类似重复性的代码应该抽象为一个方法，程序员也不傻，在重复使用需要提示框需求后便会学会形成alert组件
组件的出现是代码抽象，代码重用的标识，这个样子既可以减少工作量也可以减少代码容量，而组件的实现与MVC思维的很好诠释
比如以下代码：
事实上，MVC的任意一块都可以作为单独的模块实现，比如会有这样的需求：一个model实例的变化会影响两个View的显示，但是仅仅对UI一块来说我们做了如下处理：
核心点变成了几个属性：
① template，根据他生成UI
② datamodel，根据他生成viewModel提供给template使用
③ eventArr，业务事件注册点
这个代码是Blade框架的UI基类，他是一个迷你MVC框架
propertys: function () {
//模板状态
this.template = '';
this.datamodel = {};
this.events = {};
this.wrapper = $('body');
this.id = _.uniqueId('ui-view-');
//自定义事件
//此处需要注意mask 绑定事件前后问题，考虑scroll.radio插件类型的mask应用，考虑组件通信
this.eventArr = {};
//初始状态为实例化
this.status = 'init';
this.availableFn = function () { }
template作为View的实现，datamodel作为model实现，我们会根据datamodel与template生成基本的view实体
这里datamodel与template之间会有一个viewModel的映射关系，是为了防止服务器端突然将title变成Title而导致模板解析错误
而整个文件便是一个控制器，view有的事件行为采用javascript委托技术全部注册在根元素上，如此整个UI就活了，他的好处是：
① 具有继承关系，可以拥有统一的资源释放，或者View通信机制
②&代码量也会减少
MVC与组件化的意义
MVC对前端的意义甚大，因为jser对MVC或者分模块的思维的深入理解，我们才会将前端代码做分离，这样会有效的避免多人更改一个文件的难题
这对前端的推动作用不可谓不大！
组件化是对重复工作，重复代码的降低，当然是好东西......
前端优化的瓶颈始终在资源加载，只要加载快，无论你代码写的多慢（不要纠结死循环），都一定快，所以前端优化事实上一直都是一个主题：瘦身
css sprite
延迟加载（主要针对图片）
按需加载（主要针对首屏未用到的UI）
等词语不断的在前端出现，但是一个不可避免的事实是，需求越发复杂，体验要求越高，所以一个前端可能的事实是：
前端资源体积越来越大，避免此事发生不是前端说了算的，需要产品与交互一起努力，清晰、体验好、轻量级的设计谁不喜欢，但是广告营销也不能不考虑，总之此事路还长！
webapp的资源加载
对于webapp来说，首次加载的体积会更加大，因为其要求的库更多，并且网速更慢，这个时候可以采取fake页的方案
我们应该避免页面长时间白页，这个时候便提出了fake页的概念。页面渲染只需要完整的HTML以及CSS，这个便是第一个优化点。
从数据请求数以及请求量来说，webapp首页的响应应该比较慢，若是任由js加载完成再渲染页面，用户很有可能失去耐心。
但是从DOMContentLoaded来看，首页事实上页面响应比较迅速，所以这个加载结束后页面第一屏便渲染结束，然后再异步加载js，当js改变后再动态改变dom结构中的一些关键点
这个时候一个静态HTML页面，装载首屏的基本内容，让首页快速显示
然后js加载结束后会马上重新渲染整个页面，这个样子，用户就可以很快的看到页面响应，给用户一个快的错觉，给人感觉快得多。
是否按需加载
按需加载的话确实会对首屏加载有好处，但是是否按需加载却不一定了，以下面两个体验为例:
资源完全加载
PS：我这里debug版本点击时候未做mask处理，大家不要疯狂点击了
这里各位直观的感受是什么呢？是不是，首次加载后后续操作十分流畅，而按需加载的话，每次皆会感觉有点&卡&
按需加载需要加载js和模板，这个过程自然卡，所以真正是不是要按需加载，或者多少资源按需加载有个临界值，需要不断的测试才行
最后，要减少资源的话，代码的质量神马的也需要考虑的，但对容量来说效用可能不是太大
IOS的体验好，主要好在两点：
① 清晰、简洁、傻瓜化设计，连我妈都可以轻巧的操作苹果手机其简易型可想而知
② 用户行为模拟，IOS体验第二点便是其无敌的动画效果
若是说web应用想赶上（寒冬老师这里赶上一词用得十分贴切，他要说超过估计没人理他了）native开发的话还是有可能
但是如果说web应用要赶上IOS的设计的话，那么还有无数荆棘需要踩过！并且有两大前提：
① 网速快，用户不必关心资源大
② 手机性能好，不说超越PC，至少能&赶上&PC吧
以上两点成立的话，web应用赶上IOS体验才变得可能，简单来说就动画而言，前端有哪些问题呢？
webapp中的动画
webapp的一大优势便是在view切换时候可以拥有媲美与native的动画效果，但是很多时候那只是一种想法，真正的情况却不是这样
产生此问题的原因有：
① 手机CPU烂！
② 手机显卡烂！就算四核其渲染也很有问题
③ 高端手机浏览器会有BUG
④ 低端手机支持不好（国内山寨机笑而不语）
因为以上原因，事实上做webapp的都会不同程度的弱化动画，或者在局部区域使用动画
难在何处？
view的移动与简单的图片slider组件相差甚剧！原因便是其dom结构可能很复杂，大dom树的移动在移动端效果很差
就简单列表页来说，当项目超过100个时，使用IScroll类插件都应该很慎重，这类移动可能非常卡！
而且dom树复杂度与业务直接相关，我们没有任何办法去控制dom树，因为业务代码可能不会经过我们的手，就算经过，你又肯定自己做出来的dom树有多小？不见得吧
长短页问题
所谓长短页便是一个view很长一个view很短，这里问题处理十分讨厌
首先我们每次做切换需要将view位置切换至头部（window.scroll(0, 0)）如此的话ios中会引起
页面viewport的变化（系统自动发生），或者会触发低端工具栏的出现，这个时候页面抖动无可避免
若是每次不执行window.scroll(0, 0)，切换时候又会导致短的view不可见
我现阶段想到的解决方案是，移动时候将scroll设得比较大，移动时候将bview的top值与scrollTop相同
最后仍然需要执行window.scroll(0, 0)的操作，所以，这个问题只能缓解，无法解决
手机渲染问题
只要是做移动端的朋友，一定会对三星机或者一些低端机的渲染嗤之以鼻！
具体表现为多次操作style后，后面的操作浏览器不会搭理你
解决方案是：
① 引起浏览器强烈重绘
② 临时增删一个dom结构
但是涉及view切换动画的话，很有可能会出现一些莫名其妙的问题！
所以单单由简单的webapp的切换都如此困难，web应用想赶上IOS的话还要等几年......
Hybrid对前端的意义
应该说Ajax带动了前端的首次革命，而移动端带来了二次革命，而Hybrid将前端推上了风口浪尖！
原来我厂app是使用native开发的，会出现此等问题：一个应用需要养3个团队（ios、android、winphone），而且一旦业务改变会让开发抓狂！
而Hybrid的出现解决了此问题，一套前端代码可以用于四个地方：浏览器、ios、android、winphone，而这个却是互联网公司最需要的
最近两年，移动大潮袭来，各个公司皆在抢占移动端的份额，谁赢了这场战斗谁就是下一代王者，所以出现了一个事实：
市场的占领、业务的扩展是第一位！
所以Hybrid的市场与需求比native大，但是这不是说native没用了，因为更好的体验我们的追求，所以在Hybrid占领市场结束后，可能需要改版为native
除非那时前端的体验能缩小与native的距离
Hybrid开发的问题
Hybrid提高了前端开发的门槛，因为Hybrid的调试难，但是业内也出现了一些调试的方案，我这里有一套Hybrid调试的技巧，有兴趣可以交流
Hybrid 兼容BUG多，总所周知，H5站点上看着好好的程序，一旦到了webview上就出问题了，这个调试也很痛苦
哎，其实Hybrid开发也只是需要一点熟悉度罢了，没有什么可说的，就此打住吧
寒冬老师喜欢出题，我喜欢答题，其中几道题我这里没有什么概念就交白卷了，不知道我的回答是否可以及格
若是寒冬老师或者各位觉得我的回答能勉强及格，左边微博求粉！！！尼玛我粉丝太少了！！！
阅读(...) 评论()