最近在准备前端面试，面经结合了周围同学的面经，不断更新，喜欢的麻烦点赞关注哦给我更新的动力~
doctype作用？严格模式与混杂模式如何区分？他们有何意义？
doctype作用：
doctype是申明文档类型，告诉浏览器以什么文档类型规范来解析这个文档。
严格模式与混杂模式：
1.严格模式的排版和JS运作模式是以该浏览器支持的最高标准执行的。
2.混杂模式中，页面以宽松的、向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.doctype不存在或不正确会导致文档以混杂模式呈现。
他们有何意义：
严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。
说说你对语义化的理解？
- 用正确的标签做正确的事。
- 让页面内容结构化，便于浏览器、搜索引擎解析。
- 在去掉或丢失样式的时候能让页面呈现出清晰的结构。
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，有利于SEO。
- 语义化更具可读性，可以减少差异性。
如何提供包含多种语言内容的页面？
当客户端向服务器发送 HTTP 请求时，通常会发送有关语言首选项的信息，比如使用Accept-Language请求头。如果替换语言存在，服务器可以利用该信息返回与之相匹配的 HTML 文档。返回的 HTML 文档还应在<html>标签中声明lang属性，比如<html lang="en">...</html>
在后台中，HTML 将包含i18n占位符和待以替换的内容，这些按照不同语言，以 YML 或 JSON 格式存储。然后，服务器将动态生成指定语言内容的 HTML 页面。整个过程通常需要借助后台框架实现。
在设计开发多语言网站时，需要留心哪些事情？
- 在 HTML 中使用lang属性。
- 引导用户切换到自己的母语——让用户能够轻松地切换到自己的国家或语言，而不用麻烦。
- 在图片中展示文本会阻碍网站规模增长——把文本放在图片中展示，仍然是一种非常流行的方式。这样做可以在所有终端上，都能显示出美观的非系统字体。然而，为了翻译图片中的文本，需要为每种语言单独创建对应的图片，这种做法很容易在图片数量不断增长的过程中失控。
- 限制词语或句子的长度——网页内容在使用其他语言表述时，文字长度会发生变化。设计时，需要警惕文字长度溢出布局的问题，最好不要使用受文字长度影响较大的设计。比如标题、标签、按钮的设计，往往很受文字长度影响，这些设计中的文字与正文或评论部分不同，一般不可以自由换行。
- 注意颜色的使用——颜色在不同的语言和文化中，意义和感受是不同的。设计时应该使用恰当的颜色。
- 日期和货币的格式化——日期在不同的国家和地区，会以不同的方式显示。比如美国的日期格式是“May 31, 2012”，而在欧洲部分地区，日期格式是“31 May 2012”。
- 不要使用连接的翻译字符串——不要做类似这样的事情，比如“今天的日期是”+具体日期。这样做可能会打乱其他语言的语序。替代方案是，为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：I will travel on {% date %}和{% date %} 我会出发。可以看到，语言的语法规则不同，变量的位置是不同的。
- 注意语言阅读的方向——在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。
什么是data-属性？
- data属性用于存储页面或应用程序的私有自定义数据。
- data-赋予我们在所有html元素中嵌入自定义data属性的能力。
- 存储的（自定义）数据能被页面的JavaScript中利用，以创建更好的用户体验（不进行ajax调用或服务器端数据库查询）。
data- 主要包括两个部分：
- 属性名不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符。
- 属性值可以是任意字符串。
现在不建议使用data-属性：
在 JavaScript 框架变得流行之前，前端开发者经常使用data-属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。
而现在，不鼓励使用data-属性。原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。
如果把HTML5看成一个开放平台，那它的构建模块有哪些？
nav、header、section、footer。
将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？
语义 - 提供更准确地描述内容。
连接 - 提供新的方式与服务器通信。
离线和存储 - 允许网页在本地存储数据并有效地离线运行。（即使在离线的情况下，用户也可以正常使用App，把需要离线存储在本地的文件列在一个manifest配置文件）
多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
2D/3D 图形和特效 - 提供更多种演示选项。
性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
（1）web Workers：当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
（2）History API：
通过back()，forward()和go()方法在用户的历史记录中前进与后退window.history.back(); //后退
（3）添加和修改历史记录条目
设备访问 - 允许使用各种输入、输出设备。（使用camera API、触摸事件、地理位置定位、当前定位、检测设备方向）
外观 - 可以开发丰富的主题。
请描述cookie、sessionStorage和localStorage的区别。
请描述<script>、<script async>和<script defer>的区别。
<script>： HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
<script async>和<script defer>：
- defer和async在网络读取（下载）是一样的，都是异步的（不需要等待）。
- defer是在文档解析后执行脚本；async是在文档解析时同时执行脚本。
- defer能够快速先呈现文档。
- 如果有多个含defer的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
- 当脚本与页面上其他脚本独立时，可以使用async，比如用作页面统计分析。
注意：没有src属性的脚本，async和defer属性会被忽略。
为什么最好把CSS的<link>标签放在<head></head>之间？为什么最好把JS的<script>标签恰好放在</body>之前，有例外情况吗？
1、把<link>标签放在<head></head>之间：
把<link>标签放在<head></head>之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。
将样式表放在文档底部附近，会使许多浏览器（包括Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。
2、把<script>标签恰好放在</body>之前：
脚本在下载和执行期间会阻止HTML解析。把<script>标签放在底部，保证了HTML首先完成解析，将页面尽早呈现给用户。
例外情况是当你的脚本里包含document.write()时。但是现在，document.write()不推荐使用。同时，将<script>标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，<script>使用defer属性，放在<head>中。
什么是渐进式渲染（progressive rendering）？
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
一些举例：
- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript将加载并显示图像。
- 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
- 异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。
渐进增强和优雅降级是什么？
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。
document 中的load事件和DOMContentLoaded事件之间的区别是什么？
当初始的 HTML 文档被完全加载和解析完成之后，
DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完成加载。window的
load事件仅在DOM和所有相关资源全部完成加载后才会触发。
为什么要使用load事件？这个事件有什么缺点吗？你知道一些代替方案吗，为什么使用它们？
- 在文档装载完成后会触发
load事件。此时，在文档中的所有对象都在DOM中，所有图像、脚本、链接和子框架都完成了加载。 - DOM 事件
DOMContentLoaded将在页面的DOM构建完成后触发，但不要等待其他资源完成加载。如果在初始化之前不需要装入整个页面，这个事件是使用首选。
“attribute” 和 “property” 之间有什么区别？
-
property是DOM中的属性，是JavaScript里的对象； -
attribute是HTML标签上的特性，它的值只能够是字符串； -
property属性，就像C#等高级语言可以用.(dot)获取或者设置其值；attribute特性，每一个dom元素都有一个attributes属性来存放所有的attribute节点，通过getAttribute()和setAttribute()方法来进行获取和操作。
BOM和DOM有什么区别
- BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
- DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。
- BOM的内容不多，主要还是DOM。
- 由于DOM的操作对象是文档（Document），所以dom和浏览器没有直接关系。
请解释单页应用（SPA）是什么以及如何使其对SEO友好。
以前是服务器端渲染（浏览器从服务器接收 HTML 并渲染。当用户导航到其它 URL 时，需要整页刷新，服务器会为新页面发送新的 HTML。）
然而，在现代的 SPA中，客户端渲染取而代之。
- 浏览器从服务器加载初始页面，以及整个应用程序所需的脚本（框架、库、应用代码）和样式表。
- 当用户导航到其他页面时，不会触发页面刷新。该页面的URL通过
HTML5 History API进行更新。 - 浏览器通过 AJAX 请求向服务器检索新页面所需的数据（通常采用JSON格式）。
- 然后，SPA 通过 JavaScript 来动态更新页面，这些 JavaScript 在初始页面加载时已经下载。
- 这种模式类似于原生移动应用的工作方式。
好处：
- 用户感知响应更快，用户切换页面时，不再看到因页面刷新而导致的白屏。
对服务器进行的 HTTP - 请求减少，因为对于每个页面加载，不必再次下载相同的资源。
- 客户端和服务器之间的关注点分离。可以为不同平台（例如手机、聊天机器人、智能手表）建立新的客户端，而无需修改服务器代码。只要 API 没有修改，可以单独修改客户端和服务器上的代码。
坏处：
- 由于加载了多个页面所需的框架、应用代码和资源，导致初始页面加载时间较长。
- 服务器还需要进行额外的工作，需要将所有请求路由配置到单个入口点，然后由客户端接管路由。
- SPA 依赖于 JavaScript 来呈现内容，但并非所有搜索引擎都在抓取过程中执行 JavaScript，他们可能会在你的页面上看到空的内容。这无意中损害了应用的搜索引擎优化（SEO）。
- 然而，当你构建应用时，大多数情况下，搜索引擎优化并不是最重要的因素，因为并非所有内容都需要通过搜索引擎进行索引。为了解决这个问题，可以在服务器端渲染你的应用，或者使用诸如 Prerender 的服务来“在浏览器中呈现你的 javascript，保存静态 HTML，并将其返回给爬虫”。
什么时候会用到document.write()？
document.write()用来将一串文本写入由document.open()打开的文档流中。当页面加载后执行document.write()时，它将调用document.open，会清除整个文档（<head>和<body>会被移除），并将文档内容替换成给定的字符串参数。因此它通常被认为是危险的并且容易被误用。
网上有一些答案，解释了document.write()被用于分析代码中，或者当你想包含只有在启用了 JavaScript的情况下才能工作的样式。它甚至在HTML5样板代码中用于并行加载脚本并保持执行顺序！但是，我怀疑这些使用原因是过时的，现在可以在不使用document.write()的情况下实现。如果我的观点有错，请纠正我。
本地对象、内置对象、宿主对象？
- 本地对象（原生对象）：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
- 内置对象：Global、Math
- 宿主对象（运行环境[Node或浏览器]提供的）：window、document、XMLHttpRequest等
- 所有的BOM和DOM都是宿主对象。
