2019年前端面试题-01

2019年9月1日 132次阅读 来源: 云鱼Cloudy
  1. ==和===的区分？

    比较历程：
    　　双等号==：
    　　（1）假如两个值范例雷同，再举行三个等号(===)的比较
    　　（2）假如两个值范例差别，也有可以相称，需根据以下划定规矩举行范例转换在比较：
    　　　　1）假如一个是null，一个是undefined，那末相称
    　　　　2）假如一个是字符串，一个是数值，把字符串转换成数值今后再举行比较
    　　
    　　三等号===:
    　　（1）假如范例差别，就肯定不相称
    　　（2）假如两个都是数值，而且是同一个值，那末相称；假如个中最少一个是NaN，那末不相称。（推断一个值是不是是NaN，只能运用isNaN( ) 来推断）
    　　（3）假如两个都是字符串，每一个位置的字符都一样，那末相称，不然不相称。
    　　（4）假如两个值都是true，或是false，那末相称
    　　（5）假如两个值都援用同一个对象或是函数，那末相称，不然不相称
    　　（6）假如两个值都是null，或是undefined，那末相称

  2. float/postion属性

    Float CSS属性指定一个元素应沿其容器的左边或右边安排，许可文本和内联元素围绕它。该元素从网页的一般活动(文档流)中移除，尽管依然坚持部份的活动性（与 相对定位 相反）。

    positon属性：

    • 静态定位是默许行动
    • 相对定位是我们将要看的第一个位置范例。 它与静态定位异常相似，占有在一般的文档流中，除了你依然可以修正它的终究位置，包含让它与页面上的其他元素堆叠。
    • 相对定位的元素不再存在于一般文档规划流中。相反，它坐在它本身的层独立于统统。这是异常有用的：这意味着我们可以竖立不滋扰页面上其他元素的位置的断绝的UI功用 。比方，弹出信息框和控制菜单；翻转面板；可以在页面上的任何处所拖放的UI功用……
    • 牢固定位：相对定位牢固元素是相对于 <html> 元素或其近来的定位先人，而牢固定位牢固元素则是相对于浏览器视口自身。 这意味着您可以竖立牢固的有用的UI项目，如耐久导航菜单。

  3. 闭包注重点

    function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return I * I;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

    在上面的例子中，每次轮回，都竖立了一个新的函数，然后，把竖立的3个函数都增添到一个Array中返回了。
    你可以以为挪用f1()，f2()和f3()效果应当是1，4，9，但现实效果是：

    f1(); // 16
f2(); // 16
f3(); // 16

    全部都是16！缘由就在于返回的函数援用了变量i，但它并不是马上实行。比及3个函数都返回时，它们所援用的变量i已变成了4，因而终究效果为16。
    返回闭包时切记的一点就是：返回函数不要援用任何轮回变量，或许后续会发作变化的变量。
    假如肯定要援用轮回变量怎么办？要领是再竖立一个函数，用该函数的参数绑定轮回变量当前的值，不管该轮回变量后续怎样变动，已绑定到函数参数的值稳定：

    function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

  4. JS事宜托付

    JavaScript事宜代办：
    当我们须要对很多元素增添事宜的时刻，可以经由过程将事宜增添到它们的父节点而将事宜托付给父节点来触发处置惩罚函数。这主要得益于浏览器的事宜冒泡机制

    Js高等顺序上的定义：运用事宜冒泡，只绑定一个函数就可以处置惩罚一类事宜。
    《2019年前端面试题-01》（思否的文章图片不知道为何总是莫名插进去图片失利…后期一般后我会尽快增添，着实抱歉！）
    实例：
    Html

    <!-- 没有给p元素设置data-name，点击p元素时会显现data-name为null -->
    <div id="grandFather" data-name="grandFather" style="width: 700px;height: 700px; background-color: red">
        <p>grandFather</p>
        <div id="father1" data-name="father1" style="width: 300px; height: 300px; background-color: pink">
            <p>father1</p>
            <div id="son1" data-name="son1" style="width: 100px; height: 100px; background-color: yellow">
                <p>son1</p>
            </div>
        </div>
        <div id="father2" data-name="father2" style="width: 300px;height: 300px; background-color: green">
            <p>father2</p>
        </div>
    </div>

    Js

    // 事宜代办
 grandFather.addEventListener('click', function(event){
            console.log('I am ' + event.target.getAttribute('data-name'));
        },false);

    事宜代办的长处:

    • 优化机能
    • 当新元素绑增添进来的时刻不须要再次绑定事宜，经由过程冒泡就可以触发。

  5. 浏览器输入url到页面显现出来发作了什么？

    1. 举行地点剖析

      1. 剖析出字符串地点中的主机，域名，端口号，参数等

    2. 根据剖析出的域名举行DNS剖析

      1. 首先在浏览器中查找DNS缓存中是不是有对应的IP地点，假如有就直接运用，没有机实行第二步
