三七互娱前端面试题

最新推荐文章于 2022-04-28 08:39:18 发布

水势年华

最新推荐文章于 2022-04-28 08:39:18 发布

阅读量3.4k

点赞数 1

分类专栏：面试题文章标签：面试

本文链接：https://blog.csdn.net/ctt08225/article/details/88255411

版权

面试题专栏收录该内容

7 篇文章 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 事件来实现。

水势年华

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
三七互娱前端面试题

1、用js写出一个冒泡排序算法。解析：1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。　　　2.第一轮的时候最后一个元素应该是最大的一个。　　　3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。functionbubbleSort(array){varlen=array.length;...
复制链接

扫一扫

专栏目录