2018最新Web前端经典面试试题及答案

最新推荐文章于 2022-05-20 23:07:27 发布

dq_095

最新推荐文章于 2022-05-20 23:07:27 发布

阅读量1k

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/qq_37968920/article/details/82958822

版权

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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函数