前端开发面试题

时间：2024-07-02 00:50:56 学人智库我要投稿

相关推荐

前端开发面试题

　　前言

前端开发面试题

　　本文由我收集总结了一些优质的前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的!

　　前端还是一个年轻的行业，新的行业标准，框架，库都不断在更新和新增，正如赫门在2015深JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术, 跟上快速变化的节奏, 也是身为一个前端程序员必备的技能之一。

　　最近也收到许多微博私信的鼓励和更正题目信息，后面会经常更新题目和答案到github博客，但其他旧版本的分支和其他网站出现的拷贝版本上面的错误回答我也管不了嘞。希望更多的前端开发可以达到既能使用也会表达，对理论知识有自己的理解，也可根据下面的知识点一个一个去进阶学习,形成自己的职业技能链。

　　面试有几点需注意：

　　1、面试题目：根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。

　　2、题目类型：理论知识，算法，项目细节、技术视野、开放性题，工作案例。

　　3、细节追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。

　　4、回答问题再棒，面试官(可能是你面试职位的直接领导)，会考虑我要不要这个人做我的同事?所以态度很重要、除了能做事，还要会做人。(感觉更像是相亲( ))

　　5、资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能(靠谱)。

　　前端开发面试知识点大纲：

　　作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

　　HTML

　　Doctype作用?标准模式与兼容模式各有什么区别?

　　HTML5 为什么只需要写 ?

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

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

　　(1)行内元素有：a b span img input select strong(强调的语气)

　　(2)块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

　　(3)常见的空元素：

　　鲜为人知的是：

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

　　(1)link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的，只能用于加载CSS;

　　(2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

　　(3)import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

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

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

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

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

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

　　常见的浏览器内核有哪些?

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

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

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

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

　　详细文章：浏览器内核的解析和对比 - 依水间

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

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

　　绘画 canvas;

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

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

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

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

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

　　新的技术webworker, websockt, Geolocation;

　　移除的元素：

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

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

　　* 支持HTML5新标签：

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

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

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

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

　　* 如何区分： 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文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

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

　　详细的使用请参考：有趣的HTML5：离线存储

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

　　localStorage 长期存储数据，浏览器关闭后数据不丢失;

　　sessionStorage 数据在浏览器关闭后自动删除。

　　iframe有那些缺点?

　　*iframe会阻塞主页面的Onload事件;

　　*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

　　使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

　　动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

　　Label的作用是什么?是怎么用的?

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

　　Number:

　　Date:

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

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

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

　　cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会

　　sessionStorage和localStorage的存储空间更大;

　　sessionStorage和localStorage有更多丰富易用的接口;

　　sessionStorage和localStorage各自独立的存储空间;

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

　　调用localstorge、cookies等本地存储方式

　　webSocket如何兼容低浏览器?(阿里)

　　Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

　　CSS

　　介绍一下CSS的盒子模型?

　　(1)有两种， IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

　　(2)盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

　　CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

　　* 1.id选择器( # myid)

　　2.类选择器(.myclassname)

　　3.标签选择器(div, h1, p)

　　4.相邻选择器(h1 + p)

　　5.子选择器(ul > li)

　　6.后代选择器(li a)

　　7.通配符选择器( * )

　　8.属性选择器(a[rel = "external"])

　　9.伪类选择器(a: hover, li: nth - child)

　　* 可继承的样式： font-size font-family color, UL LI DL DD DT;

　　* 不可继承的样式：border padding margin width height ;

　　* 优先级就近原则，同权重情况下样式定义最近者为准;

　　* 载入样式以最后载入的定位为准;

　　优先级为:

　　!important > id > class > tag

　　important 比内联优先级高

　　CSS3新增伪类举例：

　　p:first-of-type 选择属于其父元素的首个

　　元素的每个

　　元素。

　　p:last-of-type 选择属于其父元素的最后

　　元素的每个

　　元素。

　　p:only-of-type 选择属于其父元素唯一的

　　元素的每个

　　元素。

　　p:only-child 选择属于其父元素的唯一子元素的每个

　　元素。

　　p:nth-child(2) 选择属于其父元素的第二个子元素的每个

　　元素。

　　:enabled :disabled 控制表单控件的禁用状态。

　　:checked 单选框或复选框被选中。

　　如何居中div?如何居中一个浮动元素?

　　给div设置一个宽度，然后添加margin:0 auto属性

　　div{

　　width:200px;

　　margin:0 auto;

　　}

　　居中一个浮动元素

　　确定容器的宽高宽500 高 300 的层

　　设置层的外边距

　　.div {

　　Width:500px ; height:300px;//高度可以不设

　　Margin: -150px 0 0 -250px;

　　position:relative;相对定位

　　background-color:pink;//方便看效果

　　left:50%;

　　top:50%;

　　}

　　列出display的值，说明他们的作用。position的值， relative和absolute定位原点是?

　　1、block 象块类型元素一样显示。

　　none 缺省值。象行内元素类型一样显示。

　　inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。list-item 象块类型元素一样显示，并添加样式列表标记。

　　2、*absolute

　　生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　*fixed (老IE不支持)

　　生成绝对定位的元素，相对于浏览器窗口进行定位。

【前端开发面试题】相关文章：

Microsoft面试题09-04

iOS面试题07-10

公司面试题09-12

hibernate面试题10-18

英语面试题精选06-13

小升初面试题06-10