2019年前端面试题-01

==和===的区别？
比较过程：
　　双等号==：
　　（1）如果两个值类型相同，再进行三个等号(===)的比较
　　（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
　　　　1）如果一个是null，一个是undefined，那么相等
　　　　2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较
　　
　　三等号===:
　　（1）如果类型不同，就一定不相等
　　（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）
　　（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
　　（4）如果两个值都是true，或是false，那么相等
　　（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等
　　（6）如果两个值都是null，或是undefined，那么相等
float/postion属性

Float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

positon属性：
- 静态定位是默认行为
- 相对定位是我们将要看的第一个位置类型。它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
- 绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……
- 固定定位：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
闭包注意点
```
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
```

JS事件委托

JavaScript事件代理：
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制

Js高级程序上的定义：利用事件冒泡，只绑定一个函数就可以处理一类事件。
图片描述（思否的文章图片不知道为什么老是莫名插入图片失败...后期正常后我会尽快添加，实在抱歉！）
实例：
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>

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

事件代理的好处:

优化性能
当新元素绑添加进来的时候不需要再次绑定事件，通过冒泡就可以触发。

浏览器输入url到页面呈现出来发生了什么？

进行地址解析

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

根据解析出的域名进行DNS解析

1. 首先在浏览器中查找DNS缓存中是否有对应的IP地址，如果有就直接使用，没有机执行第二步
2. 在操作系统中查找DNS缓存是否有对应的IP地址，如果有就直接使用，没有就执行第三步
3. 向本地DNS服务商发送请求查找时候有DNS对应的ip地址。如果仍然没有最后向Root Server服务商查询。

根据查询到的IP地址寻找目标服务器

1. 与服务器建立连接
2. 进入服务器，寻找对应的请求

浏览器接收到响应码开始处理。
浏览器开始渲染DOM，下载CSS、图片等一些资源。直到这次请求完成

清除浮动

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>
```

请描述一下 cookies sessionStorage和localstorage区别

相同点：都存储在客户端
不同点：

   1. 存储大小
       cookie数据大小不能超过4k。
       sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
   2. 有效时间
       localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
       sessionStorage：数据在当前浏览器窗口关闭后自动删除。
       cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
   3. 数据与服务器之间的交互方式
       cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
       sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

计算一个数组arr所有元素的和


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

编写一个方法去掉数组里面的重复的内容 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() 然后相邻比较也可以实现
document.write和innerHTML的区别
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
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模型中打包信息。

原理：
（思否的文章图片不知道为什么老是莫名插入图片失败...后期正常后我会尽快添加，实在抱歉！））

步骤：
- 第一步，创建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();
  }
```
```
XML和JSON的区别
JSON相对于XML来讲，数据的体积小，传递的速度更快些
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
XML对数据描述性比较好；
JSON的速度要远远快于XML
box-sizing常用的属性有哪些？分别有什么作用？
content-box（默认）：width即内容显示部分的宽度，width = content
border-box：即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制，width = border + padding + content
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、继承的样式没有权值。

块级元素水平垂直居中的方法有哪些（三个方法）

方法一：负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;
}

三个盒子，左右定宽，中间自适应有几种方法

第一种：左右侧采用浮动中间采用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>

第二种：左右两侧采用绝对定位中间同样采用margin-left margin-right方法

第三种：用弹性布局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>

js有几种数据类型，其中基本数据类型有哪些
5种基本类型:Undefined、Null、Boolean、Number和String。
还有1种复杂的数据类型：Object。Object本质上是由一组无序的名值对组成的。

undefined 和 null 区别

javaScript权威指南：
null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。

javaScript高级程序设计：
在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。  null值则是表示空对象指针。

http 和 https 有何区别？如何灵活使用？
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份
常见的HTTP状态码
- 2开头（请求成功）表示成功处理了请求的状态代码。
- 3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。
- 4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
- 5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
如何进行网站性能优化
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. ~图片编码优化~

什么是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，用户得到反馈

我是Cloudy，年轻的前端攻城狮一枚，爱专研，爱技术，爱分享。
个人笔记，整理不易，感谢阅读、点赞和收藏。
文章有任何问题欢迎大家指出，也欢迎大家一起交流前端各种问题！

2019年前端面试题-01

云鱼

引用和评论

深入了解浏览器渲染进程的工作方式

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具