换工作了，又要经历久违的面试了

最新推荐文章于 2025-06-24 13:44:01 发布

原创最新推荐文章于 2025-06-24 13:44:01 发布 · 580 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#面试

本文档汇总了前端面试中常见的技术问题及其解答，包括CSS引入方式、盒模型、JavaScript数据类型等基础知识，还涉及H5C3的新特性及浏览器兼容性的处理方法。

写代码是一件事，面试是另一件事。从今天起，开始写技术日记，再简单的代码三天不写也容易忘，理论知识想要记住就更难了。重要的是每天坚持！

面试中很容易问到的问题（基础）：

1.CSS的引入方式有哪些？（真正想问的应该是link和@import有什么差别）
引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。
行内式：在标记的style属性中设定CSS样式。没有体现出CSS的优势，不推荐使用。
内嵌式：将CSS样式集中写在网页的<head></head>标签内的<style></style>标签中。对于一个包含很多网页的网站，

在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

★★外联样式
导入式（@import）：将一个独立的外部css文件引入HTML文件中，<style>标记也是写在<head>标记中。导入式会在

整个网页加载完后再加载CSS文件，这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一

下之后，再出现网页的样式。

链接式（link）：使用<link>标记来引入外部样式表文件。它会在网页文件主体加载前加载CSS文件，因此显示出来的

网页从一开始就是带样式的效果的，这是链接式的优点。@import只有在ie5以上才可以被识别，link是html标签，不存

在浏览器兼容性问题；Link引入样式的权重大于@import的引用
总结：一般来说，做网站时把样式写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个

CSS文件中再使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。

2.解释一下盒模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框。
盒子模型有两种，分别是 IE 盒模型和标准 w3c 盒子模型。
★★二者对width/height属性的定义存在差异，w3c的width仅指content，IE的width还包括padding和border。

3.JavaScript数据类型有哪些？typeof可以打印出什么类型？

基本数据类型：String Number Boolean Undefined Null
引用数据类型： Object(Array,Date,RegExp,Function)
typeof：String Number Boolean Undefined Object Function
☆注意☆：typeof null返回为object,因为特殊值null被认为是一个空的对象引用。

☆☆如果需要获得对象的数据类型，需要使用Object.prototype.toString.apply(数据)。

4.浏览器缓存你是怎么做的？（主要是想问cookie、localStorage、sessionStorage的差别）

浏览器缓存的方式有很多，一般用cookie、localStorage、sessionStorage。三者都是在浏览器端存储的数据。
三者的区别：
1、cookie在浏览器和服务器间来回传递，sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存，

有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
2、存储大小不同：cookie数据不能超过4k，session和local虽然也有存储大小的限制，但比cookie大得多。
3、数据有效期不同：cookie在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；session仅在当前浏览器

窗口关闭前有效，不可能持久保持；local除非主动清除，否则始终有效，因此用作持久数据。
4、作用域不同：cookie在所有同源窗口中都是共享的；session不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中也都是共享的。

PS.Web Storage带来的好处：
>>减少流量：数据保存在本地后，就可以避免再向服务器请求数据，减少不必要的数据请求。
>>快速显示：从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得立即显示，性能好。
>>临时存储：当数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃，这时使用session非常方便。

>>更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

5.你对H5C3熟悉吗？有做过什么东西（H5C3新属性新功能举例）
☆H5新标签->
☆语义标签：让结构更清晰明了
<article>定义文章</article>、<aside>定义文章侧边栏</aside>、<nav>定义导航</nav>、
   <header>头部</header>、<section>定义文档中的区段区域</section>、<footer>尾部</footer>
☆功能标签：减少插件使用（flash）
<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>
<audio src="">定义音频</audio>、<mark>标记</mark>、<iframe src="" frameborder="0">内嵌网页框架 </iframe>
<canvas>定义图形提供画布</canvas>
☆媒体查询：可以根据不同屏幕尺寸，动态的修改网页布局以及样式，是响应式网站不可缺少的一部分
   only 可以省略多个条件用and相连
   @media only screen and (min-width:500px) and (max-width:700px){......}
link: <link rel="stylesheet" href="" media="screen and (min-width:500px) and (max-width:700px)">
☆做过什么：使用video标签自定义播放器；流式布局和媒体查询结合实现响应式布局

☆C3->
   ☆实现圆角border-radius；阴影box-shadow；多背景rgba；渐变gradient；文字特效text-shadow；
   ☆旋转transform；过渡transition；keyframes和animation
   ☆做过什么：实现动画效果，例如轮播图的无缝切换，还有chrome浏览器设置最小字体小于12px的问题，
   例如6px:webkit-transform：scale（0.5）

6.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?浏览器兼容性你是怎么做的？
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，现已改用Blink内核
Chrome:Blink(基于webkit)
浏览器兼容问题确实是一个开发过程中必然遇到的麻烦问题，所以我一般会把遇到的问题都记录下来进行总结，
只要遇到了兼容问题都可以直接找到解决方法。那我就说一下比较常遇到的几个问题吧：
css:☆内部盒模型超出父级时，父级被撑大
解决方法：父标签使用overflow:hidden
　　☆超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了
　　　解决方法：改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
js: ☆innerText 和 innerContent
1）innerText 和 innerContent 的作用相同
2）innerText IE8之前的浏览器支持
3）innerContent 老版本的Firefox支持
4）新版本的浏览器两种方式都支持
// 老版本浏览器兼容 innerText 和 innerContent
if (element.textContent) {
return element.textContent ;
} else {
return element.innerText;
}
☆获取兄弟节点/元素的兼容性问题
1）兄弟节点，所有浏览器都支持
①nextSibling 下一个兄弟节点，可能是非元素节点；会获取到文本节点
②previousSibling 上一个兄弟节点，可能是非元素节点；会获取到文本节点
2）兄弟元素，IE8以前不支持
①previousElementSibling 获取上一个紧邻的兄弟元素，会忽略空白
②nextElementSibling 获取下一个紧邻的兄弟元素，会忽略空白

　　　//兼容浏览器// 获取下一个紧邻的兄弟元素
　　　function getNextElement(element) {
　　　 // 能力检测
　　　if(element.nextElementSibling) {
　　　 return element.nextElementSibling;
　　　} else {
　　　var node = element.nextSibling;
　　　while(node && node.nodeType !== 1) {
　　　 node = node.nextibling;
　　　}
　　　return node;
　　　}
　　　}

7.jQuery里的on、live、bind的区别
bind：不能给动态创建的元素绑定事件；浪费资源，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序
on:兼容zepto.js；jQuery1.7以后统一用on
live()方法只能够绑定事件处理程序到document上，使用的过程中有性能问题，已经被弃用了
delegate()方法用来处理性能和响应动态添加元素的时候是很有效的，但是从.bind()更改到.delegate()比较麻烦
jQuery1.7之后的版本中.on()方法主要是可以实现.bind() .live() 甚至 .delegate()的功能
所以建议使用.on()方法。

8.jQuery里的链式编程的原理
   原理：return this；通过对象上的方法最后 return this 把对象再返回回来，对象就可以继续调用方法，就可以链式操作了
   好处：
   代码更精简。链式操作能大大精简代码量，多项操作一行代码一气呵成，搞定
优化性能。使用链式操作，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。