1. let与var的区分？
   Let为ES6新增加说明变量的敕令，它类似于var，然则有以下差异：
   1、var声明的变量，其作用域为该语句地点的函数内，且存在变量提拔征象
   2、let声明的变量，其作用域为该语句地点的代码块内，不存在变量提拔
   3、let不允许反复声明.

2. 封装一个函数，参数是定时器的时刻，.then实行回调函数。

   function sleep (time) { 
   return new Promise((resolve) => setTimeout(resolve, time));
   }

3. 项目做过哪些机能优化？
   1、削减HTTP请求数
   2、削减DNS查询
   3、运用CDN
   4、防止重定向
   5、图片懒加载
   6、削减DOM元素数目
   7、削减DOM操纵
   8、运用外部JavaScript和CSS
   9、紧缩JavaScript、CSS、字体、图片等
   10、优化CSS Sprite
   11、运用iconfont
   12、字体裁剪
   13、多域名分发分别内容到差异域名
   14、只管削减iframe运用
   15、防止图片src为空
   16、把样式表放在 中
   17、把剧本放在页面底部

4. 怎样推断两个对象相称？
   1、转化成字符串后比较字符串是不是一致：

   JSON.stringify(obj)===JSON.stringify(obj2);

   2、Object.is(obj1,obj2)：推断两个值是不是 [雷同]。假如以下任何一项建立，则两个值雷同。

      * 两个值都是 [undefined]
      * 两个值都是 [null]
      * 两个值都是true或许都是false
      * 两个值是由雷同个数的字符根据雷同的递次构成的字符串
      * ~两个值指向同一个对象~
      * 两个值都是数字而且
          * 都是正零+0
          * 都是负零-0
          * 都是 [NaN]
          * 都是除零和[NaN]外的别的同一个数字
      
   

5. 什么是模块化开辟？

   完成mvvm重要包括两个方面，数据变化更新视图，视图变化更新数据：
   

   症结点在于data怎样更新view，因为view更新data实在能够经由历程事宜监听即可，比方input标签监听 ‘input’ 事宜就能够完成了。所以我们着重来剖析下，当数据转变，怎样更新视图的。
   数据更新视图的重点是怎样晓得数据变了，只需晓得数据变了，那末接下去的事都好处置惩罚。怎样晓得数据变了，实在上文我们已给出答案了，就是经由历程Object.defineProperty( )对属性设置一个set函数，当数据转变了就会来触发这个函数，所以我们只需将一些须要更新的要领放在这内里就能够完成data更新view了。

   Vue是经由历程Object.defineProperty()来完成数据挟制的。它能够来掌握一个对象属性的一些特有操纵，比方set()、get()、是不是能够罗列。
   
   完成数据的双向绑定，起首要对数据举行挟制监听，所以我们须要设置一个监听器Observer，用来监听一切属性。假如属性发上变化了，就须要关照定阅者Watcher看是不是须要更新。因为定阅者是有很多个，所以我们须要有一个音讯定阅器Dep来特地网络这些定阅者，然后在监听器Observer和定阅者Watcher之间举行一致管理的。接着，我们还须要有一个指令剖析器Compile，对每一个节点元素举行扫描和剖析，将相干指令对应初始化成一个定阅者Watcher，并替代模板数据或许绑定相应的函数，此时当定阅者Watcher吸收到相应属性的变化，就会实行对应的更新函数，从而更新视图。因而接下去我们实行以下3个步骤，完成数据的双向绑定：
   1.完成一个监听器Observer，用来挟制并监听一切属性，假如有更改的，就关照定阅者。
   2.完成一个定阅者Watcher，能够收到属性的变化关照并实行相应的函数，从而更新视图。
   3.完成一个剖析器Compile，能够扫描和剖析每一个节点的相干指令，并根据初始化模板数据以及初始化相应的定阅器。

   流程图以下：
   

