Partage des enregistrements de questions d'entretien JS en 2017 et 2018

Cet article vous présente le partage des enregistrements de questions d'entretien JS en 2017 et 2018. Les amis intéressés peuvent y jeter un œil

Articles connexes recommandés : Collection complète de questions d'entretien js en 2020 (dernière)

Partage d'entretien 2017 (enregistrement des questions d'entretien js)

1. La question la plus simple

    '11' * 2
    'a8' * 3
    var a = 2, b = 3;    var c = a+++b; // c = 5

2. Une question à ce sujet

    var num = 10;    var obj = {        num:8,        inner: {            num: 6,            print: function () {                console.log(this.num);
            }
        }
    }
    num = 888;
    obj.inner.print(); // 6
    var fn = obj.inner.print;
    fn(); //888
    (obj.inner.print)(); //6
    (obj.inner.print = obj.inner.print)(); //888 这个点没有太理解，虽然答对了

3. fonctions

    // 以下代码执行输出结果是什么
    function b () {        console.log(a);        var a = 10;        function a() {};
        a = 100;        console.log(a);
    }
    b();    function c () {        console.log(a);        function a() {};        var a = 10;
        a = 100;        console.log(a);
    }
    c();

    (function d (num) {        console.log(num);        var num = 10;
    }(100))

    (function e (num) {        console.log(num);        var num = 10;        function num () {};
    }(100))

    (function f (num) {        function num () {};        console.log(num);        var num =10
        console.log(num);
    }(100))    //仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于)
    function m () {        console.log(a1); // underfined
        console.log(a2); // underfined
        console.log(b1); // underfined
        console.log(b2); // underfined
        if(false) {            function b1 (){};            var a1 = 10;
        }        if(true) {            function b2 (){};            var a2 = 10;
        }        console.log(a1); // underfined
        console.log(a2); // 10
        console.log(b1); // underfined
        console.log(b2); // function
    }
    m();    function n() {        if(2>1) {
            arr = 10;
            brr = 10;            let arr;            var brr;            console.log(arr);            console.log(brr);
        }
    }
    n(); // ReferenceError

À ce stade, le navigateur se prépare uniquement à une analyse des paramètres var, fonction et fonction. Et dans ce processus de "pré-analyse", il existe une séquence de pré-analyse, c'est-à-dire les paramètres formels de la fonction -> De plus, lorsque le nom est le même, la fonction est réservée et la dernière écrase la première. Si le paramètre formel du résultat pré-analysé a une valeur, il sera analysé à la valeur. Sinon, il sera sous-défini. La fonction sera analysée dans l'ensemble du corps de la fonction et les variables seront sous-définies. dans cette question, nous n’en discuterons donc pas en premier. Par conséquent, lorsque cette question est "pré-analysée", le poids de la déclaration de fonction sera d'abord augmenté

4 Un problème d'algorithme

a un tableau trié, tel que. [ 1,4,6,9,11,15,18], donnez-vous un nouveau numéro, insérez-le dans le tableau et écrivez une fonction

5. Qu'est-ce que la limitation de fonction et quels sont ses avantages (je n'ai jamais compris ce concept auparavant, donc je suis confus)

Le but de la limitation de fonction

Il peut être compris littéralement La limitation des fonctions est utilisée pour limiter les fonctions afin d'optimiser les performances dans une certaine mesure. Par exemple, les opérations DOM nécessitent plus de mémoire et de temps CPU que les interactions non-DOM. Tenter d'effectuer successivement trop d'opérations liées au DOM peut provoquer le blocage du navigateur et parfois même un crash. Cela est particulièrement susceptible de se produire lors de l'utilisation du gestionnaire d'événements onresize dans IE. Lorsque le navigateur est redimensionné, l'événement sera déclenché en continu. Si vous essayez d'effectuer des opérations DOM dans le gestionnaire d'événements onresize, sa fréquence élevée de modifications peut faire planter le navigateur. Pour un autre exemple, pour une fonction de recherche courante, nous lions généralement l'événement keyup et effectuons une recherche à chaque fois que vous appuyez sur le clavier. Mais notre objectif est principalement de rechercher chaque fois que nous saisissons un contenu. Afin de résoudre ces problèmes, vous pouvez utiliser des minuteries pour limiter les fonctions.

