Front-end-Developer-Interview-Questions面试题笔记,一HTML篇

最近处于换工作状态,略微看了下github上的开源题目,觉得不错,决定做一做,查漏补缺,巩固一下自己的前端基础知识吧。

地址https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/README.md#general-questions

备注:以下仅为笔者的理解,不一定100%正确!如有错误请指正。

HTML Questions:

  1、doctype(文档类型)的作用是什么?

  顾名思义,doc+type,文档类型,就是告诉浏览器以什么方式来解读你的页面文档,详情请戳这里

  2、浏览器标准模式和怪异模式之间的区别是什么?

  标准模式是各大浏览器以自己的标准来解析文档,不要以为标准模式就是大家都一样了。

  怪异模式是各大浏览器为了向下兼容那些以老版引擎做为标准开发的古老网页而模拟自己老版本的方式来解析文档。(有点绕,请原谅我的小学语文老师)

  3、使用 XHTML 的局限有哪些?如果页面使用 'application/xhtml+xml' 会有什么问题吗?

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

  首先先了解一下contentType是什么东西,顾名思义:内容类型,其实就是每次http请求时,后台给浏览器返回的Header中的一个字段,他是用来决定浏览器将以什么形式、什么编码读取这个文件(请与doctype区别开)。会出现的问题就是,IE8和他的弟弟们是不认识这个type,他们就会弹出让你下载了。

  4、如果网页内容需要支持多语言,你会怎么做?在设计和开发多语言网站时,有哪些问题你必须要考虑?

  以下仅提供思路:

    • 数据库保存所有字段,以模版形式填充相应的语言内容(动态页面)
    • 有几种语言每个页面就做几个(静态页面)
    • 采用类似google翻译小工具的第三方来实现

  问题:

    • 应用字符集的选择,Unicode是最理想的选择。
    • 语言书写习惯&导航结构,左与右的选择。
    • 数据库驱动型网站应当考虑如何从技术上实现对不同语言数据信息的收集和检索。
    • 搜索引擎&市场推广。

  

  5、data-属性的作用是什么?

  其实就是自定义属性,只是data-*中的数据,可以直接从元素的dataset对象中获取到,不需要用getAttribute/setAttribute这样的方式来获取,最明显的好处就是可以很方便的遍历了(实际运用时请考虑兼容性,不是所有版本的浏览器都支持dataset)。

  6、如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?

  详情看这里http://www.mahaixiang.cn/html/859.html

  7、请描述一下 cookies,sessionStorage 和 localStorage 的区别?

  • cookie会随着http请求发送到服务端,webStorage则不会。
  • 可存储的数据大小不一样。
  • 存储位置不同。
  • 作用域不同。
  • 时效性不同。

  

  8、请描述一下 GETPOST 的区别?

  • GET是从服务器获取数据,POST是向服务器传输数据。
  • GET仅能通过url显式传值,而POST还可以通过data隐式传值。
  • POST可传输的数据更多。
  • GET安全性低,POST安全性高。

  9、Describe the difference between <script>, <script async> and <script defer>.(三个script标签的差异)

  • <script>阻止文档流,立即执行
  • <script async>不阻止文档流,立即执行,与文档流同步
  • <script defer>延迟加载,文档流解析完毕后执行

  

  10、Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before</body>? Do you know any exceptions?(为什么通常把<link>标签放在<head></head>之间,把<script>放在</body>结束之前是好的选择)

  首先先知道浏览器解析文档时候是从上往下单线程方式解析的。

  • 渲染页面元素时,对应css已经存在,可以一次渲染出最终效果,若元素渲染完毕后,对应css才出现,页面就会根据新的css又重新渲染一遍页面。这就是为什么link要放在head之间比较好。
  • script会阻止文档流,也会阻止页面的渲染,script中可能会出现对未解析的文档的操作或者出现错误,这样的话页面会出现意想不到的结果,放在最后起码页面可以完整的渲染成功,script的错误也不会影响到页面的加载,所以script要放在文档最后,至于为什么要放在</body>之前,按照标准来说</body>之后是不应该再出现标签了。虽然说放在</body>之后也是能成功执行的,那是因为浏览器帮你把</body>移动到了文档末尾,这样是不可取的。