三七互娱前端面试题

1、用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);

 

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

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

优化原则:

①避免使用通配规则*{}

②尽量少直接对标签进行选择,而是class

③要知道继承这个东西, 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复编写规则

④尽量少的去使用后代选择器,降低选择器的权重值  后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素

⑤不要去用标签限定ID或者类选择符

3、使用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>

<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="installdialog.jpg"/>
</figure> 
    
    <footer>
        <p><a href="https://i.cnblogs.com/">https://i.cnblogs.com/</a><p>
    </footer>
</body>
</html>

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、创建子类Child,使用原型和构造函数的方式继承父类People的方法,并调用say函数说出姓名和年龄。

父类:

function People(name,age){
     this.name=name;
     this.age=age;
     this.say=function(){
         console.log("我的名字是:"+this.name+"我今年"+this.age+"岁!");
     };
}
复制代码

原型继承:

function Child(name, age){
    this.name = name;
    this.age = age;
}
Child.prototype = new People();
var child = new Child('Rainy', 20);
child.say()
复制代码

构造函数继承:

function Child(name, age){
    People.call(this)
    this.name = name;
    this.age = age;
}
var child = new Child('Rainy', 20);
child.say()
复制代码

组合继承:

function Child(name, age){
    People.call(this);
    this.name = name;
    this.age = age;
}
Child.prototype = People.prototype;
var child = new Child('Rainy', 20);
child.say()
复制代码

组合继承优化:

function Child(name, age){
    People.call(this);
    this.name = name;
    this.age = age;
}
Child.prototype = Object.create(People.prototype);
Child.prototype.constructor = Child;
var child = new Child('Rainy', 20);
child.say()
复制代码

6、2016-12-12类型的日期格式校验正则表达式

var r=new RegExp("^[1-2]\\d{3}-(0?[1-9]||1[0-2])-(0?[1-9]||[1-2][1-9]||3[0-1])$)")

r.test('2013-23-12')

var str = '9999-12-23'; 
if(str.match(/^((\d\d\d\d))-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/)) { 
alert('是日期'); 
} else { 
alert('不是日期'); 
} 

7、使用ajax(可使用jQuery框架,若使用其他框架请注明)写一个跨域异步获取JSON数据方案;说说能否使用JS进行跨域异步post数据

$.ajax
        ({
            
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            dataType: "html",
            url: "http://www.*****.com",  //这里是网址
            success:function(data){alert(data);},
            timeout:30000, 
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
            }
        });

8、请描述zepto touch模块的移动事件?click与tap的区别?tap底层是对哪些事件的封装?

如果手指移动屏幕超过30像素,则触发相应的滑动事件,swipeLeft, swipeRight, swipeUp, swipeDown

一、click 和 tap 比较

两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件。

singleTap和doubleTap 分别代表单次点击和双次点击。

二、关于tap的点透处理

在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件。

tap 事件相当于 pc 浏览器中的 click 效果,虽然在触屏设备上 click 事件仍然可用,但是在很多设备上,click 会存在一些延迟,如果想要快速响应的 “click” 事件,需要借助 touch 事件来实现。

 

 

 

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值