6. 浏览器兼容性题目
   图片形貌
   1、Normalize.css
   2、差异浏览器的标签默许的外边距和内边距差异：
   3、IE6双边距题目：在 IE6中设置了float , 同时又设置margin , 就会涌现边距题目：设置display:inline;
   4、图片默许有间距：运用float 为img 规划
   5、IE9以下浏览器不能运用opacity：

   opacity: 0.5;
   filter: alpha(opacity = 50);
   filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

   6、cursor:hand 显现手型在safari 上不支撑：一致运用 cursor:pointer
   7、当标签的高度设置小于10px，在IE6、IE7中会超越本身设置的高度：超越高度的标签设置overflow:hidden,或许设置line-height的值小于你的设置高度
   8、CSS HACK的要领：

   height: 100px;    // 一切浏览器 通用 
   _height: 100px;    // IE6 专用 
   *+height: 100px;    // IE7 专用 
   *height: 100px;    // IE6、IE7 共用 
   height: 100px !important;        // IE7、FF 共用 

   代码的递次肯定不能颠倒了，要不又半途而废了。因为浏览器在解释程序的时刻，假如重名的话，会用背面的掩盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放背面

7. 前端跨域

   1. 什么是跨域？

      >     只需协定、域名、端口有任何一个差异，都被看成是差异的域。
      >     同源战略是浏览器的行动，是为了庇护当地数据不被JavaScript代码猎取返来的数据污染，因而阻拦的是客户端发出的请求返来的数据吸收，即请求发送了，服务器相应了，然则没法被浏览器吸收。
      >     之所以会跨域，是因为遭到了同源战略的限定，同源战略请求源雷同才一般举行通讯，即协定、域名、端口号都完整一致。
      > 
      > 注重点：
      > 假如是协定和端口形成的跨域题目“前台”是无计可施的；
      > 在跨域题目上，域仅仅是经由历程“URL的首部”来辨认而不会去尝试推断雷同的ip地点对应着两个域或两个域是不是在同一个ip上。 (“URL的首部”指window.location.protocol +window.location.host，也能够理解为“Domains, protocols and ports must match”。)
      

   2. 什么是同源战略？

      > 所谓同源是指，域名，协定，端口雷同。浏览器采纳同源战略，就是制止页面加载或实行与本身泉源差异的域的任何剧本。
      

   3. 经由历程document.domain跨域(只适用于差异子域的框架间的交互)

      浏览器有一个同源战略，其限定之一是不能经由历程ajax的要领去请求差异源中的文档。第二个限定是浏览器中差异域的框架之间是不能举行js的交互操纵的。差异的框架之间是能够猎取window对象的，但却没法猎取相应的属性和要领。比方，有一个页面，它的地点是 [www.damonare.cn/a.html]， 在这个页面内里有一个iframe，它的src是 [damonare.cn/b.html]， 很显然，这个页面与它内里的iframe框架是差异域的，所以我们是没法经由历程在页面中誊写js代码来猎取iframe中的东西的：
      

   4. 经由历程location.hash跨域
   5. 经由历程HTML5的postMessage要领跨域

   6. 经由历程jsonp跨域

      JSONP的优瑕玷
          * JSONP的长处是：它不像XMLHttpRequest对象完成的Ajax请求那样遭到同源战略的限定；它的兼容性更好，在越发陈旧的浏览器中都能够运转，不须要XMLHttpRequest或ActiveX的支撑；而且在请求终了后能够经由历程挪用callback的体式格局回传效果。
          * JSONP的瑕玷则是：它只支撑GET请求而不支撑POST等别的范例的HTTP请求；它只支撑跨域HTTP请求这类状况，不能解决差异域的两个页面之间怎样举行JavaScript挪用的题目。
      

   7. 经由历程CORS跨域

      CORS（Cross-Origin Resource Sharing）跨域资本同享，定义了必须在接见跨域资本时，浏览器与服务器应当怎样沟通。CORS背地的基本思想就是运用自定义的HTTP头部让浏览器与服务器举行沟通，从而决议请求或相应是应当胜利照样失利。现在，一切浏览器都支撑该功用，IE浏览器不能低于IE10。全部CORS通讯历程，都是浏览器自动完成，不须要用户介入。关于开辟者来讲，CORS通讯与同源的AJAX通讯没有差异，代码完整一样。浏览器一旦发明AJAX请求跨源，就会自动增加一些附加的头信息，偶然还会多出一次附加的请求，但用户不会有觉得。

   8. 经由历程window.name跨域

      window对象有个name属性，该属性有个特性：即在一个窗口(window)的生命周期内,窗口载入的一切的页面都是同享一个window.name的，每一个页面临window.name都有读写的权限，window.name是耐久存在一个窗口载入过的一切页面中的，并不会因新页面的载入而举行重置。

