标签（空格分隔）： 面试准备
[TOC]
1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么
- 域名解析
- 发起TCP的3次握手
- 建立TCP连接后发起http请求
- 服务器端响应http请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的资源
- 浏览器对页面进行渲染呈现给用户
http://www.linux178.com/web/httprequest.html
2、谈谈你对前端性能优化的理解
1.合并脚本和样式表
2.服务器开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
3.使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
4.将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
5.避免重定向
http://div.io/topic/371
3、前端 MVC框架的意义
4、请简述盒模型
IE6盒子模型与W3C盒子模型。
文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
CSS3中有个box-sizing属性可以控制盒子的计算方式，
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
5、请你谈谈Cookie的弊端
1.每个特定的域名下生成的cookie个数有限制
1.IE6或更低版本最多20个cookie
2.IE7和之后的版本最后可以有50个cookie。
3.Firefox最多50个cookie
4.chrome和Safari没有做硬性限制
2.cookie能传递的信息很少，最大大约为4096字节，为了兼容性，一般不能超过4095字节
3.安全性问题。如果cookie被人拦截了，就能取得用户的信息。
优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
6、浏览器本地存储
在HTML5中提供了sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
7、web storage和cookie的区别
1.Cookie的大小是受限的
2.每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
3.cookie还需要指定作用域，不可以跨域调用
4.Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
5.Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生
6.IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage
8、对BFC规范的理解
BFC 定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border 4.box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
5.BFC的区域不会与float box重叠。
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
7.计算BFC的高度时，浮动元素也参与计算
满足下列CSS声明之一的元素便会生成BFC。
根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
9、线程与进程的区别
1.一个程序至少有一个进程，一个进程至少有一个线程
2.线程的划分尺度小于进程，使得多线程程序的并发性高
3.进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
4.每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制
5.多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配
10、请说出三种减少页面加载时间的方法
1.尽量减少页面中HTTP请求数量
2.服务器开启gzip压缩
3.css样式的定义放置在文件头部
4.Javascript脚本放在文件末尾
5.压缩合并Javascript、CSS代码
6.使用多域名负载网页内的多个文件、图片，实现资源的并行下载
7.内容分发网络CDN
http://eadonlearning.blog.51cto.com/6642994/1334446
11、你都使用哪些工具来测试代码的性能？
JSPerf, Dromaeo
13、常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
15、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
参考《优雅降级和渐进增强的区别》
16、WEB应用从服务器主动推送Data到客户端有那些方式？
a. html5 websoket
b. WebSocket 通过 Flash
c. XHR长时间连接
d. XHR Multipart Streaming
e. 不可见的Iframe
f. <script>标签的长时间连接(可跨域)
25、请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
1.26、AMD和CMD 规范的区别？
AMD 提前执行依赖 - 尽早执行，requireJS 是它的实现
CMD 按需执行依赖 - 懒执行，seaJS 是它的实现
27、网站重构的理解
重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
a. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
b. 对于移动平台的优化，针对于SEO进行优化
c. 减少代码间的耦合，让代码保持弹性
d. 压缩或合并JS、CSS、image等前端资源
28、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
29、请介绍下cache-control
每个资源都可以通过 Cache-Control HTTP 头来定义自己的缓存策略
Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久
Cache-Control 头在 HTTP/1.1 规范中定义，取代了之前用来定义响应缓存策略的头（例如 Expires）。
32、一次js请求一般情况下有哪些地方会有缓存处理？
a. 浏览器端存储
b. 浏览器端文件缓存
c. HTTP缓存304
d. 服务器端文件类型缓存
e. 表现层&DOM缓存
http://www.nowamagic.net/librarys/veda/detail/162
33、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
34、谈谈以前端角度出发做好SEO需要考虑什么？
a. 了解搜索引擎如何抓取网页和如何索引网页
b. meta标签优化
c. 关键词分析
d. 付费给搜索引擎
e. 链接交换和链接广泛度（Link Popularity）
f. 合理的标签使用
35、框架和库的区别
库就是一些封装好的方法，直接可以拿过来使用，简化代码的编写。
框架更倾向于提供一整套的解决方案，使用的时候需要遵守一些给定的规则或者约定。
