肝了一晚上整理出来的前端面试题

我是一个前端，如果你是想一起学习，一起找工作，一起进步的，那你可以加我；咱们交个朋友，一起学习前端技术，咱们一起找工作，一起交流 如果你是不上进，不学习，打广告的，或者整体怨天怨地的，那千万别别别加我，我不想跟你这种人交朋友！

点击链接：

 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：[搞前端的半夏,了解更多前端知识!

1.H5 的新特性有哪些

画布 (Canvas) API

地理 (Geolocation) API

音频、视频 API(audio,video)

localStorage 和 sessionStorage

webworker 和 websocket

header,nav,footer,aside,article,section

web worker 是运行在浏览器后台的 js 程序，他不影响主程序的运行，是另开的一个 js 线程，可以用

这个线程执行复杂的数据操作，然后把操作结果通过 postMessage 传递给主线程，这样在进行复杂

且耗时的操作时就不会阻塞主线程了

2.Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控

件上。

3.HTML5 的 form 如何关闭自动完成功能

给不想要提示的 form 或某个 input 设置为 autocomplete=off

<label for="Name">Number:</label>

<input type=“text“name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label> 声明位于文档中的最前面的位置，处于 `` 标签之前。此标签可告知浏览器文档使用哪种 HTML 或

XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

4.dom 如何实现浏览器内多个标签页之间的通信 ? ( 阿里 )

1 ） WebSocket 、 SharedWorker ；

2 ）也可以调用 localstorge 、 cookies 等本地存储方式； localstorge 另一 个浏览上下文里被添加、修改

或删除时，它都会触发一个事件，我们通 过监听事件，控制它的值来进行页面信息通信；

3 ）注意 quirks ： Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

5. 实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都

能保持一致的效果

6.title 与 h1 的区别、 b 与 strong 的区别、 i 与 em 的区别？

title 属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影

响；

strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： <strong> 会重读，而 <B>

是展示强调内容。

i 内容展示为斜体， me 表示强调的文本；

Physical Style Elements -- 自然样式标签

b, i, u, s, pre

Semantic Style Elements -- 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用 , 如果不能确定时首选使用自然样式标签。

7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么 ?

Trident 内核 :IE 系列

Gecko 内核 :Firefox

Webkit 内核 :Safari

Blink 内核：是基于 Webkit 内核的子项目 , 使用的浏览器有：

Chrome/opera 等除 IE 、 Firefox 、 Safari 之外的几乎所有浏览器

几乎所有国产双内核浏览器（ Trident/Blink ）如 360 、猎豹、 qq 、百度等

8. 每个 HTML 文件里开头都有个很重要的东西， Doctype ，知道这是干什么的吗？

文档声明。

<div style="height:1px;overflow:hidden;background:red"></div> IE 下如不书写文档声明会使用怪异模式解析网页导致一系列 CSS 兼容性问题

9.div+css 的布局较 table 布局有什么优点

正常场景一般都适用 div+CSS 布局，

优点：

1 ）结构与样式分离

2 ）代码语义性好

3 ）更符合 HTML 标准规范

4 ） SEO 友好

Table 布局的适用场景：

某种原因不方便加载外部 CSS 的场景，例如邮件正文，此时用 table 布局可以在无 css 情况下保持页面布局

正常

10.img 的 alt 与 title 有何异同？ strong 与 em 的异同

alt(alt text): 为不能显示图像、窗体或 applets 的用户代理（ UA ）， alt 属性用来指定替换文字。替换文字

的语言由 lang 属性指定。 ( 在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示 )

title(tool tip): 该属性为设置该属性的元素提供建议性的信息。

em: 表现为斜体，语义表示强调

strong: 表现为粗体，语义为强烈语气，强调程度超过 em

11. 简述一下 src 与 href 的区别

src 用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求

src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片

和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头

部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链

接）之间的链接，如果我们在文档中添加

<script src =”js.js”></script>

<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么

建议使用 link 方式来加载 css ，而不是使用 @import 方式。

12. 知道的网页制作会用到的图片格式有哪些

png-8 ， png-24 ， jpeg ， gif ， svg 。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp 。（是否有关注新技术，新鲜

事物）

科普一下 Webp ： WebP 格式，谷歌（ google ）开发的一种旨在加快图片加载速度的图片格式。图片压缩

体积大约只有 JPEG 的 2/3 ，并能节省大量的服务器带宽资源和数据空间。 Facebook Ebay 等知名网站已经

开始测试并使用 WebP 格式。

在质量相同的情况下， WebP 格式图像的体积要比 JPEG 格式图像小 40%

13. 在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js

请求一般情况下有哪些地方会有缓存处理

dns 缓存， cdn 缓存，浏览器缓存，服务器缓存

14. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些

图片的加载，给用户更好的体验

1 ）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与

页面的距离，如果前者小于后者，优先加载。

2 ）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3 ）如果图片为 css 图片，可以使用 CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技术。

4 ）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用

户体验。

5 ）如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩

后大小与展示一致

15. 你如何理解 HTML 结构的语义化

1 ）更符合 W3C 统一的规范标准，是技术趋势。

2 ）没有样式时浏览器的默认样式也能让页面结构很清晰。

3 ）对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来 “ 读 ” 你的网页。

4 ）对其他非主流终端设备友好。例如机顶盒、 PDA 、各种移动终端。

5 ）对 SEO 友好。

16. 谈谈以前端角度出发做好 SEO 需要考虑什么

搜索引擎主要以 :

外链数量和质量 , 网页内容和结构等来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况：

1 ） Meta 标签优化：主要包括主题（ Title) ，网站描述 (Description) 。还有一些其它的隐藏文字比如