Principe de limitation des fonctions

Certains codes ne peuvent pas être exécutés de manière continue et répétée sans interruption. La première fois que la fonction est appelée, un minuteur est créé pour exécuter le code après un intervalle spécifié. Lorsque la fonction est appelée une deuxième fois, elle efface la minuterie précédente et en définit une autre. Si le timer précédent a déjà été exécuté, cette opération n'a aucun sens. Cependant, si le timer précédent n’a pas encore été exécuté, il est remplacé par un nouveau timer. Le but est d'exécuter la fonction uniquement après que la demande d'exécution ait été arrêtée pendant un certain temps.
http://www.cnblogs.com/LuckyW...

6. Écrivez une méthode pour transmettre deux paramètres (parentNode, childNode), exigeant que si childNode est un nœud descendant de parentNode, Ensuite, il renvoie vrai, sinon il renvoie faux

7. Quel est le principe du flux d'événements DOM et en combien d'étapes est-il divisé ?

La capture d'événement est au stade cible. L'événement bouillonne

8. Quel est le principe de la délégation d'événement DOM, quels sont ses avantages et inconvénients

Principe de la délégation d'événement : mécanisme de bouillonnement d'événement

Avantages

1. économisez beaucoup d'utilisation de la mémoire, réduisez l'enregistrement des événements. Par exemple, il est très utile de proxyer tous les événements de clic de li sur ul.
2. On peut se rendre compte que lorsqu'un nouveau sous-objet est ajouté, il n'est pas nécessaire de le lier par événement, ce qui est particulièrement adapté aux parties de contenu dynamiques

Inconvénients

Communs. les applications des proxys d'événements doivent être limitées à. Pour les exigences ci-dessus, si tous les événements sont utilisés comme agents d'événements, une erreur d'évaluation des événements peut se produire. Autrement dit, les événements qui ne devraient pas être déclenchés sont liés à des événements.

9. Mécanisme de cache HTTP et comment implémenter à partir du cache en statut 200 (indiquant que le plus contacté est 304 à partir du cache) (utilisé pour l'optimisation, n'y a pas été exposé, doit comprendre)

Signification

Définition : La mise en cache du navigateur consiste à accélérer la navigation. Le navigateur stocke les documents récemment demandés sur le disque de l'utilisateur. Lorsque le visiteur demande à nouveau cette page, le navigateur peut la récupérer à partir des documents affichés. le disque local, accélérant ainsi l'affichage des pages.

Fonction

Fonction du cache :
1. Réduisez la latence, rendez votre site Web plus rapide et améliorez l'expérience utilisateur.
2. Évitez la congestion du réseau, réduisez le volume des requêtes et réduisez la bande passante de sortie.

实现手段

Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。

对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

10. 一个原型链继承的问题

    // 有一个构造函数A，写一个函数B，继承A
    function A (num) {        this.titileName = num;
    }
    A.prototype = {        fn1: function () {},        fn2: function () {}
    }

这个问题的关注点是B继承的A的静态属性，同时B的原型链中不存在A实例的titleName属性

11. 什么是虚拟dom

React为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起

如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。

而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升

12. js基础数据类型和引用类型分别是什么？这个前提条件下写一个getType，返回相应的类型

1.基本数据类型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用数据类型（对象）：Object （Array，Date，RegExp，Function）
ES6基本数据类型多了个symbol 据说这道题刷了百分之二十的人 感谢Abbyshen提出

function gettype(nm){    return Object.prototype.toString.call(nm);
}

13. dom选择器优先级是什么，以及权重值计算（一道老问题了）

1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000

