前端面试整理.docx

PAGE2/NUMPAGES2

前端面试整理

一、HTML/CSS篇

1、本地存储和会话（事务）存储之间的区别是什么？

【仅供参考】

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。

2、HTML5引入了哪些新的表单属性？

【仅供参考】

新增表单属性包括datalist、datetime、output、keygen、date、month、week、time、number、range、emailurl

3、cookie和session的区别是什么？

【仅供参考】

区别如下：

（1）cookie数据存放在客户的浏览器上，session数据存放在服务器上。

（2）cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗。考虑到安全问题应当使用session。

（3）session会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用cookie。

（4）单个cookie保存的数据不能超过4KB，很多浏览器都限制一个站点最多保存20个cookie。

所以个人建议可以将登录信息等重要信息存放在session中，其他信息（如果需要保留）可以存放在cookie中。

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

【仅供参考】

主要分成两部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后渲染到用户的屏幕上。

JS引擎则：解析和执行javascript来实现逻辑和控制DOM进行交互。

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

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

【仅供参考】

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

6、如何在HTML5页面中嵌入音频？

【仅供参考】

HTML5包含了嵌入音频文件的标准方式，支持的格式包括MP3、Wav和Ogg等，嵌入方式如下。

audiocontrols

sourcesrc=icketang.mp3type=audio/mpeg

Yourbrowserdoesntsupportaudioembeddingfeature.

/audio

7、页面可见性（PageVisibility）API可以有哪些用途

【仅供参考】

1、通过visibilitystate的值得检测页面当前是否可见，以及打开网页的时间。

2、在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

8、如何在页面上实现一个圆形的可点击区域

【仅供参考】

1、map+area或者svg

2、border-radius

3、纯js实现，一个点不在圆上的算法

9、HTML5标准提供了哪些新的API？

【仅供参考】

HTML5提供很多新的AP1，包括MediaAPl、TextTrackAPI、ApplicationCacheAPI、UserInteractionAPI、DataTransferAPI、CommandAPl、ConstraintionValidationAPI和HistoryAPI

10、HTML5中的应用缓存是什么？

【仅供参考】

HTML5应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。

应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要

11、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？

【仅供参考】

HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS、图像和JavaScript脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。

！doctypehtml

htmlmanifest=example.appcache

/html

与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

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

【仅供参考】

定义：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是