经典前端面试题.pdf

经典前端面试题

一一、、HTML/CSS篇篇

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

【【供供参参考考】】

定义：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的

display值，如div的display默认值为“block”，则为“块级”元素；span默认

display属性值为“inline”，是“行内”元素。

行内元素有：abspanimginputselectstrong（强调的语气）

块级元素有：divulollidldtddh1h2h3h4…p

空元素：

常见:brhrimginputlinkmeta

不常见:areabasecolcommandembedkeygenparamsourcetrackwbr

2、应用缓存中的回退是什么？

【【供供参参考考】】

应用缓存中的回退会帮助你指定在服务器不可访问时，显示某文件。例如在下面的manifest文

件中，如果用户输入了“/home”，同时服务器不可到达，“404htm”文件应送达。

FALLBACK：

/home//404.html

3、HTML5应用程序缓存为应用带来什么优势？

【【供供参参考考】】

应用程序缓存为应用带来3个优势。

（1）离线浏览，让用户可在应用离线时（网络不可用时）使用它们。

（2）速度，让已缓存资源加载得更快。

（3）减少服务器负载，让浏览器将只下载服务器更新过的资源。

4、Canvas和SvG的区别是什么？

【【供供参参考考】】

两者的区别如下：

（1）一旦Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操

作，可以被浏览器再次显示。

（2）Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。

（3）因为不需要记住以后事情，所以Canvas运行更快；因为为了之后的操作，SVG需要记录坐

标，所以运行比较缓慢。

（4）在Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。

（5）Canvas绘制出的是位图，因此与分辨率有关；SvG绘制出的是矢量图，因此与分辨率无

第1/27页

关。

5、本地存储的数据有生命周期吗？

【【供供参参考考】】

本地存储的数据没有生命周期，它将一直存储数据，直到用户从浏览器清除或者使用

JavaScript代码移除。

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

【【供供参参考考】】

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机

器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通

过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当

网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

创建一个和html同名的manifest文件，然后在页面头部像下面一样加入一个manifest的

属性。

<htmllang="en"manifest="index.manifest">

在如下cache.manifest文件的编写离线存储的资源。

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所

以不需要把页面自身也列出来。

NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所

以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，

那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文

件表示的就是如果访问根目录下任何一个资源失败了，