14. vue双向数据绑定的原理是什么

首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注意description中get和set不能与描述属性共存）
数组的实现与对象不同。
同时运用观察者模式实现wather，用户数据和view视图的更新

15. react和vue比较来说有什么区别

1 component层面，web component和virtual dom
2 数据绑定（vue双向，react的单向）等好多
3 计算属性 vue 有，提供方便；而 react 不行
4 vue 可以 watch 一个数据项；而 react 不行
5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易；react 没有
6 生命周期函数名太长 directive

16. git使用过程中，如果你在开发着业务，突然另一个分支有一个bug要改，你怎么办

git stash       //将本次修改存到暂存区（紧急切换分支时）git stash pop   //将所有暂存区的内容取出来

17. postcss的使用

18. 网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局
静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

18. 执行下面代码

var a = {};var b = {key: 'b'};var c = {key: 'c'};var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;console.log(a[b]);  // 345console.log(a[c]);  // 345console.log(a[d]);  // 333

19.

    var R = (function() {        var u = {a:1,b:2};        var r = {            fn: function(k) {                return u[k];
            }
        }        return r;
    }());
    R.fn('a');  // 1

上述代码中如何获取匿名函数中的u

20. 不适用循环语句（包括map、forEach方法）实现一个100长度的数组，索引值和值相同的数组[0,1,2,3,4,5........99]

var arr = new Array(100);//方法1[...arr.keys()];//方法二Array.from(arr.keys());//方法三Array.from({length: 100});// 方法四 借助stringvar arr1 = new Array(101);var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {    var start = '' + Math.ceil(index/2);    if(index e6af0fb823c143a40a71e960e513f6b6= 100) {        return arr;
    }
    arr.push(val);    return reduce(arr, val+1);
}var res = reduce([], 0)

21. 下面语句执行结果输出

var a = function (val, index) {    console.log(index);    return {        fn: function (name) {            return a(name, val);
        }
    }
}var b = a(0); // underfinedb.fn(1); // 0b.fn(2); // 0b.fn(3); // 0

22. 科普

1) dom节点的根节点是不是body
回答： 不是，dom节点的根节点是html(包含head和body，head中分为meta、title等。body又分为一组)

2）dom元素都会有offsetParent吗
回答： offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

3) [1,3,5]转译成字符串是什么
回答： '1,3,5'
调用toString方法，生成该字符串

4）li标签的祖级元素可以为li，父级元素也可以为例
回答： 错误

23. jsonp原理，jquery是怎么实现的，这样实现有什么好处和坏处

原理

在同源策略下;在某个服务器下的页面是无法获取到该服务器以外的数据的;Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签来调用服务器提供的 js脚本
当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递, 所以jsonp的 type类型只能是get ！

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。

在jquery 源码中， jsonp的实现方式是动态添加3f1c4e4b6b16bbbd69b2ee476dc4f83a标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 3f1c4e4b6b16bbbd69b2ee476dc4f83a代码插入时函数执行，执行完毕后就 3f1c4e4b6b16bbbd69b2ee476dc4f83a会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。

24. http协议属于七层协议中的哪一层，下一层是什么

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
tcp属于传输层；http属于应用层。
表现层

25. js垃圾回收机制知道哪些，v8引擎使用的哪一种

js的两种回收机制

1 标记清除（mark and sweep）
2 引用计数（reference counting）

Javascript et moteur V8

Avantages et inconvénients du mécanisme de récupération de place

Avantages : simplifie considérablement le code de gestion de la mémoire du programme, réduit la charge des programmeurs et réduit les problèmes causés par problème de fuite de mémoire de fonctionnement à long terme.

Inconvénients : Le recyclage automatique signifie que les programmeurs ne peuvent pas contrôler la mémoire. Il n'y a aucune excuse pour le garbage collection dans ECMAScript. Nous ne pouvons pas le forcer à effectuer un garbage collection, et encore moins interférer avec la gestion de la mémoire.

