三七互娱2018年秋招Web前端笔试题回忆

时间 2019-11-19

标签三七 2018年 web 前端笔试回忆栏目 HTML 繁體版

原文原文链接

依稀记得个大概，顺序有可能不正确，就当作记录吧，顺便查缺补漏。javascript

一、涉及Vue.js。具体的忘了。css

二、用js写出一个冒泡排序算法。html

解析：1.比较相邻的两个元素，若是前一个比后一个大，则交换位置。前端

　　　2.第一轮的时候最后一个元素应该是最大的一个。java

　　　3.按照步骤一的方法进行相邻两个元素的比较，这个时候因为最后一个元素已是最大的了，因此最后一个元素不用比较。ajax

function bubbleSort(array){
     var len=array.length;
     var temp;
     for(var i=0;i<len-1;i++){
         for(var j=0;j<len-1-i;j++){
              if(array[j]>array[j+1]){
                  temp=array[j];
                  array[j]=array[j+1];
                  array[j+1]=temp;
               }
         }

     }
    return array;
}

var arr=[3,6,2,9,10,32,1];
console.log(arr);
bubbleSort(arr);
console.log(arr);

三、CSS中的选择器的优先级是怎么样的？如何优化选择器？正则表达式

行内样式（权重为1000） > id选择器（权重为100） > class类选择器（权重为10） > 标签选择器（权重为1）算法

四、前端页面的优化方法有哪些？有什么优化工具？json

优化方法：跨域

１、减小Http请求，优化加载速度。

a、合并文件：将多个Script合成一个文件，将多个CSS文件合成一个文件；

b、使用“雪碧图”CSS SPrites将背景图整合到一张图片中，经过坐标来实现对背景进行定位；

c、减小DOM数量。

二、CSS：

a、避免使用CSS表达式；

b、避免使用@import引入css文件，使用link形式引入；

c、在头部head中引入CSS样式表文件。由于若是把CSS文件放在底部，大部分浏览器会现下载内容，可是不能显示出来，由于CSS在最底部。

三、Javascript

a、去除重复的脚本；

b、尽可能减小DOM的访问；

c、JS脚本文件在底部body以前或者以后引入；

d、将JS、CSS文件进行压缩，去除中间的换行和空格等无用内容，减少体积，且注意JS和CSS文件的个数。

四、图片部分

a、优化图片

b、不要使用HTML缩放图片，即不要在HTML中对图片进行设置高度和宽度；

c、使用小且能够存储的favicon.ico图标

五、cookies

a、给cookies减肥；

b、清除没必要要的cookies

c、保证cookies尽可能小。

优化工具：

五、使用HTML5写出一个页面，包含头部、页头、页脚、文字内容和图片。

<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <header>
        <h1>头部</h1>
    </header>
    
    <nav>
       <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
       </ul>
    </nav>
    
    <section>
        <h2>Content is loading……</h2>
         <article>
            <p>Writing something……</p>
         </article>
    </section>
    
    <footer>
        <p><a href="https://i.cnblogs.com/">https://i.cnblogs.com/</a><p>
    </footer>
</body>
</html>

六、建立子类Child，使用原型和构造函数的方式继承父类People的方法，并调用say函数说出姓名和年龄。

function People（name,age）{

this.name=name;

this.age=age;

this.say=function(){

alert("个人名字是:"+this.name+"我今年"+this.age+"岁！");

};

}

七、写出ajax（跨域使用框架，但需说明使用了何种框架）的跨域异步获取json数据的方法。可使用javascript进行跨域异步post数据吗？

var url="http://www.37.com";

$.ajax(function(){
    type:"get";
    url:"http://www.37.com";
    dataType:"jsonp";
    jsonp:"jsoncallback";
    success:function(data){
        if(data.errorCode){
            alert("查询失败，错误码为："+result.errorCode);
            return;
        }
        alert(data);
     }
     error:function(){
          alert("查询失败！");
     }
            
});

八、写出日期“2016-06-03”……的正则表达式（要写的挺多的，具体的记不清了）

九、给input添加以下样式（CSS3）：

背景为图片1.jpg，背景颜色为蓝色；长度200px;高度50px;文字居中显示，边框为5像素虚线黑色；边框为5像素圆角，文字阴影，模糊。

十、对数组testArray进行如下操做：

a、从前面删除一个数字；

b、从前面增长一个数字5；

c、给数组从小到大进行排序；

d、反转数组；

e、在数组61以后加入6二、6三、64

var testArray=[3,4,61,8,1];
testArray.shift();
testArray.unshift(5);
function compact(a,b){
 return a-b;
}
testArray.sort(compact);
testArray.reverse();
testArray.splice(testArray.indexOf(61)+1,0,62,63,64);

ps:如发现有误，欢迎指出，谢谢！