2. 在操纵体系中查找DNS缓存是不是有对应的IP地点，假如有就直接运用，没有就实行第三步
3. 向当地DNS服务商发送请求查找时刻有DNS对应的ip地点。假如依然没有最后向Root Server服务商查询。

    3. 根据查询到的IP地点寻觅目标服务器

      1. 与服务器竖立衔接
2. 进入服务器，寻觅对应的请求
    4. 浏览器吸收到相应码最先处置惩罚。
    5. 浏览器最先衬着DOM，下载CSS、图片等一些资本。直到此次请求完成

  6. 消灭浮动

    1.父级div定义 height
    道理：父级div手动定义height，就处理了父级div没法自动猎取到高度的题目。
    长处：简朴、代码少、轻易控制
    瑕玷：只合适高度牢固的规划，要给出准确的高度，假如高度和父级div不一样时，会发作题目

    2.父级div定义 overflow:hidden

    道理：必需定义width或zoom:1，同时不能定义height，运用overflow:hidden时，浏览器会自动搜检浮动地区的高度
    长处：简朴、代码少、浏览器支撑好

    3.结尾处加空div标签 clear:both
    道理：增添一个空div，运用css进步的clear:both消灭浮动，让父级div能自动猎取到高度
    长处：简朴、代码少、浏览器支撑好、不轻易涌现怪题目
    瑕玷：不少初学者不理解道理；假如页面浮动规划多，就要增添很多空div，让人觉得很不好

    <ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

  7. 请形貌一下 cookies sessionStorage和localstorage区分

    雷同点：都存储在客户端
    差别点：

       1. 存储大小
       cookie数据大小不能超过4k。
       sessionStorage和localStorage 虽然也有存储大小的限定，但比cookie大得多，可以到达5M或更大。
   2. 有用时候
       localStorage：存储耐久数据，浏览器封闭后数据不丧失除非主动删除数据；
       sessionStorage：数据在当前浏览器窗口封闭后自动删除。
       cookie：设置的cookie逾期时候之前一向有用，纵然窗口或浏览器封闭
   3. 数据与服务器之间的交互体式格局
       cookie的数据会自动的通报到服务器，服务器端也可以写cookie到客户端
       sessionStorage和localStorage不会自动把数据发给服务器，仅在当地保留。

  8. 盘算一个数组arr一切元素的和

    
var sum = function(arr) {
    return arr.reduce(function (x, y) {
        return x + y;
    });
}
sum(arr)

  9. 编写一个要领去掉数组内里的反复的内容 var arr=[1,2,3,4,5,1,2,3]

    要领一：filter() + indexOf()

    function norepeat(arr){
    return arr.filter(function(val, index, array) {
        return array.indexOf(val)===index;
    });
}

    要领二： ES6 Set

    function norepeat(arr){
    return [new Set(arr)];
}

    要领三：用sort() 然后相邻比较也可以完成

  10. document.write和innerHTML的区分

    document.write是直接写入到页面的内容流，假如在写之前没有挪用document.open, 浏览器会自动挪用open。每次写完封闭今后从新挪用该函数，会致使页面被重写。

    innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以准确到某一个详细的元夙来举行变动。假如想修正document的内容，则须要修正document.documentElement.innerElement。

  11. Ajax

    定义：
    Asynchronous JavaScript + XML（异步JavaScript和XML）, 其自身不是一种新手艺，而是一个在 2005年被Jesse James Garrett提出的新术语，用来形貌一种运用现有手艺鸠合的‘新’要领。包含: HTML or XHTML , Cascading Style Sheets , JavaScript , The Document Object Model , XML , XSLT , 以及最主要的 XMLHttpRequest object 。当运用连系了这些手艺的AJAX模子今后， 网页运用可以疾速地将增量更新显现在用户界面上，而不须要重载（革新）全部页面。这使得顺序可以更快地回运用户的操纵。
    尽管X在Ajax中代表XML, 但由于 JSON 的很多上风，比方越发轻量以及作为Javascript的一部份，现在JSON的运用比XML越发广泛。JSON和XML都被用于在Ajax模子中打包信息。

    道理：
    《2019年前端面试题-01》（思否的文章图片不知道为何总是莫名插进去图片失利…后期一般后我会尽快增添，着实抱歉！））

    步骤：

    • 第一步，竖立xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。

      varxhttp;
