2018最新Web前端经典面试试题及答案
2018最新Web前端经典面试试题及答案
1、Javascript中的定时器有哪些?他们的区别及用法是什么?
setTimeout 只执行一次
setInterval 会一直重复执行
2、请描述一下 cookies sessionStorage和localstorage区别
相同点: 都存储在客户端。
不同点:
- 存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。 - 有效时间
· localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭 - 数据与服务器之间的交互方式·
· cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
3. 阐述清楚浮动的几种方式(常见问题)
-
父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 -
父级div定义 overflow:hidden 原理:
必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持 -
结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
4. 一个200*200的div在不同分辨率屏幕上下左右居中,用css实现
div{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
z-index: 1000;
}
5. 写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式:
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
h3{
height: 100px;
margin: 20px 0 0;
}
#left,#right{
width: 200px;
height: 200px;
background-color: #ffe6b8;
position: absolute;
top: 120px;
}
#left{
left: 0px;
}
#right{
right: 0px;
}
#center{
margin: 2px 210px;
background-color: #eee;
height: 200px;
}
</style>
</head>
<body>
<h3>实现三列宽度自适应布局</h3>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>
</body>
6. 解释css sprites ,如何使用?
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片
7. 如何用原生js给一个按钮绑定两个onclick事件?
var btn=document.getElementById(‘btn’);
//事件监听 绑定多个事件
btn.addEventListener("click",hello1);
btn.addEventListener("click",hello2);
function hello1(){
alert("hello1");
}
function hello2(){
alert("hello2");
}
8.计算一个数组arr所有元素的和
<script type="text/javascript">
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i = 0; i <= arr1.length; i++) {
if (typeof(arr1[i])=="number") {
sum1+=arr1[i];
}
}
document.write(sum1);
document.write("<br>");
function sum2(arr){
var all=0;
for (var i = 0; i < arr.length; i++) {
if (typeof(arr[i])=="number") {
all+=arr[i];
}
}
return all;
}
document.write(sum2([1,2,3,4,5,6,8]));
</script>
11.编写一个方法去掉数组里面 重复的内容 var arr=[1,2,3,4,5,1,2,3]
一个数组去重的简单实现
var arr= ['abc','abcd','ss','2','d','t','2','ss','f','22','d'];
//定义一个新的数组
var s = [];
for (var i = 0; i < arr.length; i++) { //判断在s数组中是否存在,不存在则push到s数组中
if (s.indexOf(arr[i])==-1) {
s.push(arr[i]);
}
}
// document.write(s);
console.log(s)
//输出结果:["abc", "abcd", "ss", "2", "d", "t", "f", "22"]
方法二:用sort() 然后相邻比较也可以实现
12.document.write和innerHTML的区别:
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。innerHTML将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。
13.ajax的步骤
什么是ajax?
ajax(异步javascript xml) 能够刷新局加粗样式部网页数据而不是重新加载整个网页。
如何使用ajax?
第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();
XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {// 针对浏览器,比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数
14.xml和json的区别,请用四个词语来形容
-
JSON相对于XML来讲,数据的体积小,传递的速度更快些
-
JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互
-
XML对数据描述性比较好;
-
JSON的速度要远远快于XML
15.box-sizing常用的属性有哪些?分别有什么作用?
属性值
- box-sizing:content-box
- box-sizing:border-box
- box-sizing:inherit
content-box
- 这是box-sizing的默认属性值
- 是CSS2.1中规定的宽度高度的显示行为
- 在CSS中定义的宽度和高度就对应到元素的内容框
- 在CSS中定义的宽度和高度之外绘制元素的内边距和边框
border-box
- 在CSS中微元素设定的宽度和高度就决定了元素的边框盒
- 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制
- CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
17.css选择器有哪些,选择器的权重的优先级
一、选择器类型
- ID #id
- class .class
- 标签 p
- 通用 *
- 属性 [type=“text”]
- 伪类 :hover
- 伪元素 ::first-line
- 子选择器、相邻选择器
二、权重计算规则
- 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为0100。
- 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值。