Author （作者）， Category （目录）， Language （编码语种）等，符合 W3C 规范的语义性标签的使用

2 ）如何选取关键词并在网页中放置关键词：搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作

之一。首先要给网站确定主关键词（一般在 5 个上下），然后针对这些关键词进行优化，包括关键词密度

（ Density ），相关度（ Relavancy ），突出性（ Prominency ）等等。

17.html5 有哪些新特性、移除了那些元素

新特性：

1 ）拖拽释放 (Drag and drop) API

2 ）语义化更好的内容标签（ header,nav,footer,aside,article,section ）

3 ）音频、视频 API(audio,video)

4 ） 画布 (Canvas) API

5 ）地理 (Geolocation) API

6 ） 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7 ） sessionStorage 的数据在浏览器关闭后自动删除

8 ）表单控件， calendar 、 date 、 time 、 email 、 url 、 search

9 ）新的技术 webworker, websocket, Geolocation

移除的元素：

1 ）纯表现的元素： basefont ， big ， center ， font, s ， strike ， tt ， u ；

2 ）对可用性产生负面影响的元素： frame ， frameset ， noframes ；

18. 如何处理 HTML5 新标签的浏览器兼容问题

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持

HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的

框架、使用最多的是 html5shim 框架）：

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]--> 19. 如何区分 HTML 和 HTML5 ？

DOCTYPE 声明新增的结构元素、功能元素

20.HTML5 Canvas 元素有什么用

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作

21. 如何在 HTML5 页面中嵌入音频

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3 、 Wav 和 Ogg ：

22. 如何在 HTML5 页面中嵌入视频

和音频一样， HTML5 定义了嵌入视频的标准方法，支持的格式包括： MP4 、 WebM 和 Ogg ：

23.HTML5 引入什么新的表单属性

datalist datetime output keygen date month week time number range emailurl

24. 语义化的理解

用正确的标签做正确的事情！

html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO 。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

<audio controls>

<source src="jamshed.mp3" type="audio/mpeg">

Your browser does'nt support audio embedding feature.

</audio>

<video width="450" height="340" controls>

<source src="jamshed.mp4" type="video/mp4">

Your browser does'nt support video embedding feature.

</video>

