首页 > 代码库 > 58前端内推笔试2017（含答案）

58前端内推笔试2017（含答案）

2024-08-13 05:53:40   217人阅读

答案是自己写的，不保证对，希望大家有看到错的评论一下~

1.填空题
（1）获取随机数的方法：Math.random
（2）JS中奖一个变量前置强制改成浮点类型的方法：parseFloat(String)
（3）根据id获取元素的原生js方法：getElementById();
（4）将文档声明为HTML5文档类型，需要在文档头添加：<!DOCTYPE html>
（5）Chrome浏览器的私有样式前缀：-webkit-
（6）CSS3设置圆角的属性名：border-radius
（7）CSS中，#是根据id来选择元素的，.是根据类名来选择元素的。
（8）form标签特有的属性请列举三个：method、action、enctype、target
（9）正则表达式中，$是什么意思：结尾位置
（10）typeof ‘123‘返回：number
2.简答题
（1）自定义一个浏览器兼容的事件绑定方法需要注意哪些问题？(答案不确定)
     对以存在的事件绑定方法进行判断。
     能兼容各主流浏览器。
     IE中没有捕获阶段，只能处理冒泡阶段。
     IE里事件触发的顺序和标准浏览器相反（现在一致了）
（2）设计一个布局方案，使得页面在pc端和pad端显示为一行三列，在手机端为一列三行。
样式：
.parent-fix {
margin-left:-20px;
}
.parent {
display:table;
width:100%;
table-layout:fixed;
}
.column {
display:table-cell;
padding-left:20px;
}
@media screen and (max-width:320px){
.parent-fix {
margin-left: 0;
}
.parent {
display:block;
width:100%;
}
.column {
display:block;
padding-left:0;
}
}
结构：
     <div class="parent-fix">
         <div class="parent">
             <div class="column"></div>
             <div class="column"></div>
             <div class="column"></div>
          </div>
     </div>
（3）请解释JSONP的工作原理
    JSONP是处理跨域资源访问的。
    JSONP的原理是利用html页面中的script标签可跨域的原理，利用<script>标签向服务器端请求一段JS代码，
   然后，执行这段js代码，实现跨域的过程。
（4）display和position都有哪些值？分别列举一下这些值的用途？
   display：block/inline/inline-block /table/table-cell/none
   position: relative/absolute/fixed/static
   display:block;/*当前元素以块级形式显示，默认宽度为父元素，可设定宽高，换行显示*/
   display:inline;/*当前元素以行内形式显示，默认宽度为内容宽度，不可设宽高，同行显示*/
   display:inline-block;/*显示时，默认宽度为内容宽度，可设宽高，同行显示*/
   display:table;/*显示规则和block相同，但是样式为table的样式*/
   display:table-cell;/*以table 单元格的样式显示*/
   display:none;/*元素小时，位置也不占*/
   position:relative;/*当前元素被设为相对定位，元素在文档流中，百分比的参照物是元素本身*/
   position:absolute;/*当前元素被设为绝对定位，元素脱离文档流，定位参照物：第一个定位祖先/根元素*/
   position:fixed;/*当前元素被设为固定定位，默认宽度为内容宽度，脱离文档流，参照物是视窗*/ 
（5）地址栏输入一个地址后，输入回车，描述一下这是开始，浏览器做什么。
  1.在浏览器中输入要的网址：例如：facebook.com
  2.浏览器查找域名的IP地址
     导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：
     浏览器缓存--浏览器会缓存DNS记录一段时间。但操作系统没有告诉浏览器存储的时间，这样各个浏览器会存储各自的
     一个固定的时间（2分钟到30分钟不等）。
     系统缓存--如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便能获得系统缓存中      的记录。
     路由器缓存--接着，前面的查询请求发向路由器，它一般有自己的DNS缓存。
     ISP（互联网服务提供商） DNS缓存--接下来要检测的就是ISP的缓存DNS的服务器。在这一般都能找到相应的缓存记录。
     递归搜索--你的ISP的DNS服务器从根域名服务器开始进行递归搜索，从.com顶级域名服务器到facebook的域名服务器。一般DNS的缓存
