前端面试题目搜集——理论知识

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

①域名解析

浏览器会解析域名（准确的叫法应该是主机名）对应的IP地址

②发起TCP的3次握手

③建立TCP连接后发起http请求

④ 服务器端响应http请求，浏览器得到html代码

⑤浏览器解析html代码，并请求html代码中的资源

⑥浏览器对页面进行渲染呈现给用户

参考 《一次完整的HTTP事务是怎样一个过程》

2、谈谈你对前端性能优化的理解

①请求数量：

合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域

②请求带宽：

开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体

③缓存利用：

使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使Ajax可缓存

④页面结构：

将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出

⑤ 代码校验：

避免CSS表达式，避免重定向

参考《前端工程与性能优化》

3、前端 MVC框架的意义

早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。

随着 AJAX 的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了。 如果是页面型产品，多数确实不太需要它，因为页面中的 JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。 长期做某个行业软件的公司，一般都会沉淀下来一些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，在前端很少有相应的组织。 从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的 MVC框架，这个状况会大有改观。 之所以感受不到 MVC框架的重要性，是因为Model部分代码较少，View的相对多一些。如果主要在操作View和Controller，那当然 jQuery 这类库比较好用了。

参考《前端 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盒子模型）

参考 《盒模型》

5、请你谈谈Cookie的弊端

①每个特定的域名下最多生成的cookie个数有限制，最多20个

②IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie

③cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节

④安全性问题

如果cookie被人拦截了，那人就可以取得所有的session信息。

6、浏览器本地存储

在HTML5中提供了sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。