面试题小结及相关知识点

前端面试题总结

写在前面：今天晚上开始看网上的前端题了，尽管目前离求职还有很远，但我觉得这并不是没有必要，我始终相信学习东西需要不断的沁入到这些知识点中去，并不是因为我们马山要用的时候才去看某样东西，而是在急需用到的时候，我们的脑回路里面突然闪现：在某个时候偶然看到的一个知识点，然后自己能顺着这个进行联想，而这可能也正是非科班生所缺少的吧。

HTML

• 文档类型声明的作用？

  的作用是将标签语言与相应的文档类型定义相关联起来。

  只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对JavaScript脚本都会有所影响。

---

涉及到的知识点：

1. DTD文档类型定义
2. 超文本标记语言下的文档类型声明是用来告知浏览器当前文档用的是哪种超文本规范。
3. 超文本中的文档类型声明有三种：严格型、过渡性、框架集型。过渡模式包含了W3C标准，同时也可以使用不被W3C标准所推荐的标签
4. HTML5的文档声明只需要写成
5. DOCTYPE的模式区分是从HTML4开始的。
6. 没有文档声明，浏览器则会采用怪异模式。

---

• 浏览器有哪些模式？各种模式之间的区别是什么？

浏览器有三种模式：标准模式、几乎模式、怪异模式；即standards moded、almost stadards mode/quirks mode;

区别：标准模式浏览器会以W3C标准来渲染网页，而怪异模式时浏览器则会以老版本的方式来渲染网页，，而且不同的浏览器的怪异模式还不一样，所以在写代码的时候应该避免这种错误。至于几乎模式则是一种介于标准模式和怪异模式之间的一种过渡模式。

---

1. 浏览器模式与文档模式有什么区别？如果存在一个完整的DOCTYPE，即文档声明，则浏览器会采用标准模式，否则浏览器会采用怪异模式。
2. 在js中如何判断浏览器模式？document对象的compatMode，它有两个值，backCompat对应怪异模式，CSS1compat对应严格模式。

---

• HTML 和XHTML有什么区别？

简单的将html是一种标签语言，而xhtml则是这种标签语言的规范版本，xhtml是xml + html，即用xml的方式写html。xhtml出现的初衷是为了解决互联网大量web页面包含错误的问题，但由于xhtml会强制性报错，所以并不是非常受欢迎，所以最终html5的出现洗去了这个教训，即向后兼容的特性。

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

不满足向后兼容的要求，老式的浏览器可能并不支持。这也是xhtml的局限，即要求必须：有html、title、head body，标签必须关闭，所有标签名都必须小写，所有XHTML都必须有文档声明，否则就会报错。

• 如果网页内需要支持多种语言应该怎么做？

1、首先是不同语言的编码问题：对提供多语言的网页来说，采用unicode字符集是一种非常好的选择，几乎涵盖了所有的语言的每一种字符。

2、其次，不同语言的书写习惯可能不一样，有的向左有的向右。

3.还应该考虑到不同语言地数据库的检索和收集。

---

1. 详细解释一下unicode字符集？
2. 什么是utf-8？为什么要把非中文的页面的字符集定位utf-8？
3. 数据库驱动网站

---

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

关于什么是data- 属性：即data- 前缀 加自定义的属性名，这种结构可以用来储存信息。

data-*属性来自HTML5，可以通过添加data- 前缀的方法自定义的保存特定元素的数据。同时在HTML5中元素有一个dataset的属性，可以通过JavaScript来操作，只是要注意的是：在JavaScript中操作时不用加前缀data- ，仅仅需要在dataset后面加 .自定义属性名。

优点即是可以不通过ajax、服务端数据库查询来创建更好的用户体验。

---

怎样使用data？在html通过data对元素进行标记，然后在css同进行原则，通过这个属性来增加样式。在jquery中也可以通过对data- 的选择来操作dom节点。但是要注意的是：无论在css中还是在jquery中，data- 实质上都是属性，而不仅仅是class一样的，可以通过 .className 名来选择。比如在jquery中对data- 的选择就是 $('元素名‘).attr('data- '), .attr()即是获取某个属性的值得方法。

---

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

有

• 使用哪些工具可测试代码性能？

JSPerf Profiler

*描述cookies、sessionStorage、localStorage的区别？

三者的共同点是：都属于在浏览器端储存数据，从而避免了不断的请求服务器来交换数据。cookies是最早用来在浏览器端储存数据的，而另外两个都是在HTML5出现的，二者都是window的属性。localStorage是一直属于本地的，而sessionStorage只会伴随着session的存在而存在，即一旦窗口关闭，则sessionStorage则消失。（详细看下二者的使用方法）

不同点：
1.sessionStorage是在同源的窗口中始终存在的数据，只要这个窗口没有被关闭，进入同源的其他页面，数据也同样是存在的。
2. 但如果同时打开两个独立的窗口，即便是同一页面，sessionStorage也是不同的cookies会发送到服务器端。

• 为什么要将放在之间，而把 < script>放在之前？有不有例外？

（将放在之前的原因是为了让html页面在渲染之前就将css样式文件提前加载好；script放body前的原因是为了让html页面在完全渲染完毕后再执行js动态操作，否则会出现一些dom元素还没有加载完毕，就开始对其执行操作，而找不到相关对象的问题。）（这是我自己的回答）

*上面的这个问题设计到浏览器的渲染机制的问题！

浏览器是如何渲染的？https://segmentfault.com/a/1190000004292479