2019年前端面试题-01

时间 2019-11-05

标签 2019年端面试题繁體版

原文原文链接

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

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

positon属性：前端
- 静态定位是默认行为
- 相对定位是咱们将要看的第一个位置类型。它与静态定位很是类似，占据在正常的文档流中，除了你仍然能够修改它的最终位置，包括让它与页面上的其余元素重叠。
- 绝对定位的元素再也不存在于正常文档布局流中。相反，它坐在它本身的层独立于一切。这是很是有用的：这意味着咱们能够建立不干扰页面上其余元素的位置的隔离的UI功能。例如，弹出信息框和控制菜单；翻转面板；能够在页面上的任何地方拖放的UI功能……
- 固定定位：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口自己。这意味着您能够建立固定的有用的UI项目，如持久导航菜单。
闭包注意点java
```
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。
返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
若是必定要引用循环变量怎么办？方法是再建立一个函数，用该函数的参数绑定循环变量当前的值，不管该循环变量后续如何更改，已绑定到函数参数的值不变：ajax
```
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事件代理：
当咱们须要对不少元素添加事件的时候，能够经过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制segmentfault

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选择器有哪些，选择器的权重的优先级
选择器类型

一、ID　　#id
二、class　　.class
三、标签　　p
四、通用　　*
五、属性　　[type="text"]
六、伪类　　:hover
七、伪元素　　::first-line
八、子选择器、相邻选择器

权重计算规则

一、第一等：表明内联样式，如: style=””，权值为1000。
二、第二等：表明ID选择器，如：#content，权值为0100。
三、第三等：表明类，伪类和属性选择器，如.content，权值为0010。
四、第四等：表明类型选择器和伪元素选择器，如div p，权值为0001。
五、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
六、继承的样式没有权值。

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

方法一：负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，年轻的前端攻城狮一枚，爱专研，爱技术，爱分享。
我的笔记，整理不易，感谢阅读、点赞和收藏。
文章有任何问题欢迎你们指出，也欢迎你们一块儿交流前端各类问题！