if(window.XMLHttpRequest) {
//当代主流浏览器
xhttp = newXMLHttpRequest();
} else{
// 针对浏览器，比方IE5或IE6
xhttp = newActiveXObject("Microsoft.XMLHTTP");
}

    • 第二步，运用xmlhttprequest对象的open（）和send（）要领发送资本请求给服务器。

      xmlhttp.open(method,url,async)：
    method包含get 和post，
    url主如果文件或资本的门路，
    async参数为true(代表异步)或许false（代表同步）
xhttp.send()：运用get要领发送请求到服务器。
xhttp.send(string)：运用post要领发送请求到服务器。
    • 第三步，运用xmlhttprequest对象的responseText或responseXML属性取得服务器的相应。

    • 第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器相应实行一些功用就须要运用onreadystatechange函数，每次xmlhttprequest对象的readyState发作转变都邑触发onreadystatechange函数

      实例：
```javascript
function loadXMLDoc()
{
    //    第一步
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器实行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器实行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //    第四步
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
    //    第三步    
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    //    第二步
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
```
  12. XML和JSON的区分

    JSON相对于XML来讲，数据的体积小，通报的速率更快些
    JSON与JavaScript的交互越发轻易，更轻易剖析处置惩罚，更好的数据交互
    XML对数据形貌性比较好；
    JSON的速率要远远快于XML

  13. box-sizing经常使用的属性有哪些？离别有什么作用？

    content-box（默许）：width即内容显现部份的宽度，width = content
    border-box：即为元素在设置内边距和边框是在已设定好的宽度和高度以内举行绘制，width = margin + border + padding + content

  14. css选择器有哪些，选择器的权重的优先级

    选择器范例

    1、ID　　#id
    2、class　　.class
    3、标签　　p
    4、通用　　*
    5、属性　　[type=”text”]
    6、伪类　　:hover
    7、伪元素　　::first-line
    8、子选择器、相邻选择器

    权重盘算划定规矩

    1、第一等：代表内联款式，如: style=””，权值为1000。
    2、第二等：代表ID选择器，如：#content，权值为0100。
    3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。
    4、第四等：代表范例选择器和伪元素选择器，如div p，权值为0001。
    5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
    6、继续的款式没有权值。

  15. 块级元素程度垂直居中的要领有哪些（三个要领）

    要领一：负margin

    .mycss{
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;
}

    要领二：运用CSS的margin设置为auto让浏览器本身帮我们程度和垂直居中

    .mycss{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 200px;
    width: 300px;
}

    要领三：弹性盒子

    .mycss{
    display: flex;
    align-item: center;
    justify-content: center;
}
  16. 三个盒子，摆布定宽，中心自适应有几种要领

  17. 第一种：摆布边采纳浮动 中心采纳margin-left 和 margin-right 要领。

    <div style="width:100%; margin:0 auto;">
    <div style="width:200px; float:right; background-color:#960">这是右边的内容 牢固宽度</div>
    <div style="width:150px; float:left; background:#6FF">这是左边的内容 牢固宽度</div>
    <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中心内容，自适应宽度</div>
    </div>
  18. 第二种：摆布两侧采纳相对定位中心一样采纳margin-left margin-right要领

  19. 第三种：用弹性规划flex:

    <style>
   /* 弹性盒子规划*/
    .wrap{
        width: 100%;
        height: 90px;
        display: flex;
    }
    .left{
        width: 300px;
        background-color: red;
        float: left;
    }
    .content{
        flex:1;
        height: 90px;
        background-color: yellow;
    }
