前端面试经典题目合集

1.浏览器页面有哪三层构成，分别是什么，作用是什么?

构成：结构层、表示层、行为层
分别是：HTML、CSS、JavaScript

2.HTML5的优点与缺点？

优点：
　　 a、网络标准统一、HTML5本身是由W3C推荐出来的。
　　 b、多设备、跨平台
　　 c、即时更新。
　　 d、提高可用性和改进用户的友好体验；
　　 e、有几个新的标签，这将有助于开发人员定义重要的内容；
　　 f、可以给站点带来更多的多媒体元素(视频和音频)；
　　 g、可以很好的替代Flash和Silverlight；
　　 h、涉及到网站的抓取和索引的时候，对于SEO很友好；
　　 i、被大量应用于移动应用程序和游戏。

缺点：
　　a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
　　 b、完善性：许多特性各浏览器的支持程度也不一样。
　　 c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
　　 d、性能：某些平台上的引擎问题导致HTML5性能低下。
　　 e、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

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

（1）、 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

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

a、 IE: trident 内核
b、 Firefox: gecko 内核
c、 Safari: webkit 内核
d、 Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
e、 Chrome: Blink( 基于webkit ， Google 与 Opera Software 共同开发 )

5.说说你对HTML5认识?（是什么,为什么）

是什么：
　　HTML5指的是包括 HTML 、 CSS 和 JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（ Plug-in-Based Rich Internet Application ， RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（W3C ）完成标准制定。目标是替换 1999 年所制定的 HTML 4.01 和 XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。
为什么：
　　HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。 HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

6.对WEB标准以及W3C的理解与认识?

　　标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

7.什么是WebGL,它有什么优点?

　　WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。
　　WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：
　　第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;
　　第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
　　通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

8.请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

　　sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
　　sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后， sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的。cookies会发送到服务器端。其余两个不会。
　　Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie 。 Firefox 每个域名 cookie 限制为 50 个。 Opera 每个域名 cookie 限制为 30 个。 Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名（ name ）、值（ value ）和等号。 Opera 许 cookie 多达 4096 个字节，包括：名（ name ）、值（ value ）和等号。 Internet Explorer 允许 cookie 多达 4095 个字节，包括：名（ name ）、值（ value ）和等号。
　　区别：
- Cookie
+ 每个域名存储量比较小（各浏览器不同，大致 4K ）
+ 所有域名的存储量有限制（各浏览器不同，大致 4K ）
+ 有个数限制（各浏览器不同）
+ 会随请求发送到服务器
- LocalStorage
+ 永久存储
+ 单个域名存储量比较大（推荐 5MB ，各浏览器不同）
+ 总体数量无限制
- SessionStorage
+ 只在 Session 内有效
+ 存储量更大（推荐没有限制，但是实际上各浏览器也不同）

9.说说你对HTML语义化的理解?

什么是HTML语义化？
　　HTML标签可以分为有语义的标签，和无语义的标签。比如table表示表格，form表示表单，a标签表示超链接，strong标签表强调。无语义标签典型的有<div>,<span>等。HTML语义化我的理解就是在页面中尽量多的结合场景多使用含有语义的标签，少使用div,span等无语义的标签。
why?为什么要进行语义化？
　　1，便于团队开发和维护，语义化更具可读性。现在的开发基本上都是一个团队合作进行开发。这种情况下，我们写的代码不仅要让我们自己能看懂，而且也应该让别人也容易理解和阅读，要保证代码的可维护性，这一点很重要。但是在实际开发中，由于HTML的灵活性，以及CSS的强大，以至于实现同一种界面样式，不同的人写出来的代码可能实现方式都不太一样。实现糟糕的，可能全是div套div，这样的代码到时候维护的话可能就是一场灾难。这一点，个人觉得是最主要的因素。
　　2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息
　　3，考虑到代码的可复用性，可移植性，方便其他设备的解析执行。移动设备、盲人阅读器等。

10.link和@import的区别?

　　link的使用

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

　　@import的使用

<style type='text/css' media='screen'>@import url('CSS文件 ');</style>

两者都是外部引用CSS的方式，但是存在一定的区别：
  区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
  区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
  区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
  区别4： ink 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

11.说说你对SVG理解?

  SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。 SVG 是 W3C(‘World Wide Web ConSortium’ 即 ’ 国际互联网标准组织 ‘) 在 2000 年 8 月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。 SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
  特点：
(1)任意放缩
  用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
(2)文本独立
  SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件
  总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
(4)超强显示效果
  SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制
  SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
(6)交互 X 和智能化。
  SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量  图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。
浏览器支持：
  Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支持 SVG 。
  IE8和早期版本都需要一个插件 - 如 Adobe SVG 浏览器，这是免费提供的。

12.说说超链接target属性的取值和作用？

  target这个属性指定所链接的页面在浏览器窗口中的打开方式。
它的参数值主要有：
  a、 _blank ：在新浏览器窗口中打开链接文件
  b、 _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象 _self 参数一。
  c、 _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。但是我不太理解。
  d、 _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

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

  主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
  JS引擎则：解析和执行 javascript 来实现网页的动态效果。
  最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

14.iframe有那些缺点？

*iframe会阻塞主页面的 Onload 事件；
*搜索引擎的检索程序无法解读这种页面，不利于 SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用 iframe ，最好是通过 javascript
动态给iframe添加 src 属性值，这样可以绕开以上两个问题。

15.Label的作用是什么，是怎么用的？

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

<label for='Name'>Number:</label><input type=“ text “ name='Name' id='Name'/><label>Date:<input type='text' name='B'/></label>

16.如何实现浏览器内多个标签页之间的通信?

WebSocket、 SharedWorker ；
也可以调用localstorge、 cookies 等本地存储方式；
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；

17.如何在页面上实现一个圆形的可点击区域？

a、 map+area 或者 svg
b、 border-radius
c、纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

18.在HTML中URL、src、href分别代表什么？如何使用？

src 是指向物件的来源
href 是指向需要连结的地方
url 是通用的 “连结” 的专业代名词，在 HTML 语法里几乎不会使用

src 通常用作 “拿取” 而 href 用作 “连结前往”

例如 <img src="image.jpg" />
就是 src 拿取 image.jpg 作为这个 img 的源档案… 就是 <img> 显示 image.jpg 的意思
例如 <a href="image.jpg" />
就是 href 跳转到 image.jpg… 就是网址会跳转到 image.jpg 的意思

19.谈谈你对canvas的理解？

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

20.表单提交中Get和Post方式的区别？

(1)、 get 是从服务器上获取数据， post 是向服务器传送数据。
(2)、 get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
(3)、对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
(4)、 get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB 。
(5)、 get 安全性非常低， post 安全性较高。

21.HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。 HTML5 提供了下面两种本地存储方案：
· localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
· sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

22.解释一下CSS的盒子模型？

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。

23.请列举几种清除浮动的方法(至少两种)?

(1)、父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
(2)、结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
(3)、父级div定义 伪类:after 和 zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
(4)、父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
(5)、父级div定义 overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。