当前位置:
首页 > 解决方案 > 前端经典面试题.docx
前端经典面试题.docx
- 文档编号:24998210
- 上传时间:2023-06-03
- 格式:DOCX
- 页数:57
- 大小:40.26KB
前端经典面试题.docx
《前端经典面试题.docx》由会员分享,可在线阅读,更多相关《前端经典面试题.docx(57页珍藏版)》请在冰豆网上搜索。
![前端经典面试题.docx](https://file1.bdocx.com/fileroot1/2023-6/3/abeb1381-c648-4f56-a333-29e77d5a4505/abeb1381-c648-4f56-a333-29e77d5a45051.gif)
前端经典面试题
1,html和xml有什么差别
html是超文本标志语言xml是可扩展标志语言
html语法宽松,xml语法谨慎
html使用固有标志,xml没有固有标志
html标签预约义,xml标签可扩展,可定义
html是用来显示数据的,xml是用来描绘和储存数据的
2,css有哪几种选择器权重的优先级
第一种为属性选择器
第二种为id选择器
第三种为class选择器
第四种为伪类选择器
第五种是后辈选择器
第六种是标签选择器
第七种是通用选择器
第八种是伪元素选择器
1.第一等:
代表内联款式,如:
style=””,权值为1000。
2.第二等:
代表ID选择器,如:
#content,权值为0100。
3.第三等:
代表类,伪类和属性选择器,如.content,权值为0010。
4.
第四等:
代表种类选择器和伪元素选择器,如
divp,权值为0001。
5.
通配符、子选择器、相邻选择器等的。
如
*、>、+,权值为0000。
6.继承的款式没有权值。
3,网页有哪几部分构成
构造层:
html
表示层:
css
行为层:
js和dom
4,一个200*200的div在不同分辨率屏幕上下左右居中,
用css实现
Div{
position
:
absolute;
width:
200px;
height:
200px;
top:
50%;
left:
50%;
margin-top
:
-100px;
margin-left
:
-100px;
}
5,
论述清楚浮动的几种方式
第一种
父级div定义高度height
适合高度固定的布局
第二种
父级div定义overflow
:
hidden
第三种
结尾处加空标签clear
:
both让父级自动获得高度
第四种
父级div定义伪类:
after
和zoom
6,
解说csssprites
,如何使用
CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的
“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position能够用数字能精确的定位出背景图片的地点。
CSSSprites为一些大型的网站节俭了带宽,让提升了用户的加载速度和用户体验,不需要
加载更多的图片
7,如何用原生js给一个按钮绑定两个onclick事件
Varbtn1=document.getElementsById(“btn”);
(“click”,”hello1);
(“click”,”hello2);
functionhello1(){
alert(“hello1”);
}
functionhello2(){
alert(“hello2”);
}
8,拖曳会用到哪些事件
Dragstart
Dragenter
Dragover
Dragleave
Drag
Drop
Dragend
9,请列举jQuery中选择器
1,基本选择器
ID,class,元素之类的
2,层级选择器
返回的是jQuery对象才能够进行的链式操作
如后辈元素,子元素,兄弟元素,相邻元素
3,过滤选择器
基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器
10,JavaScript中有哪些准时器,他们的差别和用法是什么
SetTimeout只会履行一次
SetInterval会向来重复履行
方式都为:
settimeout(函数,时间)
11,请描绘一下cookiessessionstorage和localstorage
差别
同样点:
都储藏在客户端上
不同点:
1储藏大小
Cookies数据大小不可以超出4k
Sessionstorage和Localstorage
比
cookies
大,能够达到
5m或更多
2有效时间
Localstorage储藏长久数据,阅读器封闭后也不会丢掉,除非主动删除数据
Sessionstorage数据在封闭旅行器以后自动删除
Cookies设置的cookies过期时间以前向来有效,即便窗口和旅行器封闭。
3数据与服务器之间的交互方式
Cookies
的数据会自动的传达到服务器,服务器端也能够写
cookies
到客户端
Sessionstorage
和
localstorage
不会上传到服务器,仅在当地保存
12,计算一个数组arr所有元素的和
alue;来获得输入框中的值
functionsum2(){
vararr1=[1,2,3,4,5,6,7,8,9];
varsum1=0;
for(vari=0;i<=;i++){
if(typeofarr1[i]=="number"){
sum1+=arr1[i];
}
}
(sum1);
}
13,编写一个方法去掉数组里的重复内容var
arr=[1,2,3,4,5,1,2,3]
functionarr1(){
vararr2=[1,2,3,4,5,1,2,3];
vars=[];
for(i=0;i<;i++){
if(arr2[i])==-1){
(arr2[i]);
}
}
(s);
}
14,和innerHTML的差别是什么
是直接写入到页面的内容流,假如以前没有调用。
那么阅读器会自动调用open,页面被重
写
innerHTML将内容写入某个DOM节点,不会致使页面所有重绘。
精确。
15,ajax的步骤
Ajax
异步
JavaScript
和
xml
能够局部刷新网页数据而不是从头加载整个网页
第一步,创立
xmlhttprequest
对象,
varxmlhttp=newXmlHTTPrequest
();
Xmlhttprequest对象用来和服务器互换数据
Varxhttp;
If{
esize(function(){
$(".myblock").css({
position:
"absolute",
left:
($(window).width()-$(".myblock").outerWidth())/2,
top:
$(".myblock").outerHeight())/2
($(window).height()
});
-
});
别的在页面载入时,就需要调用resize()方法
$(function(){
$(window).resize();
});
19,三个盒子,左右定宽,中间自适应的方法有几个
第一种方法:
左右采纳浮动中间采纳margin-left和margin-right的方法
代码:
100%;margin:
0auto;">
200px;float:
right;background-color:
#000000;">11
200px;float:
left;background-color:
red;">33
200px;margin-right:
200px;background-color:
green;">22
第二种方法:
左右采纳绝对定位,中间采纳margin-left和margin-right
代码:
100%;margin:
0auto;">
200px;position:
absolute;left:
0px;background-color:
#000000;">11
200px;position:
absolute;right:
0px;background-color:
red;">33
200px;margin-right:
200px;background-color:
green;">22
第三种方法负margin值
maincontent
leftcontent
#main{
float:
left;
width:
100%;
}
#mainContainer{
margin:
0230px;
height:
200px;
background:
green;
}
#left{
float:
left;
margin-left:
-100%;
width:
230px}
#right{
float:
left;
margin-left:
-230px;
width:
230px;
}
#left.inner,
#right.inner{
background:
orange;
margin:
010px;
height:
200px;
}
20,js有几种数据种类此中基本数据种类有哪些
基本数据种类有Boolean,undefined,null,number,string
应用种类有object,array,function
21,undefined和null的差别
Null代表空值,代表一个空对象指针,一个特别的对象值
Undefined是不决义,种类也是undefined
22,http和https有什么差别如何灵巧运用
Http是http运转在TCP之上,传输内容是明文,客户端和服务器没法考证对方身份。
HTTPS是http运转在SSL/tls之上,SSL/tls运转在TCP上,所有内容都是经过加密。
加密
采纳对称加密,可是秘钥用服务器证书进行非对称加密。
服务器和客户端都是能够相互考证
身份。
23,常有的Http状态码
2开头,恳求成功,表示成功办理了恳求的状态代码
3开头,恳求重定向,表示达成恳求,需要进一步操作,一般是重定向
4开头,恳求错误,表示恳求犯错,阻碍了服务器的办理
5开头,这些状态码表示服务器在试试办理恳求时发生内部错误,服务器自己犯错而不是请
求犯错
24,如何进行网站性能的优化
原由:
用户角度加载速度提升,更好的交互体验
服务商角度减少页面恳求,降低带宽,节俭资源
方法:
1,JavaScript优化和打包
2,按需加载资源
3,在使用DOM操作库时用上array-ids
4,缓存
5,启用HTTP/2
6,应用性能剖析
7,使用负载平衡方案
8,同构
9,使用索引加速数据库查问
10,使用更快的转译方案
11,防止因JavaScript和css的使用而堵塞衬着
12,图片编码优化
25,react和vue有哪些不同,谈谈你对这两个框架的见解
同样点:
都支持服务器衬着
都有virtualDOM,组件化开发,经过props参数进行父子组件数据的传达,都实
现了webComponent规范
数据驱动视图
都支持native方案,react的reactnative和vue的weex
不同点:
react严格上只针对MVC的view层,vue则是mvvm模式
VirtualDOM不同样,vue会追踪每一个组件的依靠关系,不需要从头衬着整个组
件树,而对于react来说,每次应用状态被改变,所有组件都会被从头衬着,所以react
需要shouldComponentUPdate这个生命周期函数来进行控制。
组件的写法不同样。
。
。
数据绑定,vue是双向的,react是单向的
State对象在react应用中不可以变的,需要使用setstate方法更新状态,在vue
中state对象对象不是一定的,数据由data属性在vue对象中管理
26,什么是mvvmmvc有什么差别,原理
1,MVC(model-view-controller)
MVC是比较直观的架构模式,用户模式->view(负责接收用户的操作输
入)->controller(业务逻辑办理)->view(将结果反应给view)
2,MVVM(model-view-viewmodel)
将”数据模型数据双向绑定”的思想作为中心,所以model和view没有什么关系,之
后痛过viewmodel进行交互,而model和viewmodel之间的交互是双向的,所以数据的
视图的变化会同时改正数据源,而数据源的数据变化也会马上反响view。
27,px和em的差别
Px表示像素,是一个绝对单位,不会因为其余元素而改变
Em表示相对于父元素的字体大小,em是相对单位,会遇到其余元素的影响
28,优雅降级和渐进加强
渐进加强(向上兼容):
一开始就针对低版本阅读器进行修建界面,达成基本功能,而后在
针对高级阅读器进行成效,交互,追加功能达到更好的体验
优雅降级(向下兼容):
一开始就建立站点的完好功能,而后针对阅读器测试和修复。
29,eval()的作用
把字符串参数分析成JS代码并运转,并返回履行的结果;
比如:
eval(
“2+3”);var
ul
=
('parentUl');
2.
=function
(event)
{
3.
vare
=
event||,
4.
source=
||
;
if
=="li")
{
alert;
7.
}
8.
stopPropagation(e);
};
10.
function
addElement()
{
11.
var
li
=
('li');
12.
="我是新孩子";
13.
(li);
14.
}
34,css款式覆盖规则
规则一:
因为继承而发生款式矛盾时,近来先人获胜(就近原则);
规则二:
继承款式和直接指定的款式矛盾时,直接指定的款式获胜
规则三:
直接指定款式发生矛盾时,款式权值高的获胜;
规则四:
款式权值相等时,后者获胜。
规则五:
!
important的款式不被覆盖。
35,请简要描绘margin重合问题以及解决方式
1,同向margin重叠
这时候重叠以后的margin值由发生重叠两片的最大值决定;假如此中一个出现负值,则由
最大的正边距减去绝对值最大的负边距,
假如没有最大正边距,则由0减去绝对值最大的负
边距。
解决方法:
(1)
在最外层的div中加入overflow
:
hidden;zoom:
1;(zoom这个属性是ie
专有属
性,除了设置或许检索对象的缩放比率以外,
它还有能够触发ie的haslayout
属性,
消除浮动,消除
margin重叠等作用。
)
(2)
在最外层加入
padding:
1px;
(3)
在最外层加入:
border:
1pxsolid#000000;
2,异向重叠问题:
Float:
left(ie6专属,或解决ie8+等阅读器的同向重叠问题)
36,position的值,relative\absolute\fixed分别相对于
进行谁定位
Absolute:
绝对定位相对于近来一级
Fixed:
绝对定位相对于阅读器窗口或frame进行定位
Relative:
相对定位相对于其在一般流的地点
Static:
默认值没有定位
Sticky:
粘性定位文档地点依据正常文档流计算得出
37,什么是闭包,如何使用,为何使用
闭包就是在函数内定义一个函数。
长处:
能够读取函数内部的变量这些变量的值一直保存在内存中
弊端:
内存耗费大且简单造成内存泄露闭包会在父函数外面,改变父函数内部变量的值
38,请解说一下jsonp的工作原理,以及它为何不是真实
的ajax。
Jsonp是一个简单的跨域方式;HTML中的script标签能够加载并履行其余域的javascript,
于是我们能够经过script标志来动向加载其余域的资源
JSONP易于实现,可是也会存在一些安全隐患,假如第三方的脚本任意地履行,那么它便可
以窜改页面内容,截获敏感数据。
可是在受相信的两方传达数据,JSONP是特别适合的选择。
AJAX是不跨域的,而JSONP是一个是跨域的,还有就是两者接收参数形式不同样
39,请解说一下JavaScript的同源政策。
同源政策规定跨域之间的脚本是隔绝的,一个域的脚本不可以接见和操作此外一个域的绝大部
分属性和方法。
当两个域拥有同样的协议,同样的端口,同样的host,那么我们就能够认
为是同样的域。
40,如何增添,移除,挪动,复制,创立和查找节点
1,创立新节点
Createdocumentfragment()ind("click",function(e){});
(2),live
定义和用法:
主要用于给选择到的元素上绑定特定事件种类的监听函数;
语法:
live(type,[data],fn);
特色:
(1)、live方法并无将监听器绑定到自己(this)身上,而是绑定到了上了。
(2)、live正是利用了事件拜托体制来达成事件的监听办理,把节点的办理拜托给了
document,新增添的元素不用再绑定一次监听器。
(3)、使用live()方法但却只好放在直接选择的元素后边,不可以在层级比较深,连缀的DOM
遍历方法后边使用,即$(“ul”").live...能够,但$("body").find("ul").live...不可以;
实比以下:
$(document).on("click","#memberslia",function(e){});
(3),delegate
定义和用法:
将监听事件绑定在就近的父级元素上
语法:
delegate(selector,type,[data],fn)
特色:
(1)、选择就近的父级元素,因为事件能够更快的冒泡上去,能够在第一时间进行办理。
(2)、更精确的小范围使用事件代理,性能优于
.live()
。
能够用在动向增添的元素上。
实比以下:
$("#info_table").delegate("td","click",function(){/*
$("table").find("#info").delegate("td","click",function(){/*
显示更多信息*/});
显示更多信息
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
前端
经典
试题
![提示](https://static.bdocx.com/images/bang_tan.gif)
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。