中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
     但是，DNS有一点令人担忧，像wikipedia.org或者facebook.com这样的整个域名看上去就对应着一个单独的IP地址，还好有几种方法可以消除这个瓶颈：
    循环DNS：是DNS查找时返回多个IP时的解决方案。举例来说，facebook.com实际上就对应了4个IP地址。
    负载平衡器：是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能复杂平衡器。
   地理DNS根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。
  Anycast 是一个IP地址映射到多个物理主机的路由技术。美中不足，Anycast与TCP协议适应的不是很好，所以很少应用在那些方案中。
大多数DNS服务器使用Anycast来请求高效低延迟的DNS查找。
3.浏览器给web服务器发送一个HTTP请求
  因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从缓存中读取，所以，浏览器将把一个请求发送到Facebook所在的服务器：
4.facebook服务的永久重定向响应
5.浏览器跟踪重定向地址
6.服务器“处理”请求
7.服务器发回一个HTML响应
8.浏览器开始显示HTML
9.浏览器发送获取嵌入在HTML中的对象
10.浏览器发送异步（Ajax）请求
5.应用题
（1）创建一个js类，模拟实现方法的重载。
 function A(){
            this.a=null;
            this.b=null;
        }
        var pro = A.prototype;
        //模拟重载
        pro.add = function(){
            if(arguments.length==1){
                console.log(arguments[0]);
            }
            if(arguments.length==2){
                result = arguments[0]+arguments[1];
                console.log(result);
            }
        }
        var a = new A();
        a.add(1);
        a.add(1,2);
 
(2)JS中会有排序的需求，用jS实现一个标准的排序算法，对一个数字数组进行由小到大的排列。
var b = [2,3,8,3,1,5];
        sort1(b);
        console.log(b);
        function sort1(a){
            var i,j;
            for(i=0;i<a.length;i++){
                var temp;
                var flag=0;
                for(j=0;j<a.length;j++){
                    if(a[j]>a[j+1]){
                        temp = a[j+1];
                        a[j+1]=a[j];
                        a[j]=temp;
                        flag=1;
                    }
                }
                if(flag==0)break;
            }
            return a;
        }
 
4.编程题
用HTML、css和js魔力实现下拉框，使得下拉框在各个浏览器的样式和行为完全一致。说出你的设计方案，并且重点说明功能设计实现时要考虑的因素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p,ul {
            margin: 0;
        }
        ul {
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        .btn {
            border: 1px solid #000;
            width: 100px;
            text-align: center;
            margin-bottom: 0.5px;
            cursor: pointer;
            padding: 2px 0;
        }
        .down {
            width: 100px;
            border: 1px solid #000;
            text-align: center;
            display: block;
        }
 
        .l_sm {
            border: 1px solid grey;
            list-style: none;
            padding: 2px 0;
            cursor: pointer;
        }
        .l_sm:hover {
           
        }
    </style>
</head>
<body>
    <p class="btn" id="btn">点击</p>
    <ul class="down" id="show" >
        <li class="l_sm"><a href="http://www.mamicode.com/#">第一项</a></li>
        <li class="l_sm"><a href="http://www.mamicode.com/#">第二项</a></li>
        <li class="l_sm"><a href="http://www.mamicode.com/#">第三项</a></li>
        <li class="l_sm"><a href="http://www.mamicode.com/#">第四项</a></li>
    </ul>
    <script type="text/javascript">
    var btn = document.getElementById("btn");
    var show = document.getElementById("show");
 
    btn.addEventListener("click",function(){
        var style = window.getComputedStyle(show).display;
        if(style=="block"){
            show.style.display = "none";
        }else{
            show.style.display = "block";
        }
    });
    </script>
</body>
</html>
 
 
 
                                                                                                   
 
 
 
 
 
 
                                                                                        

58前端内推笔试2017（含答案）


联系
我们