理论知识总结

标签（空格分隔）： 面试准备

---

[TOC]

1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么

1. 域名解析

2. 发起TCP的3次握手
3. 建立TCP连接后发起http请求
4. 服务器端响应http请求，浏览器得到html代码
5. 浏览器解析html代码，并请求html代码中的资源
6. 浏览器对页面进行渲染呈现给用户
   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.