我认为，习惯收集面试中经常遇到的经典面试题，并且不断整理和总结，对于巩固学习、提升面试经验大有裨益。通过身边一些朋友同事的面试经验，或书面或口述，特别为大家整理了一套百度前端面试题，希望对大家学习和面试有帮助。
1、简述以下常见标签的语义以及默认的display值：p, li, ul, form, b，img，这几个dispaly值的区别是什么？
- p 段落 display: block;
- li 列表 display: block;
- ul 列表 display: block;
- form 表单 display: block;
- b 粗体 display: inline;
- img 图片 display: inline-block;
区别：
block元素
- 1、如果没有设置宽度会自动填满父容器
- 2、可以应用margin/padding
- 3、如果没有设置高度会拓展高度，包含常规流子元素
- 4、处于常规流前后元素独占水平空间
- 5、忽略vertical-align
inline元素
- 1、水平方向从左到右依次布局
- 2、margin/padding 在垂直方向无效，在水平方向有效
- 3、不会再元素前后换行
- 4、浮动或绝对定位自动转换成 block
- 5、vertical-align属性无效
- 6、元素宽度由元素内容决定
inline-block 元素
- 1、可以设置宽高
- 2、其他基本同 inline元素属性
2、有哪些方法可以隐藏元素？
- 1、display:none;
- 2、visibility: hidden;
- 3、opacity: 0;
3、什么是跨域？都有哪些方式可以进行跨域？
跨域就是不同域名下的通信来往。
跨域方式：
- 1、jsonp 请求
- 2、 HTML5新规范的CORS功能,只要目标服务器返回请求头部**Access-Control-Allow-Origin: *** 即可
- 3、通过内部服务器代理，实现跨域
- 4、<img>,<script>,<link>,<iframe>，通过src，href属性设置为目标url，实现跨域请求
4、简述jsonp的原理
通过<script>标签没有跨域限制来进行数据交互。
就是提供一个回调函数接受json数据，在浏览器中执行并处理穿过来的数据。
5、如何设计一个轮播插件，用伪代码简述思路
6、前端有哪几种本地存储方式，简述各自的特点
localStorage、 sessionStorage、 cookie、web sql
localStorage:
- 1、有效期永久
- 2、同源可以读取并修改localStorage数据
sessionStorage:
- 1、有效期顶层窗口关闭前
- 2、值允许同一窗口访问
cookie：
- 1、有效期可以设置
- 2、cookie作用域通过文档源和文档路径来确定
- 3、储存数据量小
web sql：
1、可以储存大量结构化数据
7、简述常见的http状态码
200 请求成功
404 Not Found
500 服务端错误
8、什么是事件代理，它的实现原理是什么？
通过事件冒泡，指定一个事件处理程序，就可以管理某一类型事件。
原理就是事件从最深节点开始逐步向上传播事件。
9、说说类的创建、继承和闭包。
10、是否有设计过通用的组件?
11、请设计一个 Dialog(弹出层) / Suggestion(自动完成) / Slider(图片轮播) 等组件，你会提供什么接口？调用过程是怎样的?可能会遇到什么细节问题？
12、一个页面从输入 URL 到页面加载完的过程中都发生了什么事情、越详细越好(考察知识广度)。
13、什么是 “use strict”? 使用它的好处和坏处是什么？
14、HTML中的Doctype的作用。严格模式和混杂模式如何区分。他们有何意义。
- 1、<!Doctype html>声明位于html文档的最前面，告知浏览器的解析器用什么文档规范来解析这个文档。
- 2、严格模式的排版和JS运作模式是以该浏览器支持的最高标准来运行的， 在混杂模式中，页面以宽松的向后兼容的方式来运行并显示html文档，模拟老式浏览器的行为以放置站点无法工作。
- 3、Doctype不存在或者格式错误时会导致文档以混杂模式来显示。
15、简述document.write和innerHTML的区别
- 1、document.write会重绘整个页面，而innerHTML可以指定重绘页面中的指定dom元素的一部分。
- 2、document.write是直接写入到页面的内容流中的，如果在写之前没有显示调用document.open方法，浏览器会自动调用document.open方法来打开内容流，每次写完关闭之后重新调用该函数来打开内容流时，会导致页面被重写。
16、通过手机来查看百度首页http://www.baidu.com与在平板手机和电脑上面看到的页面显示的是不一样的，请简要分析一下实现这种网页区分显示的原因和原理
- 1、手机的网速问题、屏幕大小、内存、CPU等
- 2、通过不同设备的特征，实现不同的网页展现或输出效果。
- 3、根据useragent、屏幕大小信息、IP、网速、css media Query等原理，实现前端或后端的特征识别和行为改变。
17、简述css盒模型
w3c盒模型 标准模式 padding+margin+content+border 总宽度/高度=width/height+padding+border+margin
ie盒模型 怪异模式 总宽度/高度= width/height+margin
当设置为box-sizing:border-box时，将采用怪异模式解析计算
18、说说get和post请求的区别
- GET使用URL或Cookie传参，而POST将数据放在BODY中。
- GET的URL会有长度上的限制，则POST的数据则可以非常大。
- POST比GET安全，因为数据在地址栏上不可见。
- GET请求的参数会保存在浏览器的历史记录中。