25. 介绍一下你对浏览器内核的理解

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

渲染引擎：负责取得网页的内容（ HTML 、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算

网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，

所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用

程序都需要内核

JS 引擎则：解析和执行 javascript 来实现网页的动态效果

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

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

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问

app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过

app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的

manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么

就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源

27. 请描述一下 cookies ， sessionStorage 和 localStorage 的区别

cookie 是网站为了标示用户身份而储存在用户本地终端（ Client Side ）上的数据（通常经过加密）

cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递

sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie 数据大小不能超过 4k

sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

28.css sprite 是什么 , 有什么优缺点

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图

案。

优点：

减少 HTTP 请求数，极大地提高页面加载速度

增加图片信息重复度，提高压缩比，减少图片大小

更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现 缺点：

图片合并麻烦

维护麻烦，修改一个图片可能需要从新布局整个图片，样式

29.canvas 如何绘制一个三角形 | 正方形

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。

这两个函数加起来就是画一条直线。 画线要用 “ 笔 ” ，那么 MoveTo() 把笔要画的起始位置固定了（ x,y ）然

后要固定终止位置要用到 LineTo 函数确定终止位置（ xend,yend ） , 这样一条线就画出来了。 每次与前面

一个坐标相连 。

stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

30. 弹性盒子模型 ? flex|box 区别 ?

1 ）引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配

空白空间。

即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器

会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺

寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止

超出容器的范围。弹性盒布局是与方向无关的。

在传统的布局方式中， block 布局是把块在垂直方向从上到下依次排列的；

而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操

作。

<!DOCTYPE HTML5><html><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> 画布 </title>

</head> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#c3c3c3;">

Your browser does not support the canvas element.

</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");// 三角形

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(50,50);

cxt.lineTo(10,50);

cxt.lineTo(10,10);

cxt.stroke();// 正方形

var cxt2=c.getContext("2d");

cxt2.moveTo(60,10);

cxt2.lineTo(100,10);

cxt2.lineTo(100,50);

cxt2.lineTo(60,50);

cxt2.lineTo(60,10);

cxt2.stroke();

</script></body></html> 2 ） flex 和 box 的区别 : display ： box 是老规范，要兼顾古董机子就加上它； 父级元素有 display:box; 属性

之后。他的子元素里面加上 box-flex 属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。

flex 是最新的，董机老机子不支持的；

父元素设置 display:flex 后，子元素宽度会随父元素宽度的改变而改变，而 display:box 不会。 Android

UC 浏览器只支持 display: box 语法；而 iOS UC 浏览器则支持两种方式。

31. 解释在 ie 低版本下的怪异盒模型和 c3 的怪异盒模型 和 弹性盒模型 ?

IE 当 padding+border 的值小于 width 或者 height:

盒模型的宽度 =margin( 左右 )+width （ width 已经包含了 padding 和 border 的值）

盒模型的高度 =margin( 上下 )+height （ height 已经包含了 padding 和 border 的值）

当 padding+border 的值大于 width 或者 height:

盒模型的宽度 =margin( 左右 )+padding( 左右 )+border( 左右 )

盒模型的高度 =margin( 上下 )+padding( 上下 )+border( 上下 )+19px （加一个默认行高 19px ） 所以相当

于是 padding+border 和 width 或者 height 比大小，谁大取谁。

以上几种 DOCTYPE 都是标准的文档类型，无论使用哪种模式完整定义 DOCTYPE ，都会触发标准模式，

而如果 DOCTYPE 缺失则在 ie6 ， ie7 ， ie8 下将会触发怪异模式（ quirks 模式） CSS3box-sizing 有两个值

一个是 content-box ，另一个是 border-box 。

当设置为 box-sizing:content-box 时，将采用标准模式解析计算，也是默认模式；

当设置为 box-sizing:border-box 时，将采用怪异模式解析计算；

Css3 弹性盒模型引入了新的盒子模型 — 弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及

如何处理可用的空间。使用