前端常见面试题

最新推荐文章于 2023-07-25 13:34:49 发布

Rattenking

最新推荐文章于 2023-07-25 13:34:49 发布

阅读量692

点赞数

分类专栏：【CSS和HTML】【JavaScript】 Rattenking 的前端笔记文章标签：常见的前端面试题

Rattenking 的前端笔记同时被 3 个专栏收录

97 篇文章 8 订阅

订阅专栏

【JavaScript】

41 篇文章 2 订阅

订阅专栏

【CSS和HTML】

10 篇文章 0 订阅

订阅专栏

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2、描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

3、超链接访问过后hover样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序:
L-V-H-A（link,visited,hover,active）

4、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：
和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

5、浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

6、什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以
结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成
的外边距称为折叠外边距。

折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个
相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一
正一负时，折叠结果是两者的相加的和。

7、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height 水平方向：letter-spacing

8、关于letter-spacing的妙用知道有哪些么？
可以用于消除inline-block元素间的换行符空格间隙问题。

word-spacing 属性增加或减少单词间的空白（即字间隔）。
letter-spacing 属性增加或减少字符间的空白（字符间距）。

9、用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

方法一：
var iArray = [];
function getRandom(istart, iend){
var iChoice = iend - istart +1; //确定取值区间
return Math.floor(Math.random() * iChoice + istart; //随机取值
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100)); //随机取十个值放入数组
}
iArray.sort(function(a,b){return a>b;});

方法二：
var arr=[];
for(i=0;i<10;i++){
var r=Math.floor(Math.random()*91+10);
arr.push(r);
}
alert(arr.sort());//升序排列
alert(arr.sort(function(a,b){return a>b;}));//升序排列
alert(arr.sort(function(a,b){return a<b;})));//降序排列

10、事件的三个阶段

分别是捕获，目标，冒泡阶段，低版本IE不支持捕获阶段

11、事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，
利用冒泡的原理，把事件加到父级上，触发执行效果
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确

12、组织冒泡事件IEwindow.event.cancelBubble = true

在w3c模型中你必须调用事件的stopPropagation()方法

13、事件绑定 IE的attachEvent函数替代。
非IE浏览器中使用W3C的addEventListener
解除绑定事件:detachEvent()
removeEventListener()

14、事件代理/委托优点
可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
(事件代理的应用常用应该仅限于上述需求下，如果把所有事件都用代理就可能会出现事
件误判，即本不应用触发事件的被绑上了事件，
事实上我见过有人把页面里的所有事件都绑定到document用委托的，
这是极其不明智的做法。)
(之后对方可能要求你手写原生js【实现事件代理】，并要求兼容浏览器，其实就是考核
对事件对象e的了解程度，以及在IE下对应的属性名。其实此时如果你说就是用
target，currentTarget，
以及IE下的srcElement和this，基本就可以略过了。)

15、当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：<div οnclick=”test()”></div>
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
　　那么问题来了，Javascript的事件流模型都有什么？

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

16、停止事件冒泡
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;

17、阻止浏览器的默认行为
JavaScript代码：
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;

18、跨域
(这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，
比如用ajax向一个不同的域请求数据，或者通过js获取页面中
不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，
都被当作是不同的域。)
首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制
JSONP : JSON with Padding
用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进(动态创建script标签,执行回调函数)
所以可以把需要跨域的请求改成用script脚本加载即可，服务器返回执行字符串，
但是这个字符串是在window全局作用域下执行的，你需要把他返回到你的代码的作用域内，
这里就需要临时创建一个全局的回调函数，并把到传到后台，最后再整合实际要请求的数组，
返回给前端，让浏览器直接调用，用回调的形式回到你的原代码流程中。

19、css垂直居中方法(3中方法)

方法一：

position:absolute;

top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;

方法二：推荐使用

position: absolute;

top: 50%;
left: 50%;
height: 40px;
width: 40px;
background: pink;
margin-top: -20px;

margin-left: -20px;

方法三：给parent加

display: -moz-box;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-moz-box-align: center;
-moz-box-pack: center;

20、清除浮动的几种方式，各自的优缺点

方法一：

加一个空标签<div style="clear:both"></div>