8. 前端优化：浏览器缓存

   前端优化：浏览器缓存手艺引见 – 掘金
   浏览器缓存分为强缓存和协商缓存。

   当客户端请求某个资本时，猎取缓存的流程以下：

   1）浏览器在加载资本时，先根据这个资本的一些http header推断它是不是掷中强缓存，强缓存假如掷中，浏览器直接从本身的缓存中读取资本，不会发请求到服务器。比方：某个css文件，假如浏览器在加载它地点的网页时，这个css文件的缓存设置掷中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页地点服务器；

   2）当强缓存没有掷中的时刻，浏览器肯定会发送一个请求到服务器，经由历程服务器端根据资本的别的一些http header考证这个资本是不是掷中协商缓存，假如协商缓存掷中，服务器会将这个请求返回，然则不会返回这个资本的数据，而是关照客户端能够直接从缓存中加载这个资本，因而浏览器就又会从本身的缓存中去加载这个资本；

   3）强缓存与协商缓存的共同点是：假如掷中，都是从客户端缓存中加载资本，而不是从服务器加载资本数据；区分是：强缓存不发请求到服务器，协商缓存会发请求到服务器。

   4）当协商缓存也没有掷中的时刻，浏览器直接从服务器加载资本数据。

9. jsonp的道理与完成

   Jsonp是一种跨域通讯的手腕，它的道理实在很简朴：

      > 1. 起首是应用script标签的src属性来完成跨域。
      > 2. 经由历程将前端要领作为参数通报到服务器端，然后由服务器端注入参数以后再返回，完成服务器端向客户端通讯。
      > 3. 因为运用script标签的src属性，因而只支撑get要领
   

   完成流程：

   1、设定一个script标签

   <script src="http://jsonp.js?callback=xxx"></script>

   2、callback定义了一个函数名，而长途服务端经由历程挪用指定的函数并传入参数来完成通报参数，将function(response)通报回客户端

   $callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
   echo $callback.'(.json_encode($data).)';

   3、客户端吸收到返回的js剧本，最先剖析和实行function(response)

   简朴的实例：
   一个简朴的jsonp完成，实在就是拼接url，然后将动态增加一个script元素到头部。

   function jsonp(req){
       var script = document.createElement('script');
       var url = req.url + '?callback=' + req.callback.name;
       script.src = url;
       document.getElementsByTagName('head')[0].appendChild(script); 
   }

   前端js示例：

   function hello(res){
       alert('hello ' + res.data);
   }
   jsonp({
       url : '',
       callback : hello 
   });

   服务器端代码：

   var http = require('http');
   var urllib = require('url');
   
   var port = 8080;
   var data = {'data':'world'};
   
   http.createServer(function(req,res){
       var params = urllib.parse(req.url,true);
       if(params.query.callback){
           console.log(params.query.callback);
           //jsonp
           var str = params.query.callback + '(' + JSON.stringify(data) + ')';
           res.end(str);
       } else {
           res.end();
       }
       
   }).listen(port,function(){
       console.log('jsonp server is on');
   });

   牢靠的jsonp实例：

   (function (global) {
       var id = 0,
           container = document.getElementsByTagName("head")[0];
   
       function jsonp(options) {
           if(!options || !options.url) return;
   
           var scriptNode = document.createElement("script"),
               data = options.data || {},
               url = options.url,
               callback = options.callback,
               fnName = "jsonp" + id++;
   
           // 增加回调函数
           data["callback"] = fnName;
   
           // 拼接url
           var params = [];
           for (var key in data) {
               params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
           }
           url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
           url += params.join("&");
           scriptNode.src = url;
   
           // 通报的是一个匿名的回调函数，要实行的话，暴露为一个全局要领
           global[fnName] = function (ret) {
               callback && callback(ret);
               container.removeChild(scriptNode);
               delete global[fnName];
           }
   
           // 失足处置惩罚
           scriptNode.onerror = function () {
               callback && callback({error:"error"});
               container.removeChild(scriptNode);
               global[fnName] && delete global[fnName];
           }
   
           scriptNode.type = "text/javascript";
           container.appendChild(scriptNode)
       }
   
       global.jsonp = jsonp;
   
   })(this);

   运用示例：

   jsonp({
       url : "www.example.com",
       data : {id : 1},
       callback : function (ret) {
           console.log(ret);
       }
   });

迎接浏览：
2019年前端面试题-01
2019年前端面试题-02
2019年前端笔试题

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

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

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