三七互娱前端笔试题

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

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

解析:1.比较相邻的两个元素,如果前一个比后一个大,则交换位置。

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

   3.按照步骤一的方法进行相邻两个元素的比较,这个时候由于最后一个元素已经是最大的了,所以最后一个元素不用比较。

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;
}<br><br>var arr=[3,6,2,9,10,32,1];<br>console.log(arr);<br>bubbleSort(arr);<br>console.log(arr);

3、CSS中的选择器的优先级是怎么样的?如何优化选择器?

行内样式(权重为1000) > id选择器(权重为100) > class类选择器 (权重为10) > 标签选择器(权重为1)

4、前端页面的优化方法有哪些?有什么优化工具?

优化方法:

1、减少Http请求,优化加载速度。

  a、合并文件:将多个Script合成一个文件,将多个CSS文件合成一个文件;

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

  c、减少DOM数量。

2、CSS:

  a、避免使用CSS表达式;

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

  c、在头部head中引入CSS样式表文件。因为如果把CSS文件放在底部,大部分浏览器会现下载内容,但是不能显示出来,因为CSS在最底部。

3、Javascript

 a、去除重复的脚本;

 b、尽量减少DOM的访问;

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

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

4、图片部分

 a、优化图片

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

 c、使用小且可以存储的favicon.ico图标

5、cookies

a、给cookies减肥;

b、清除不必要的cookies

c、保证cookies尽量小。

优化工具:

5、使用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>
        <article>
          <h1>Internet Explorer 9</h1>
          <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
        </article>
    </section>
 
    <figure id="fig2">
        <img alt="a picture for test" src="installdialog.jpg"/>
    </figure> 
    
    <footer>
        <p><a href="https://i.cnblogs.com/">https://i.cnblogs.com/</a><p>
    </footer>
</body>
</html>

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

function People(name,age){

 this.name=name;

 this.age=age;

 this.say=function(){

     alert("我的名字是:"+this.name+"我今年"+this.age+"岁!");

 };

}

7、写出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("查询失败!");
     }
            
});

8、写出日期“2016-06-03”……的正则表达式(要写的挺多的,具体的记不清了)

9、给input添加如下样式(CSS3):

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    input{
        width: 200px;
        height: 50px;
        text-align: center;
        border:5px dashed black;
        border-radius: 5px;
        background: blue url(http://p1.music.126.net/sgGJqe4_8_J94nNS2Gk2ug==/109951164796752979.jpg?imageView&quality=89);
        text-shadow: 5px 5px 3px red
    }
</style>
<body>  
    <input type="text" name="test">     
</body>
</html>

10、对数组testArray进行以下操作:

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

b、从前面增加一个数字5;

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

d、反转数组;

e、在数组61之后加入62、63、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);

原文地址:三七互娱2018年秋招Web前端笔试题回忆

猜你喜欢

转载自www.cnblogs.com/songsongblue/p/12486898.html