(理论上能清楚任何标签，增加无意义的标签)

方法二：

给父级加一个overflow:hidden(auto,zoom:1)

定义CSS属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容IE6，也可以用width:100%。

(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)

方法三：推荐使用(用afert伪元素清除浮动用于非IE浏览器)
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;

}

方法四：pc端推荐使用（非PC端不方便）

直接给父元素设置宽高

21、什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content）
，元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。
这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的
区域或区域。4个部分一起构成了css中元素的盒模型。

22、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

23、简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，
用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，
img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，
直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向
资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部

24、什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack

_marging \\IE 6
+margin \\IE 7
Marging:0 auto \9 所有Ie
Margin \0 \\IE 8

25、简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，
那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，
不管其他进程的状态。当有消息返回时系统会通知进程进行处理，
这样可以提高执行的效率。

26、px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。
em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em, 10px=0.625em

27、怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

28、如何消除一个数组里面重复的元素？

方法一：

console.log(arr.quchong());

29、在js中，数组是特殊的对象，凡是对象有的性质，数组都有，数组表示有序数据的集合，而对象表示无序数据的集合。
那伪数组是什么呢，当然它也是对象，伪数组一般具有以下特点：
按索引方式存储数据；
具有length属性；
没有数组的push、shift、pop等方法;
function的arguments对象，还有getElementsByTagName、ele.childNodes等返回的NodeList对象，或者自定义的某些对象，这些都可以是伪数组。
我们可以通过以下几种方式将伪数组转换为标准数组：
使用Array.prototype.slice.call();
方法一：
Array.prototype.slice.call({
0:"likeke",
1:12,
2:true,
length:3
});
//["likeke", 12, true]
使用[].slice.call()，了解js原型链的都知道，实际上这种方法和第一中方法是一样的，但上面第一种方式相对效率更高。
Js代码收藏代码
[].slice.call({
0:"likeke",
1:12,
2:true,
length:3
});
//["likeke", 12, true]
使用ES6中Array.from方法;
方法二：
Array.from({
0:"lk",
1:12,
2:2013,
3:"长安大学",
length:4
});

//["lk", 12, 2013, "长安大学"]

方法三：

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，
但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，
还有像调用getElementsByTagName,document.childNodes之类的,
它们都返回NodeList对象都属于伪数组。可以使用
Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args = Array.prototype.slice.call(arguments);
//为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
}

30、请描述一下cookies，sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有
在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不

会过期的。

web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，
另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，
不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也
是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存
在，而Web Storage仅仅是为了在本地“存储”数据而生

31、写一个function，清除字符串前后的空格。（兼容所有浏览器）
function trim(str){
if(str & typeof str ==="string"){
return str.replace(/(^s*)|(s*)$/g,""),
}
}
//去左空格;
function ltrim(s){
return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s){
return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s){
return s.replace(/(^\s*)|(\s*$)/g, "");
}

32、什么是AJAX
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

33、写出几种IE6 BUG的解决方法
1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline -3px
3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6
默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支持!importantz

34、img标签上title与alt属性的区别是什么?
Alt 当图片不显示是用文字代表。
Title 为该属性提供信息

35、描述css reset的作用和用途。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

36、解释css sprites，如何使用。
Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

37、浏览器标准模式和怪异模式之间的区别是什么?
盒子模型渲染模式的不同
使用window.top.document.compatMode可显示为什么模式

38、你如何对网站的文件和资源进行优化?期待的解决方案包括
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

39、什么是语义化的HTML?
直观的认识标签对于搜索引擎的抓取有好处
语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
　　1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
　　2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
　　3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
　　4.支持多终端设备的浏览器渲染

40、事件绑定和普通事件有什么区别
事件绑定就是针对dom元素的事件，绑定在dom元素上
普通事件即为非针对dom元素的事件

41、IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

42、IE和标准下有哪些兼容性的写法
var oEvent = ev||window.event;
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

43、ajax请求的时候get 和post方式的区别
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

44、call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

45、this 关键字的指向
obj.foo() == obj //方法调用模式,this指向obj
foo() == window; //函数调用模式,this指向window
new obj.foo() == obj //构造器调用模式, this指向新建立对象