前端工作面试问题个人解答

题目源：https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese

个人整理解答，有问题的地方请批评指正。

常见问题：

• 你在昨天/本周学到了什么？

了解了vuex的几本原理，准备搭建一个 Element+Vue-Router+vuex 的脚手架

• 编写代码的哪些方面能够使你兴奋或感兴趣？
• 你最近遇到过什么技术挑战？你是如何解决的？
• 在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？
• 请谈谈你喜欢的开发环境。
• 你最熟悉哪一套版本控制系统？

svn和git都有使用，最近常用的是git

• 你能描述当你制作一个网页的工作流程吗？

列出整体页面框架逻辑
手绘页面草图
基本文件框架
HTML->CSS->JS
测试&bug修复

• 假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?
• 你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?
• 你如何对网站的文件和资源进行优化？
• 浏览器同一时间可以从一个域名下载多少资源？
  • 有什么例外吗？
• 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
• 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
• 请写一个简单的幻灯效果页面。
• 如果今年你打算熟练掌握一项新技术，那会是什么？

前端单元测试

• 请谈谈你对网页标准和标准制定机构重要性的理解。
• 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？
• 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。
• 请解释 CSS 动画和 JavaScript 动画的优缺点。
• 什么是跨域资源共享 (CORS)？它用于解决什么问题？

A域名页面调用B域名资源，浏览器会提示跨域。
后端接口可以添加 Access-Control-Allow-Origin: XXX 允许跨域

HTML 相关问题：

• doctype(文档类型) 的作用是什么？

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

• 浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
IE包括两种模式：标准模式（Standards Mode）与怪异模式或混杂模式（Quirks mode）。
FIreFox包括三种模式：Full Standards Mode、Almost Standards Mode与Quirks Mode。
Opera包括三种模式：Quirks、Standards与Almost Standards。

• HTML 和 XHTML 有什么区别？

XHTML语法严格，主要不同包括：

• XHTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML 文档必须拥有根元素。

• 如果页面使用 'application/xhtml+xml' 会有什么问题吗？

要求比较严格，必须有head、body标签且每个元素必须是关闭的。
一些老的浏览器不支持，实际上，任何最新的浏览器都将支持application/xhtml+xml媒体类型。大多数浏览器也接受以application/xml发送的XHTML文档。

• 如果网页内容需要支持多语言，你会怎么做？

采用统一编码UTF-8方式编码
应用字符集的选择；所以对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集，不管是东方文字还是西方文字，在Unicode中一律用两个字节来表示，因而至少可以定义65536个不同的字符，几乎可以涵盖世界上目前所有通用的语言的每一种字符。 所以在设计和开发多语言网站时，一定要注意先把非中文页面的字符集定义为“utf-8”格式，即：这一步非常重要，原因在于若等页面做好之后再更改字符集设置，可说是一件非常非常吃力不讨好的工作，有时候甚至可能需要从头再来，重新输入网站的文字内容。

• 在设计和开发多语言网站时，有哪些问题你必须要考虑？

静态：就是为每种语言分辨准备一套页面文件，要么通过文件后缀名来区分不同语言，要么通过子目录来区分不同语言。例如对于首页文件index_en.htm供给英语界面，index_gb.htm供给简体中文界面，index_big.htm供给繁体中文界面，或者是en/index.htm供给英语界面，gb/index.htm供给简体中文界面，big/index.htm供给繁体中文界面，一旦用户选择了需要的语言后，主动跳转到相应的页面，首页以下其他链接也是按照同样方法处理。从保护的角度来看，通过子目录比通过文件后缀名来区分不同语言版本显得要简略明了。
动态：站点内所有页面文件都是动态页面文件（PHP，ASP等）而不是静态页面文件，在需要输出语言文字的处所同一采用语言变量来表现，这些语言变量可以根据用户选择不同的语言赋予不同的值，从而能够实现在不同的语言环境下输出不同的文字。例如：语言变量ln_name，当用户选择的语言是英语时赋值为“Name”，当用户选择的语言是简体中文时赋值为“姓名”，这样就可以适应不同语言时的输出。

• 使用 data- 属性的好处是什么？

data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

• 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

标签及属性
地理位置
画布
视频
音频
拖放
微数据
应用缓存
Web存储
web workers
服务器发送事件

• 请描述 cookies、sessionStorage 和 localStorage 的区别。

cookies 和 ＊Storage 的区别：
cookies会在服务器端和客户端间传递的；sessionStorage 和 localStorage存放在客户端的，不会发送至服务器端
cookies的兼容主流浏览器,包括IE6+;IE6，IE7不支持sessionStorage 和 localStorage
sessionStorage 和 localStorage中能存的数据比cookie大

sessionStorage 和 localStorage的区别：
sessionStorage存的数据在每次关闭浏览器后被删除，localStorage不会。

• 请解释