zoukankan      html  css  js  c++  java
  • 58前端内推笔试2017(含答案)

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

    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'返回:string
    2.简答题
    (1)自定义一个浏览器兼容的事件绑定方法需要注意哪些问题?(答案不确定)
         对以存在的事件绑定方法进行判断。
         能兼容各主流浏览器。
         IE中没有捕获阶段,只能处理冒泡阶段。
         IE里事件触发的顺序和标准浏览器相反(现在一致了)
    (2)设计一个布局方案,使得页面在pc端和pad端显示为一行三列,在手机端为一列三行。
    样式:
    .parent-fix {
    margin-left:-20px;
    }
    .parent {
    display:table;
    100%;
    table-layout:fixed;
    }
    .column {
    display:table-cell;
    padding-left:20px;
    }
    @media screen and (max-320px){
    .parent-fix {
    margin-left: 0;
    }
    .parent {
    display:block;
    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;
                100px;
                text-align: center;
                margin-bottom: 0.5px;
                cursor: pointer;
                padding: 2px 0;
            }
            .down {
                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="#">第一项</a></li>
            <li class="l_sm"><a href="#">第二项</a></li>
            <li class="l_sm"><a href="#">第三项</a></li>
            <li class="l_sm"><a href="#">第四项</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>
     
     
     
                                                                                                       
     
     
     
     
     
     
                                                                                            
  • 相关阅读:
    Calling Convention的总结
    形参传递关键点
    linux input输入子系统分析《四》:input子系统整体流程全面分析
    22.Linux-块设备驱动之框架详细分析(详解)
    spring: 使用profiles选择数据源(结合嵌入式数据源EmbeddedDatabaseBuilder)
    spring: 使用嵌入式数据源 EmbeddedDatabaseBuilder
    jsp:jstl标签之控制流程
    jsp: jstl标签库
    jsp:tld标签
    spring boot: 组合注解与元注解
  • 原文地址:https://www.cnblogs.com/Janejxt/p/5868690.html
Copyright © 2011-2022 走看看