今天微博看到了寒冬大神的面试题，觉得挺有意思的，这里就做一点解答
http://weibo.com/1196343093/Bhj510t50谈谈你对CSS布局的理解
讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。
谈谈你对Web前端组件化的理解，Web Component会带来怎样的影响
谈谈你对前端资源下载性能优化的经验和思考
现在有很多的MV*框架，你对它们有什么看法
iOS体验好在哪里，Web能赶上么？
网页游戏怎么做？
Hybrid技术应当如何应用？
你最爱的前端框架是什么，为什么？
首先老师的题目都很大，不好答，我这里技术有缺陷，答得不好大家不要喷我，可以好好教育我嘛
<!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"><head> <title></title> <style> * { margin: 0; padding: 0; } div { border: 1px solid black; } #sidebar { position: absolute; left: 0; top: 0; width: 95px; } #content { margin-left: 100px; } </style> <script src="../jquery-1.7.1.js" type="text/javascript"></script></head><body> <div id="content"> 主体 </div> <div id="sidebar"> 导航 </div></body></html>这里从理论上说，便是触发了siderbar元素的定位特性，其BFC与文档流不相关了当然，这里siderbar可以使用float实现，但是float本身应该用于处理文字与图片包裹的需求，我们本着职责分离的想法就别那样干了而且使用float还会引起元素坍塌，这里还要费劲去处理清除浮动
这个就是妄想设置行内元素高度的结果，独立的inline元素出现时，会为其创建一个line boxes作为容器（文字框）一行文字一个line Boxes，一行高度由其中最高的行内元素确定，上例中有一个height为0的img，却为其生成了一个高度为10的行高下面的代码中，div会被行内元素撑开，其高度会由span中line-height高者决定<div> <span id="span1">主体 </span><span id="span2">导航 </span></div>
请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而Javascript又可以根据DOM API操作DOM上面的文字描述的很简单，事实上发生的事情，却很复杂，这里与代码实现也很有关联，但是有几个关键点：页面一定会等所有的HTML结构与CSS加载下来才渲染（webkit内核）比如我们这里使用fiddler限制其外链加载，我们为其限速为10s<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> div { border: 1px solid black; } a { color: Red; } </style></head><body> <div> <a id="span1" href="http://www.baidu.com">主体 </a><span id="span2">导航 </span> </div> <link href=" http://kb.cnblogs.com/style/common.css" rel="stylesheet" /></body></html>
我们看到事实上62ms后页面整体dom结构就加载好了，这个时候我们是可以使用js操作dom结构的，但这里一个重点是：CSS外链加载会阻塞js的执行，并且重置CSS会引起浏览器的回流或者重绘，也就是：css外链会阻塞整个页面的渲染（显示），但是其DOM结构是可操作的，中间如果有阻塞性的操作，比如alert的话会强制浏览器绘制页面上面的特性与css外链的顺序无关，并且有几个样式相关的操作，便会执行几次，最终采用最近或者优先级最高的样式<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> div { border: 1px solid black; } a { color: Red; } </style></head><body> <div> <a id="span1" href="http://www.baidu.com">主体 </a><span id="span2">导航 </span> </div> <script> document.getElementById('span2').innerHTML = '测试'; alert(1) </script> <script> alert(2) </script> <link href=" http://kb.cnblogs.com/style/common.css" rel="stylesheet" /></body></html>
① 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出现或者组件出现的意义
与asp当初的情况一致，js进行dom操作或者字符串拼接的目的事实上就是想形成一个可供展示的View，前端jser已经再也不能忍受这种代码了：
很多时候，我们想将对应的模板单独的放到一个地方，每次样式若是有更改，只需要更改那个文件即可，只要与之呼应的“ID”不丢失即可，比如这样的结构和代码：
View Code<div class="cui-pop-box"> <div class="cui-hd"> <%=title%> </div> <div class="cui-bd"> <div class="cui-error-tips"> <%=content%></div> <div class="cui-roller-btns"> <% for(var i = 0, len = btns.length; i < len; i++ ) {%> <div class="cui-flexbd <%=btns[i].className%>"> <%=btns[i].name%></div> <% } %> </div> </div></div>这样做的道理是，这个样子做到了表现与行为分离，我们分得开，然后回根据基类的一个机制，让他们最终合到一块，以完成功能
这里我们依旧需要强调一个前提：“ID”关联不可丢失，否则“行为”将不可表现，只要两者间关联不丢，这里便可轻松满足以下逻辑：
① CSS名修改（非标识性CSS名）
② 标签改变
③ 描述性文字改变
......
重构一书有说，重复性或者类似重复性的代码应该抽象为一个方法，程序员也不傻，在重复使用需要提示框需求后便会学会形成alert组件
组件的出现是代码抽象，代码重用的标识，这个样子既可以减少工作量也可以减少代码容量，而组件的实现与MVC思维的很好诠释
比如以下代码：
View Code新闻热点
疑难解答