.right{
        width: 300px;
        height: 90px;
        background-color:blue;
        float: right;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>
  20. js有几种数据范例，个中基础数据范例有哪些
    5种基础范例:Undefined、Null、Boolean、Number和String。
    另有1种庞杂的数据范例：Object。Object本质上是由一组无序的名值对构成的。

  21. undefined 和 null 区分

    javaScript威望指南：
null 和 undefined 都示意“值的空白”，你可以以为undefined是示意体系级的、出人意料的或相似毛病的值的空白，而null是示意顺序级的、一般的或在意料之中的值的空白。

javaScript高等顺序设计：
在运用var声明变量但未对其加以初始化时，这个变量的值就是undefined。  null值则是示意空对象指针。
  22. http 和 https 有何区分？怎样天真运用？
    http是HTTP协定运行在TCP之上。一切传输的内容都是明文，客户端和服务器端都没法考证对方的身份。

    https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。一切传输的内容都经由加密，加密采纳对称加密，但对称加密的密钥用服务器方的证书举行了非对称加密。别的客户端可以考证服务器端的身份，假如设置了客户端考证，服务器方也可以考证客户端的身份

  23. 罕见的HTTP状况码

    • 2开首 （请求胜利）示意胜利处置惩罚了请求的状况代码。
    • 3开首 （请求被重定向）示意要完成请求，须要进一步操纵。 一般，这些状况代码用来重定向。
    • 4开首 （请求毛病）这些状况代码示意请求可以失足，阻碍了服务器的处置惩罚。
    • 5开首（服务器毛病）这些状况代码示意服务器在尝试处置惩罚请求时发作内部毛病。 这些毛病多是服务器自身的毛病，而不是请求失足。

  24. 怎样举行网站机能优化

    1. 从用户角度而言，优化可以让页面加载得更快、对用户的操纵相应得更实时，可以给用户供应更加友爱的体验。
    2. 从服务商角度而言，优化可以削减页面请求数、或许减小请求所占带宽，可以节约可观的资本。
　　总之，适当的优化不仅可以改良站点的用户体验而且可以节约相称的资本运用。
　　前端优化的门路有很多，按粒度大抵可以分为两类，第一类是页面级别的优化，比方 HTTP请求数、剧本的无壅塞加载、内联剧本的位置优化等 ;第二类则是代码级别的优化，比方 Javascript中的DOM 操纵优化、CSS选择符优化、图片优化以及 HTML构造优化等等。别的，本着进步投入产出比的目标，后文提到的种种优化战略大抵根据投入产出比从大到小的顺序排列。
　　
　　
    **页面级优化**
        1. ~JavaScript 紧缩和模块打包~
        2. ~按需加载资本~
        3. 在运用 DOM 操纵库时用上 array-ids
        4. ~缓存~
        5. 启用 HTTP/2
        6. 运用机能剖析
        7. ~运用负载平衡计划~
        8. 为了更快的启动时候考虑一下同构
        9. ~运用索引加快数据库查询~
        10. 运用更快的转译计划
        11. 防止或最小化 JavaScript 和 CSS 的运用而壅塞衬着
        12. 用于将来的一个发起：运用 service workers + 流
        13. ~图片编码优化~

  1. 什么是mvvm mvc是什么区分 道理
    MVC（Model-View-Controller）即模子-视图-控制器。
    Model（模子）：
    是运用顺序中用于处置惩罚运用顺序数据逻辑的部份。一般模子对象担任在数据库中存取数据。

    Model定义了这个模块的数据模子。在代码中体现为数据管理者，Model担任对数据举行猎取及寄存。
数据不可以平空天生的，要么是从服务器上面猎取到的数据，要么是当地数据库中的数据，也有多是用户在UI上填写的表单行将上传到服务器上面寄存，所以须要有数据泉源。既然Model是数据管理者，则天然由它来担任猎取数据。
Controller不须要体贴Model是怎样拿到数据的，尽管挪用就好了。
数据寄存的处所是在Model，而运用数据的处所是在Controller，
所以Model应当供应接供词controller接见其寄存的数据（一般经由过程.h内里的只读属性）

    View（视图）：
    是运用顺序中处置惩罚数据显现的部份。一般视图是根据模子数据竖立的。

    View，视图，简朴来讲，就是我们在界面上瞥见的统统。 它们有一部份是我们UI定死的，也就是不会根据数据来更新显现的， 比方一些Logo图片啊，这里有个按钮啊，那边有个输入框啊，一些显现特定内容的label啊等等； 有一部份是会根据数据来显现内容的，比方tableView来显现挚友列表啊， 这个tableView的显现内容肯定是根据数据来显现的。 我们运用MVC处理题目标时刻，一般是处理这些根据数据来显现内容的视图。

    Controller（控制器）：是运用顺序中处置惩罚用户交互的部份。一般控制器担任从视图读取数据，控制用户输入，并向模子发送数据。

    Controller是MVC中的数据和视图的谐和者，也就是在Controller内里把Model的数据赋值给View来显现（或许是View吸收用户输入的数据然后由Controller把这些数据传给Model来保留到当地或许上传到
服务器）。

    各部份之间的通信体式格局以下，一切通信都是单向的 。

        1. View 传送指令到 Controller
    2. Controller 完成营业逻辑后，请求 Model 转变状况
    3. Model 将新的数据发送到 View，用户获得反应

引荐浏览：
2019年前端面试题-01
2019年前端面试题-02
2019年前端面试题-03
2019年前端笔试题

我是Cloudy，年青的前端攻城狮一枚，爱专研，爱手艺，爱分享。

个人笔记，整顿不容易，谢谢浏览、点赞和珍藏。

文章有任何题目迎接人人指出，也迎接人人一同交换前端种种题目！

    原文作者：云鱼Cloudy
    原文地址: https://segmentfault.com/a/1190000019411134
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