前端经典面试题.docx
- 文档编号:25628222
- 上传时间:2023-06-10
- 格式:DOCX
- 页数:19
- 大小:25.23KB
前端经典面试题.docx
《前端经典面试题.docx》由会员分享,可在线阅读,更多相关《前端经典面试题.docx(19页珍藏版)》请在冰豆网上搜索。
前端经典面试题
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,编写一个方法去掉数组里的重复内容vararr=[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:
($(window).height()-$(".myblock").outerHeight())/2 });
});
此外在页面载入时,就需要调用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
right
#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. var e = 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(){/*显示更多信息*/});
(4),on
定义和用法:
将监听事件绑定到指定元素上。
语法:
on(type,[selector],[data],fn)
实例如下:
$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。
说明:
on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。
总结:
.bind(),.live(),.delegate(),.on()分别对应的相反事件为:
.unbind(),.die(),.undelegate(),.off()
43,浏览器的内核分别是什么
IE:
trident内核
Firefox:
gecko内核
Safari:
webkit内核
Opera:
现在blink内核
Chrome:
blink内核
44,浏览器是如何渲染画面的
渲染的流程如下:
1,解析HTML文件,创建dom树
自上而下,遇到任何样式和脚本都会阻塞
2,解析css。
优先级:
浏览器默认设置<用户设置<外部样式<内联样式
3,将css和DOM合并,构建渲染树
4,布局和绘制,重绘和重排
45,css3新增了很多属性,一起分析一下新增的属性:
边框:
· border-radius:
CSS3圆角边框。
在CSS2中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在CSS3中,创建圆角是非常容易的,在CSS3中,border-radius属性用于创建圆角。
border:
1pxsolid;
· box-shadow:
CSS3边框阴影。
在CSS3中,box-shadow用于向方框添加阴影。
box-shadow:
10px10px5px#888888;
· border-image:
CSS3边框图片。
通过CSS3的border-image属性,您可以使用图片来创建边框。
border-image:
url3030round;
背景:
· background-size:
属性规定背景图片的尺寸。
在CSS3之前,背景图片的尺寸是由图片的实际尺寸决定的。
在CSS3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。
如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
· background-origin:
属性规定背景图片的定位区域。
背景图片可以放置于content-box、padding-box或border-box区域。
文字效果:
· text-shadow:
在CSS3中,text-shadow可向文本应用阴影。
text-shadow:
5px5px5px#FFFFFF;
· word-wrap:
单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行:
p{word-wrap:
break-word;}
2D转换:
transform:
通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
· translate():
元素从其当前位置移动,根据给定的left(x坐标)和top(y坐标)位置参数:
transform:
translate(50px,100px);值translate(50px,100px)把元素从左侧移动50像素,从顶端移动100像素。
· rotate():
元素顺时针旋转给定的角度。
允许负值,元素将逆时针旋转。
transform:
rotate(30deg);值rotate(30deg)把元素顺时针旋转30度。
· scale():
元素的尺寸会增加或减少,根据给定的宽度(X轴)和高度(Y轴)参数:
transform:
scale(2,4);值scale(2,4)把宽度转换为原始尺寸的2倍,把
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
前端
经典
试题
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。