三七互娱前端面试题

朴灿烈づ我的快乐病毒、 2022-03-10 21:26 996阅读 0赞

**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、前端页面的优化方法有哪些？有什么优化工具？**

优化方法：

１、减少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 事件来实现。

## ##