Web前端工程师面试题汇总（一）

前端工程师面试题汇总

 本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。
 

HTML

• Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

1、声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。 
2、严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。 
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。 
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1)、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式） 2)、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 3)、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式） 4)、HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

 

• HTML5 为什么只需要写 <!DOCTYPE HTML>？

html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来 规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

 

• 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素;img默认display属性值为“inline-block”，是“内联块状”元素。 
常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点： 
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 
2、元素的高度、宽度、行高以及顶和底边距都可设置。 
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 
常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特点： 
1、和其他元素都在一行上； 
2、元素的高度、宽度、行高及顶部和底部边距不可设置； 
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 
常用的内联块状元素有：

<img>、<input>

inline-block元素特点： 
1、和其他元素都在一行上； 
2、元素的高度、宽度、行高以及顶和底边距都可设置。 
知名的空元素： <br/> <hr/> <img/> <input/> <link/> <meta/> 
鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

 

• 页面导入样式时，使用link和@import有什么区别？

  1. 页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是： 
    XML/HTML代码

    <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

XML/HTML代码 
<style type="text/css" media="screen">

@import url("CSS文件");

</style>

 

两者都是外部引用CSS的方式，但是存在一定的区别：

  1. 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

  2. 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

  3. 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

  4. 区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

 

• 介绍一下你对浏览器内核的理解？

  1. 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

  2. 渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。 2.JS引擎则：解析和执行javascript来实现网页的动态效果。

  3. 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

 

• 常见的浏览器内核有哪些？

  1. Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

  2. Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

  3. Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

  4. Webkit内核：Safari,Chrome等。 [ Chrome的：Blink(WebKit的分支)]

 

• html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  1. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

  2. 绘画 canvas;

  3. 用于媒介回放的 video 和 audio 元素;

  4. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

  5. sessionStorage 的数据在浏览器关闭后自动删除;

  6. 语意化更好的内容元素，比如 article、footer、header、nav、section;

  7. 表单控件，calendar、date、time、email、url、search;

  8. 新的技术webworker, websockt, Geolocation;

  9. 移除的元素：

  10. 纯表现的元素：basefont，big，center，font, s，strike，tt，u;

  11. 对可用性产生负面影响的元素：frame，frameset，noframes;

  12. 支持HTML5新标签：

  13. IE8/IE7/IE6支持通过document.createElement方法产生的标签，

  14. 可以利用这一特性让这些浏览器支持HTML5新标签，

  15. 浏览器支持新标签后，还需要添加标签默认的样式。

  16. 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  17. 如何区分： DOCTYPE声明\新增的结构元素\功能元素

 

• 简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。 
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;及时在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

 

• HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 
　　如何使用： 
　　1、页面头部像下面一样加入一个manifest的属性; 
　　2、在cache.manifest文件的编写离线存储的资源; 
　　CACHE MANIFEST 
　　#v0.11 
　　CACHE: 
　　js/app.js 
　　css/style.css 
　　NETWORK: 
　　resourse/logo.png 
　　FALLBACK: 
　　/ /offline.html 
　　3、在离线状态时，操作window.applicationCache进行需求实现。 
　　详细的使用请参考：有趣的HTML5：离线存储

 

• 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 
　　离线的情况下，浏览器就直接使用离线存储的资源。

 

• 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会 
sessionStorage和localStorage的存储空间更大; 
sessionStorage和localStorage有更多丰富易用的接口; 
sessionStorage和localStorage各自独立的存储空间; 
localStorage 长期存储数据，浏览器关闭后数据不丢失; 
sessionStorage 数据在浏览器关闭后自动删除。

posted @ 2017-06-27 19:10  Joa_h  阅读(17087)  评论(0)  编辑  收藏  举报