Algorithme de collecte automatique des ordures V8
https://segmentfault.com/a/11...

26. Quand la portée est-elle générée ?

Chargement de la page--> Créer un objet global de fenêtre et générer une portée globale--> Générez ensuite le contexte d'exécution, pré-analysez les variables (promotion de variable) et générez
$scope

27. Quel est le principe de la connexion longue websocket ?

Signification

Websocket est un protocole persistant, comparé aux protocoles non persistants comme HTTP.

Principe

Similaire au long round robin et à la longue connexion ; envoyer une demande et obtenir des informations en continu

28. http缓存知道哪些

http://blog.csdn.net/yzf91321...

29. 讲一下事件循环机制

执行上下文(Execution context)
函数调用栈(call stack)
队列数据结构(queue)
Promise

https://zhuanlan.zhihu.com/p/...

30. 理解web安全吗？都有哪几种，介绍以及如何预防

1.XSS，也就是跨站脚本注入

攻击方法：1. 手动攻击:
编写注入脚本，比如”/><script>alert(document.cookie());</script><!--等，
手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域
2. 自动攻击
利用工具扫描目标网站所有的网页并自动测试写好的注入脚本，比如：Burpsuite等
防御方法：
1. 将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得
2. 对所有的输入做严格的校验尤其是在服务器端，过滤掉任何不合法的输入，比如手机号必须是数字，通常可以采用正则表达式
3. 净化和过滤掉不必要的html标签，比如：<iframe>, alt,<script> 等
4. 净化和过滤掉不必要的Javascript的事件标签，比如：onclick, onfocus等
5. 转义单引号，双引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符
6. 设置浏览器的安全设置来防范典型的XSS注入

2.SQL注入

攻击方法：
编写恶意字符串，比如‘ or  1=1--等，
手动测试目标网站上所有涉及数据库操作的地方
防御方法：1. 禁止目标网站利用动态拼接字符串的方式访问数据库2. 减少不必要的数据库抛出的错误信息3. 对数据库的操作赋予严格的权限控制4. 净化和过滤掉不必要的SQL保留字，比如：where, or, exec 等5. 转义单引号，上引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符

3.CSRF，也就是跨站请求伪造

就是攻击者冒用用户的名义，向目标站点发送请求
防范方法：1. 在客户端进行cookie的hashing，并在服务端进行hash认证2. 提交请求是需要填写验证码3. 使用One-Time Tokens为不同的表单创建不同的伪随机值

40. sessionStorage和localstorage能跨域拿到吗？比如我在www.baidu.com设置的值能在m.baidu.com能拿到吗？为什么

localStorage会跟cookie一样受到跨域的限制，会被document.domain影响

41. Quand le stockage local expire-t-il lorsqu'il ne peut pas être supprimé manuellement ?

À moins qu'il ne soit effacé, il peut être enregistré de manière permanente avec clear()
sessionStorage n'est valide que dans la session en cours, après. fermeture de la page ou du navigateur Effacé

42. Sur quels domaines les cookies peuvent-ils être définis ? .com peut-il être défini ?

Cela peut être réalisé en définissant domin

43. Pensez-vous que le statut de connexion peut être enregistré dans le stockage de session, dans le stockage local ou dans un cookie ou selon la méthode que vous connaissez ? il a stocké ? ? Pourquoi est-il enregistré là-bas

44. flux -> redux -> Quelle est la nature du changement

La structure de stockage traitera les objets observables fonctionnels ou orientés objet
https :/ /zhuanlan.zhihu.com/p/...

45. Comment charger le fichier chunk correspondant pour le routage à la demande ? En d'autres termes, comment le navigateur sait-il quand charger ce fragment et comment Webpack identifie-t-il les multiples fichiers de fragments hachés

50. Quelle est la différence entre get et post ? Peut-on transmettre des données à travers le corps ?

Pour insérer les données dans le corps, elles doivent être récupérées via POST, qui est restreint par le protocole HTTP.

