牛客网--前端面试经典题目合集总结（持续更新）

1. 浏览器页面由哪三层构成？分别是什么？作用是什么？

答案：

• 构成：结构层、表示层、行为层
• 分别是：HTML、CSS、JavaScript
• 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务

扩展：

• 标签就是出现在尖括号里的单词，对网页内容的语义含义做出描述。

---

2. HTML5的优点和缺点

答案

优点：

1. 网络标准统一、HTML5本身是由W3C推荐出来的。
2. 多设备、跨平台
3. 即时更新
4. 提高可用性和改进用户的友好体验
5. 有几个新的标签，有助于开发人员定义重要的内容
6. 可以给站点带来更多的多媒体元素（音频和视频）
7. 可以很好的代替Flash和Silverlight
8. 被大量应用于移动应用程序和游戏

缺点：

1. 安全方面：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket这样的功能很容易被黑客利用，从而盗取用户的信息和资料
2. 完善性方面：许多特性各浏览器的支持程度不同
3. 技术门槛方面：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage等新特性，后台甚至浏览器原理的知识，机遇的同时也意味着挑战
4. 性能方面：某些平台下的引擎问题导致HTML5性能低下
5. 浏览器兼容性方面：最大缺点，IE9以下的浏览器几乎都不兼容

扩展

优点
- 跨平台的使用。比如你开发了一款HTML5的游戏，可以轻易的一直到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以他得跨平台行非常强大。
- 自适应网页。可以自动识别屏幕宽度，并作出相应调整的网页设计。网站为不同的设备提供不同的网页，如专门提供mobile版本活着iPhone／iPad版本。但是这样需要同时维护多个版本，会大大增加架构设计的复杂度。

---

3. Doctype的作用？严格模式于混杂模式如何区分？它们有何意义？

答案：

答案一：
- Doctype声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
- 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行
- 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
- Doctype不存在或者格式不正确会导致文档以混杂模式呈现。
答案二：
- Doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器活着校验器这样的一个程序，“规则”是W3C发布的一个文档类型定义（DTD）中包含的规则
- 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档
- 所谓的标准模式，指浏览器按照W3C标准解析执行代码；怪异模式是浏览器使用自己的方式解析执行代码；严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行；混杂模式是一种向后兼容的解析方法，可以实现IE5.5以下版本浏览器的渲染模式

扩展

• DOCTYPE声明：告知浏览器如何解析和渲染文档

• DTD：文档类型定义

  >>分类方式一：

标准模式：浏览器按W3C标准解析执行代码
1. 如果XHTML文档包含完整的DOCTYPE，那个它一般以标准模式呈现
2. 包含严格DTD的DOCTYPE和包含过渡DTD和URI的DOCTYPE常以标准模式呈现
怪异模式：兼容老页面。使用浏览器自己的方式解析执行代码。
1. 不存在DOCTYPE或形式不正确会导致怪异模式
2. 有过渡／框架DTD没有URI会导致怪异模式
3. IE中，如果DOCTYPE声明在XML之后，会导致怪异模式
近标准模式

>>分类方式二

严格模式
过渡模式
框架模式

---

HTML5有哪些新特性？移除了哪些元素？

答案：

• HTML5新增了27个元素，废弃了16个元素。根据现有的标准规范，把HTML5的元素按优先级定义为**结构性属性、级块性属性、行内语义性元素和交互性元素**4大类
  
  • 结构性元素主要负责web上下文结构的定义
  • section：在web页面应用中，该元素也可以用于区域的章节描述
  • header：页面主体上的头部，header元素往往在body元素中。
  • footer：页面的底部（页脚），通常会标出网站的相关信息
  • nav：专门用于菜单导航、链接导航的元素，是navigator的缩写
  • article：用于表现一片文章的主体内容，一般为文字集中展示的区域。
  • 级块性元素主要完成web页面区域的划分，确保内容的有效分割
  • aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容
  • figure：是对多个元素进行组合并展示的元素，通常与ficaption联合使用
  • code：表示一段代码块
  • dialog：用于表达人与人之间的对话，该元素包含dt和dd两个组合元素，dt用于表示说话者，dd用于表示说话内容
  • 行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础
  • meter：表示特定范围内的数值，可用于工资、数量、百分比等
  • time：表示时间值
  • progress：表示进度条，可通过对齐max、min、step等属性进行控制，完成对进度的表示和监视
  • video：视频元素。用于支持和实现视频文件的直接播放，支持缓冲预载荷多种视频媒体格式
  • audio：音频元素。用于支持和实现音频文件的直接播放，支持缓冲预载恶化多种音频媒体格式
  • 交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础
  • details：用来表示一段具体的内容，但是内容默认可能不现实，通过某种手段（如单击）与legend交互才会显示出来
  • datagrid：用来控制客户端数据与显示，可以由动态脚本即使更新
  • menu：主要用于交互菜单
  • command：用来处理命令按钮

---

你做的网页在哪些浏览器测试过？这些浏览器的内核分别是什么？

答案：

• IE：trident 内核
• Firefox：gecko 内核
• Safari：webkit 内核
• Chrome：Blink 内核（Blink内核基于webkit内核）
• Opera：Blink 内核

HTML5 DOCTYPE

答案：

声明必须位于 HTML5 文档中的第一行，也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML
规范。 doctype 声明不属于 HTML 标签；tag; 它是一条指令，告诉浏览器编写页面所用的标记的版本。 在所有 HTML
文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。 HTML 4.01 中的 doctype 需要对 DTD
进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要
doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）。

overflow属性

答案：

1 参数是scroll时候，必会出现滚动条。
2 参数是auto时候，子元素内容大于父元素时 出现滚动条。
3 参数是visible时候，溢出的内容出现在父元素之外。
4 参数是hidden时候，溢出隐藏。

HTML 文档编码

答案：

1、GBK通常指GB2312编码 只支持简体中文字
2、utf通常指UTF-8，支持简体中文字、繁体中文字、英文、日文、韩文等语言（支持文字更广）
3、通常国内使用utf-8和gb2312，看自己需求选择

ajax事件

ajaxComplete(callback);
ajaxError(callback);
ajaxSend(callback);
ajaxStart(callback);
ajaxStop(callback);
ajaxSuccess(callback);

而$.post(url)是ajax请求，不是ajax事件

js中的内置对象

 - `Function`。函数对象
 - `Arguments`  函数参数集合
 - `Boolean` 布尔对象
 - `Number`。数值对象
 - `String`。字符串对象
 - `Object`。基础对象
 - `Array`  数组
 - `Date`。日期对象
 - `Error`。异常对象
 - `Math`   数学对象
 - `RegExp`   正则表达式对象

JS模块化

• AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
• AMD也采用require()语句加载模块，但是不同于CommonJS。
• 主要有两个Javascript库实现了AMD规范：require.js和curl.js。
• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
• CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
• 区别：
  
  1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
  2. CMD 推崇依赖就近，AMD 推崇依赖前置。

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

CSS盒子

css盒子模型中padding是透明的，这部分可以显示背景。

display与visibility

• display: none; 元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint。
• visibility: hidden; 元素不可见但存在，保留空间，不影响结构，故只产生repaint。

History对象

• length 返回浏览器历史列表中的url数量
• back() 加载history列表中的前一个URL
• forward() 加载history列表中的下一个URL
• go() 加载history列表中的某个具体页面

不换行设置

word-break
white-space: nowrap;