zoukankan      html  css  js  c++  java
  • 前端试题汇总

    1.  请写出下列代码段的输出结果

        1)alert(-1? true: false)   // true

        2)alert("" ? true: false)  // false

        3)alert(0 ? true: false)   // false

    2. MVC, MVP, MVVM 区别

       参考链接(阮一峰):http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

    3.如何获取浏览器URL中查询字符串中的参数?

    详见location对象

    location.href, location.search

    4.写出使用this的典型应用

       1) 在html元素事件属性中使用

    <input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

    2)构造函数
    function Animal(name, color) {
      this.name = name;
      this.color = color;
    }
    3)input点击,获取值

    <input type="button" id="text" value="点击一下" />
    <script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
    alert(this.value); //此处的this是按钮元素
    }
    </script>
    4)

    apply()/call()求数组最值

    var numbers = [5, 458 , 120 , -215 ];
    var maxInNumbers = Math.max.apply(this, numbers);
    console.log(maxInNumbers); // 458
    var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);
    console.log(maxInNumbers); // 458
    5. call ,apply, bind 理解

     call、apply、bind的作用是改变函数运行时this的指向

    getName.call(obj, 'Dot', 'Dolby') 我的理解是 getName方法被obj调用;

    call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表。当第一个参数为null、undefined的时候,默认指向window。

    var arr = [1, 2, 3, 89, 46]
    var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89
    var obj = {
        message: 'My name is: '
    }
    
    function getName(firstName, lastName) {
        console.log(this.message + firstName + ' ' + lastName)
    }
    
    getName.call(obj, 'Dot', 'Dolby')

    apply接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组。当第一个参数为null、undefined的时候,默认指向window。

    var arr = [1,2,3,89,46]
    var max = Math.max.apply(null,arr)//89
    var obj = {
        message: 'My name is: '
    }
    
    function getName(firstName, lastName) {
        console.log(this.message + firstName + ' ' + lastName)
    }
    
    getName.apply(obj, ['Dot', 'Dolby'])// My name is: Dot Dolby

    bind返回对应函数, 便于稍后调用; apply, call则是立即调用。

    在 ES6 的箭头函数下, call 和 apply 将失效;

    6. 箭头函数内部this:

    箭头函数内部的this是词法作用域,由上下文确定。

    如果使用箭头函数,以前的那种hack写法就不需要了:

    var that = this;

    箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值

    • 箭头函数的 this 永远指向其上下文的  this ,任何方法都改变不了其指向,如 call() ,  bind() ,  apply() 

    7.谈谈你对模块化的理解

    所谓的模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数 

    8. TCP三次握手

    位码即tcp标志位,有6种标示:SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)

    Sequence number(顺序号码) Acknowledge number(确认号码)

    第一次握手:主机A发送位码为syn=1,随机产生seq number=1234567的数据包到服务器,主机B由SYN=1知道,A要求建立联机;

    第二次握手:主机B收到请求后要确认联机信息,向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包

    第三次握手:主机A收到后检查ack number是否正确,即第一次发送的seq number+1,以及位码ack是否为1,若正确,主机A会再发送ack number=(主机B的seq+1),ack=1,主机B收到后确认seq值与ack=1则连接建立成功。

    完成三次握手,主机A与主机B开始传送数据。

    参考链接:https://www.cnblogs.com/rootq/articles/1377355.html

    9.前端优化

          1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
      2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源

    按粒度大致可以分为两类:

    第一类是页面级别的优化

    1. 减少 HTTP请求数

    减少 HTTP请求数的主要途径包括:

    (1). 从设计实现层面简化页面

    (2). 合理设置 HTTP缓存

    (3). 资源合并与压缩

    (4). CSS Sprites(雪碧图,精灵图)

    (5)Lazy Load Images

    (6) 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)

     (7)避免重复的资源请求

    第二类则是代码级别的优化

    减少dom 操作 DOM操作应该是脚本中最耗性能的一类操作

    10.移动端点击穿透问题和滑动穿透问题

    在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟

    这个时间大概在300ms左右(即使给元素绑定的是touch事件,touchstart=>touchend=>click,click事件依然会被触发)

     解决方案

    不要混用touch和click

    吃掉或者消费掉touch之后的click

    把页面内所有click全部换成touch事件(touchstart、touchend、tap)

    ,需要特别注意a标签,a标签的href也是click,需要去掉换成js控制的跳转,或者直接改成span+tap控制跳转

     滑动穿透分析
    出现滑动穿透的问题是滚动条在body元素上,而滑动的时候body自然是可以响应的
    解决方案原理:禁用body的滚动条,由于滚动条的位置会丢失,所以需要在展示弹窗之前保存滚动条的位置,隐藏弹窗时恢复滚动条的位置。

    11.

    CSS中 link 和@import 的区别

     

    :(1) link属于HTML标签,而@import是CSS提供的; (2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;(3) import只在IE5以上才能识别,而link是HTML标签,无兼容问题; (4) link方式的样式的权重 高于@import的权重.:在link标签引入的 CSS 文件中,使用@import时需注意,如果已经存在相同样式,@import引入的这个样式将被该 CSS 文件本身的样式层叠掉,表现出link标签引入的样式权重大于@import引入的样式这样的直观效果。


    12.如何实现浏览器内多个标签之间的通信?

    解题方法 

    方法一:使用localStorage

    使用localStorage.setItem(key,value);添加内容

    使用storage事件监听添加、修改、删除的动作   

    方法二、使用cookie+setInterval

    HTML代码

    <inputid="name"><input type="button" id="btnOK"value="发送">
    JS代码-页面1   

    $(function(){
    $("#btnOK").click(function(){
    varname=$("#name").val();
    document.cookie="name="+name;
    });
    });
    JS代码-页面2

    //获取Cookie天的内容
    function getKey(key) {
    return JSON.parse("{""+ document.cookie.replace(/;s+/gim,"","").replace(/=/gim, "":"") +""}")[key];
    }
    //每隔1秒获取Cookie的内容
    setInterval(function(){
    console.log(getKey("name"));
    },1000);

     
    <!-- 页面A -->
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>更改数据</title>
            </head>
            <body></body>
            
            <script>
                
                window.addEventListener('click',function(){
                    
                    localStorage.setItem("key",1);  
                })
            
            </script>
            
        </html>
        
        
        <!-- 页面B -->
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>侦听数据更改</title>
            </head>
            <body></body>
            
            <script>
                
                window.addEventListener("storage",function(e){
                    
                    console.log(e);
                })
                
            </script>
            
        </html>

    13.  

    display:none和visibility:hidden两者的区别

    网上参考链接:https://blog.csdn.net/qq_38128179/article/details/80794397


    14.vue的两个核心是什么?

    1、数据驱动,也叫双向数据绑定。

    Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

    2、组件系统。

    .vue组件的核心选项:

    1、模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
    2、初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。
    3、接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。
    4、方法(methods):对数据的改动操作一般都在组件的方法内进行。
    5、生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。
    6、私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
    等等。

    15。vue 几种常用指令

    vue几种常用的指令

    v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
    v-show:根据表达式之真假值,切换元素的 display CSS 属性。
    v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。
    v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
    v-on:用于监听指定元素的DOM事件,比如点击事件。绑定事件监听器。
    v-model:实现表单输入和应用状态之间的双向绑定
    v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
    v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    16. $route和$router的区别?
    $route (路由信息对象)
    $router (路由实例对象)

    $router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法。

    返回上一个历史history用$router.to(-1)

    $route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

    网上参考链接: https://m.jb51.net/article/164718.htm

    17.v-if 和 v-show的区别?
    1.手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;
    2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
    3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
    4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
    5.使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。
    网上参考链接:https://www.cnblogs.com/echolun/p/7803943.html
     18. 解决position:fixed;在android webkit 不起作用的问题:

    加入如下标记

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

  • 相关阅读:
    Everything 本地磁盘文件搜索工具下载!
    Everything 本地磁盘文件搜索工具下载!
    Everything 本地磁盘文件搜索工具下载!
    4.shell基本操作简介
    4.shell基本操作简介
    4.shell基本操作简介
    4.shell基本操作简介
    apache、nginx配置自签名证书
    hadoop学习笔记(九):MapReduce程序的编写
    手动部署 Ceph Mimic 三节点
  • 原文地址:https://www.cnblogs.com/jiaqi1719/p/10651422.html
Copyright © 2011-2022 走看看