51. 下拉刷新你怎么实现

52. 预加载options请求为什么会出现，能避免这个请求吗？

2018年面试题总结

收集一下网上的2018年的面试题 ; 希望能对你有所帮助~~

1.使用css实现一个持续的动画效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}animation-name    规定需要绑定到选择器的 keyframe 名称。animation-duration    规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function    规定动画的速度曲线。animation-delay    规定在动画开始之前的延迟。animation-iteration-count    规定动画应该播放的次数。animation-direction    规定是否应该轮流反向播放动画。

2.使用js实现一个持续的动画效果

最开始的思路是用定时器实现，最后没有想的太完整，面试官给出的答案是用requestAnimationFrame

· 定时器思路var e = document.getElementById('e')var falg = true;var left = 0;
setInterval(() => {
    left == 0 ? falg = true : left == 100 ? falg = false : ''
    falg ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`}, 1000 / 60)
· requestAnimationFrame
兼容性处理window.requestAnimFrame = (function(){  return  window.requestAnimationFrame       ||          window.webkitRequestAnimationFrame ||          window.mozRequestAnimationFrame    ||          function(callback){            window.setTimeout(callback, 1000 / 60);
          };
})();var e = document.getElementById("e")var flag = true;var left = 0;function render() {
    left == 0 ? flag = true : left == 100 ? flag = false : '';
    flag ? e.style.left = ` ${left++}px` :
        e.style.left = ` ${left--}px`;
}
(function animloop() {
    render();
    requestAnimFrame(animloop);
})();

不足之处请指正（毕竟是现学的）顺便查了一下优势：

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果
解决毫秒的不精确性
避免过度渲染（渲染频率太高、tab 不可见暂停等等）
注：requestAnimFrame 和 定时器一样也头一个类似的清除方法 cancelAnimationFrame

3.右边宽度固定，左边自适应

第一种：<style>body{    display: flex;
}.left{    background-color: rebeccapurple;    height: 200px;    flex: 1;
}.right{    background-color: red;    height: 200px;    width: 100px;
}</style><body>
    <p class="left"></p>
    <p class="right"></p></body>第二种<style>
    p {        height: 200px;
    }    .left {        float: right;        width: 200px;        background-color: rebeccapurple;
    }    .right {        margin-right: 200px;        background-color: red;
    }</style><body>
    <p class="left"></p>
    <p class="right"></p></body>

4.水平垂直居中

第一种#container{    position:relative;
}#center{    width:100px;    height:100px;    position:absolute;    top:50%;    left:50%;    transform: translate(-50%,-50%);
}
第二种#container{    position:relative;
}#center{    width:100px;    height:100px;    position:absolute;    top:50%;    left:50%;    margin:-50px 0 0 -50px;
}
第三种#container{    position:relative;
}#center{    position:absolute;    margin:auto;    top:0;    bottom:0;    left:0;    right:0;
}
第四种 flex#container{    display:flex;    justify-content:center;    align-items: center;
}

5.四种定位的区别

`static` 是默认值
`relative` 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中
`absolute` 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指`position`不是`static`的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以`body`元素为偏移参照基准, 完全脱离了标准文档流。
`fixed` 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

6.封装一个函数，参数是定时器的时间，.then执行回调函数。

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

7.一行代码实现数组去重？

[...new Set([1,2,3,1,'a',1,'a'])]

8.使用addEventListener点击li弹出内容，并且动态添加li之后有效

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>var ulNode = document.getElementById("ul");
    ulNode.addEventListener(&#39;click&#39;, function (e) {        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            alert(e.target.innerHTML);
        }
    }, false);

9.怎么判断两个对象相等

JSON.stringify(obj)==JSON.stringify(obj);//true

10.Vue router 除了 router-link 怎么实现跳转?

router.go(1)router.push('/')

11.Vue router 跳转和 location.href 有什么区别？

router 是 hash 改变
location.href 是页面跳转，刷新页面

12. Réarrangement et redessin

Une partie de l'arbre de rendu (ou l'ensemble de l'arbre de rendu) doit être réanalysée et la taille des nœuds doit être recalculée. C'est ce qu'on appelle le réarrangement. Notez qu’il y aura au moins une mise en page d’initialisation par redistribution.
Une partie du contenu à l'écran doit être mise à jour en raison de modifications dans les propriétés géométriques du nœud ou en raison de changements de style, comme la modification de la couleur d'arrière-plan d'un élément. De telles mises à jour sont appelées repeints.

13. Quelles situations déclencheront la redistribution et le redessinage

Ajouter, supprimer, mettre à jour des nœuds DOM
Masquer un nœud DOM via l'affichage : aucun - déclencher la redistribution et le redessinage
Masquer un DOM nœud via visibilité : caché - déclenche uniquement un redessin puisqu'il n'y a pas de changements géométriques
Déplacez ou animez le nœud DOM dans la page
Ajoutez une feuille de style et ajustez les attributs de style
Comportement de l'utilisateur, par exemple Redimensionnez la fenêtre. , modifiez la taille de la police ou faites défiler.

14.js bind 实现机制？手写一个 bind 方法？

function bind(fn, context){  return function (){     return fn.apply(context, arguments);
  }
}// 柯理化函数思想   感谢pursuitTom的提出Function.prototype.bind = function (context) {    var args = Array.prototype.slice.call(arguments, 1);    var _this = this;    return function () {        var thisArgs = [].slice.call(arguments);        return _this.apply(context, args.concat(thisArgs))
    };
}// ES6写法 感谢waterc的提出Function.prototype.bind = function(context, ...res) {
    let self = this
    return function(...arg) {        return self.apply(context, [...res,...arg])
    }
}

15.多个函数

var a = (function(){return '1';}, function(){return 1;})();console.log(typeof a); //number

16.__proto__、prototype、Object.getPrototypeOf()

__proto__是指内部原型，和Object.getPrototypeOf()结果等价function f(){}f.__proto__ === Object.getPrototypeOf(f); //truef.prototype === Object.getPrototypeOf(f); //false

17.浏览记录前后跳转（尚未试验）

<a href="javascript:history.go(-1)">backward</a><a href="javascript:history.go(1)">forward</a>

下面再有的题就不写序号了；正好到17；是自己喜欢的数字；哈哈

setTimeout 和 setInterval 细谈

常问的点，前者是在一定时间过后将函数添加至执行队列，执行时间=延迟时间+之前函数代码执行时间+执行函数时间。
后者是不管前一次是否执行完毕，每隔一定时间重复执行，用于精准执行互相没有影响的重复操作。
如果需要控制前后执行顺序，最好使用setTimeout模拟setInterval

var time = 400, times = 0, max = 10;
function func(){
  times++;  if(times < max){    //code here
    setTimeout(func, time);
  } else {
    console.log("finished");
  }
}
setTimeout(func, time);

判断多图片加载完毕

注：用jQueryObject.ready()只能判断dom结构加载完毕
好像描述的不是很清楚，这里写一下代码。
方法1：

var counter = 0;var queryInterval = 30; //msvar pics = document.getElementsByClassName("pics");function singleQuery(i){  if(pics[i].complete){
    counter++;    console.log(i + " is loaded");
  } else {
    setTimeout(singleQuery, queryInterval, i);
  }
}function allQuery(callback){  if(counter < pics.length){    console.log("current number of loaded pics: " + counter);
    setTimeout(allQuery, queryInterval, callback);
  } else {    console.log("All pics are loaded.");
    callback();
  }
}for(var i = 0; i < pics.length; i++){
  setTimeout(singleQuery, queryInterval, i);
}

setTimeout(allQuery, queryInterval, callback);

主要也是采用setTimeout模拟轮询，判断方式是img标签dom的complete属性（布尔值），缺点是定时器太多。

方法2：

var counter = 0, queryInterval = 50;var pics = document.getElementsByClassName("pics");for(var i = 0; i < pics.length; i++){
  pics[i].onload = function(){
    counter++;    console.log(this.id + " is loaded");
  }
}function queryPictures(callback){  if(counter < pics.length){    console.log("current number of loaded pics: " + counter);
    setTimeout(queryPictures, queryInterval, callback);
  } else {    console.log("All pics are loaded");
    callback();
  }
}

setTimeout(queryPictures, queryInterval, callback);

利用onload绑定图片加载成功后的回调，通过计数器判断是否加载完毕。

CSS margin重叠问题

块元素在垂直方向上的margin是很奇怪的，会有重叠现象。
如果display都是block，有三种情况：
外间距均为正数，竖直方向上会选择最大的外边距作为间隔
一正一负，间距 = 正 - |负|
两个负，间距 = 0 - 绝对值最大的那个
设置display: inline-block的盒子不会有margin重叠，position: absolute的也不会出现。

CSS选择器优先级 && CSS选择器效率

ID > 类 > 标签 > 相邻 > 子选择器 > 后代选择器 > * > 属性 > 伪类

object.propertyIsEnumerable(xxx)

判断对象中是否有xxx属性，并且能通过for in枚举，如Array对象的length是不可枚举的

判断数组

function isArray(arr){    return Object.prototype.toString.call(arr) === '[Object Array]';
}

git fetch && git pull

git pull自动完成了fetch最新远程版本，并且和本地进行merge
git fetch获得远程分支，要继续手动merge合并

WebSocket

HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接

跨域相关

只要协议、域名、端口有不同，则视为不同的域。（域名和域名对应的IP也是跨域）

1.CORS: Cross-Origin Resource Sharing

基于服务器支持的跨域，服务器设置Access-Control-Allow-Origin响应头，浏览器可允许跨域

2.设置domain

能从子域设到主域，如a.b.c.com—>b.c.com—>c.com
具体情况：在页面中用iframe打开了另一个页面（前提：两个页面主域是相同的）
利用frameElement.contentWindow.document.domain设置frame子页面的主域，document.domain设置主页面的主域，之后就能互相获取dom中的数据。
缺点是只能用于不同子域间的交互。

3.例如拥有src属性的img标签，每次改变src属性，都会发起http请求。

var img = new Image();
img.onload = function(){  //code here};
img.onerror = function(){  //code here};
img.src="http://server.com/data?query=3";

缺点是只能使用GET请求，不能获取数据，一般用于提交统计信息什么的。
script、link、iframe只有在添加到DOM中才会发起请求

4.HTML5 postMessage

支持IE8+和主流浏览器，写法也简单..

//source: http://test.org:4000//get the window object of target originvar win = window.open("http://target.com");//or this, when a frame is usedvar win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");//target: http://target.com/tinyfunction handleMessage(event){  if(event.orgin!="http://test.org:4000")    return;  var data = event.data;  //code here

  //event.source is window.opener
  event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);

5.window.name

即使在页面打开多层iframe后，每个iframe中window.name 属性值都是相同的，以此用作数据传输的工具。
但由于跨域的限制，是无法获取另一个frame中的window.name数据，所以要使用一个同域的代理(proxy.html)：

6. jsonp

目前主流跨域方法
调用其他域的脚本获取数据，前提是另一个域能知道回调函数名，这个可以通过请求发送给目标域。
直接写jQuery封的jsonp

$.getJSON("http://target.com/data?callback=callbackFunctionName", function(data){});

$.getJSON会把获取的responseText转为json，如果url中有callback参数，数据会以script标签形式获取。

针对上方问题存在没有解答的 ; 或则解答不正确详细的 ; 欢迎留言 ; 我会及时更正 ; 也欢迎留下你认为经典的面试题 ; 我都会补充进来 ; 共同进步

相关学习推荐：javascript视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!