js面试题（中）

2024年1月14日 163次阅读 来源: 篱笆

JS耽误加载的体式格局有哪些？

JS的耽误加载有助与进步页面的加载速率。
defer和async、动态建立DOM体式格局（用得最多）、按需异步载入JS
defer：耽误剧本。马上下载，但耽误实行（耽误到全部页面都剖析终了后再运转），根据剧本涌现的前后递次实行。
async：异步剧本。下载完马上实行，但不保证根据剧本涌现的前后递次实行。

同步和异步的区分

同步的概念在操纵体系中：差别历程协同完成某项事情而前后序次调解（经由过程壅塞、叫醒等体式格局），同步强调的是递次性，谁先谁后。异步不存在递次性。
同步：浏览器接见服务器，用户看到页面革新，重新发请求，等请求完，页面革新，新内容涌现，用户看到新内容以后举行下一步操纵。
异步：浏览器接见服务器请求，用户一般操纵，浏览器在后端举行请求。等请求完，页面不革新，新内容也会涌现，用户看到新内容。

页面编码和被请求的资本编码假如不一致怎样处置惩罚？

若请求的资本编码，如外引js文件编码与页面编码差别。可根据外引资本编码体式格局定义为 charset=”utf-8″或”gbk”。
比方：http://www.yyy.com/a.html 中嵌入了一个http://www.xxx.com/test.js
a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就须要在引入的时刻
<script src=”http://www.xxx.com/test.js&amp;quot; charset=”utf-8″></script>

call,apply,bind

那些操纵会形成内存走漏

全局变量、闭包、DOM清空或删除时，事宜未消灭、子元素存在援用

flash和js经由过程什么类怎样交互

Flash供应了ExternalInterface接口与JavaScript通讯，ExternalInterface有两个要领，call和addCallback，call的作用是让Flash挪用js里的要领，addCallback是用来注册flash函数让js挪用。

Flash与Ajax各自的优缺点？

Flash：合适处置惩罚多媒体、矢量图形、接见机械。但对css、处置惩罚文本不足，不轻易被搜刮。
Ajax：对css、文本支撑很好，但对多媒体、矢量图形、接见机械不足。

XML与JSON的区分

1) 数据体积方面。JSON相关于XML来讲，数据的体积小，通报的速率更快些。
2) 数据交互方面。JSON与JavaScript的交互越发轻易，更轻易剖析处置惩罚，更好的数据交互。
3) 数据形貌方面。JSON对数据的形貌性比XML较差。
4) 传输速率方面。JSON的速率要远远快于XML。

Web Worker和Web Socket

web socket：在一个零丁的耐久衔接上供应全双工、双向的通讯。运用自定义的协定（ws://、wss://），同源战略对web socket不实用。
web worker：运转在背景的JavaScript，不影响页面的机能。
建立worker：var worker = new Worker(url);
向worker发送数据：worker.postMessage(data);
吸收worker返回的数据：worker.onmessage
停止一个worker的实行：worker.terminate();

JS渣滓接纳机制

1) 标记消灭：
这个算法把“对象是不是不再须要”简化定义为“对象是不是能够取得”。
这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。按期的，渣滓接纳器将从根最先，找一切从根最先援用的对象，然后找这些对象援用的对象。从根最先，渣滓接纳器将找到一切能够取得的对象和一切不能取得的对象。

2) 援用计数：
这是最简朴的渣滓网络算法。此算法把“对象是不是不再须要”简化定义为“对象有无其他对象援用到它”。假如没有援用指向该对象（零援用），对象将被渣滓接纳机制接纳。
该算法有个限定：没法处置惩罚轮回援用。两个对象被建立，并相互援用，形成了一个轮回。它们被挪用以后不会脱离函数作用域，所以它们已没有用了，能够被接纳了。但是，援用计数算法考虑到它们相互都有最少一次援用，所以它们不会被接纳。
前端口试查漏补缺–(二) 渣滓接纳机制

web运用从服务器主动推送data到客户端的体式格局

JavaScript数据推送：commet（基于http长衔接的服务器推送手艺）。
基于web socket的推送：SSE（server-send Event）

怎样删除一个cookie

1） 将cookie的失效时候设置为过去的时候（expires）

document.cookie = ‘user=’+ encodeURIComponent(‘name’) + ';
expires=’+ new Date(0);

2） 将体系时候设置为当前时候往前一点时候

var data = new Date();
date.setDate(date.getDate()-1);

Ajax

  • 怎样完成ajax请求

1.经由过程实例化一个XMLHttpRequest对象获得一个实例，挪用实例的open要领为此次 ajax请求设定响应的http要领、响应的地点和以及是不是异步，固然大多数情况下我们都是选异步， 以异步为例，以后挪用send要领ajax请求，这个要领能够设定须要发送的报文主体，然后经由过程 监听readystatechange事宜，经由过程这个实例的readyState属性来推断这个ajax请求的状况，个中分为0,1,2,3,4这四种 状况，当状况为4的时刻也就是吸收数据完成的时刻，这时候刻能够经由过程实例的status属性推断这个请求是不是胜利

var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
  if(xhr.readyState==4) {
    if(xhr.status==200) {
      console.log(xhr.responseText);
    }
  }
}

  • Ajax请求的页面历史纪录状况题目？

    • 经由过程location.hash纪录状况，让浏览器纪录Ajax请求时页面状况的变化。
    • 经由过程HTML5的history.pushstate，来完成浏览器地点栏的无革新转变

  • Ajax的上风

    • 无革新页面请求，使产物更快，更小更友爱
    • 服务器端的使命转嫁到客户端处置惩罚
    • 减轻浏览器累赘，勤俭带宽
    • 基于规范化对象，不须要装置特定的插件
    • 完全将页面与数据星散

  • Ajax局限性

    • AJAX 不支撑浏览器 back 按钮。(没法运用回退按钮)
    • 安全题目 AJAX 暴露了与服务器交互的细节。
    • 对搜刮引擎的支撑比较弱。不会实行你的 JS 剧本，只会操纵你的网页源代码；(不利于网页的SEO)
    • 跨域请求有肯定限定。处理体式格局：jsonp；(不能发送跨域请求)

attribute与property的区分？

attribute是dom元素在文档中作为html标签具有的属性
property是dom元素在js中作为对象具有的属性。
所以，关于html的规范属性来讲，attribute和property是同步的，是会自动更新的。但关于自定义属性，他们差别步。

js事宜

  • js事宜托付机制
  1. 扼要引见事宜代办，以及什么时刻运用，事宜代办发作在事宜处置惩罚流程的哪一个阶段，有什么优点？

事宜代办就是说我们将事宜增加到原本要增加事宜的父节点，将事宜托付给父节点来触发处置惩罚函数，这一般会在 这一般会运用在大批的同级元素须要增加统一类事宜的时刻，比方一个动态的异常多的列表，须要为每一个列表项都增加 点击事宜，这时候能够运用事宜代办，经由过程推断e.target.nodeName来推断发作的详细元素，从而推断是不是是在 列表项中触发，如许的优点是能够削减事宜绑定，同时动态的DOM构造依然能够监听。事宜代办发作在冒泡阶段。

参考：
浅析JavaScript的事宜代办和托付

  • 请形貌一下 JavaScript 事宜冒泡机制
  • DOM事宜模子是怎样的,编写一个EventUtil东西类完成事宜治理兼容

1.DOM事宜包括捕捉（capture）和冒泡（bubble）两个阶段：捕捉阶段事宜从window最先触发事宜然后经由过程先人节点一次通报到触发事宜的DOM元素上；冒泡阶段事宜从初始元素顺次向先人节点通报直到window

2.规范事宜监听elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture)：handler吸收保留事宜信息的event对象作为参数，event.target为触发事宜的对象，handler挪用上下文this为绑定监听器的对象，event.preventDefault()作废事宜默许行动，event.stopPropagation()/event.stopImmediatePropagation()作废事宜通报

3.老版本IE事宜监听elem.attachEvent(‘on’+type, handler)/elem.detachEvent(‘on’+type, handler)：handler不吸收event作为参数，事宜信息保留在window.event中，触发事宜的对象为event.srcElement，handler实行上下文this为window运用闭包中挪用handler.call(elem, event)可模仿规范模子，然后返回闭包，保证了监听器的移除。event.returnValue为false时作废事宜默许行动，event.cancleBubble为true时作废时候流传

4.一般应用事宜冒泡机制托管事宜处置惩罚顺序进步顺序机能。

/**
 * 跨浏览器事宜处置惩罚东西。只支撑冒泡。不支撑捕捉
 * @author  (qiu_deqing@126.com)
 */

var EventUtil = {
    getEvent: function (event) {
        return event || window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    // 返回注册胜利的监听器，IE中须要运用返回值来移除监听器
    on: function (elem, type, handler) {
        if (elem.addEventListener) {
            elem.addEventListener(type, handler, false);
            return handler;
        } else if (elem.attachEvent) {
            var wrapper = function () {
              var event = window.event;
              event.target = event.srcElement;
              handler.call(elem, event);
            };
            elem.attachEvent('on' + type, wrapper);
            return wrapper;
        }
    },
    off: function (elem, type, handler) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, handler, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, handler);
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else if ('returnValue' in event) {
            event.returnValue = false;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else if ('cancelBubble' in event) {
            event.cancelBubble = true;
        }
    },
    /**
     * keypress事宜跨浏览器猎取输入字符
     * 某些浏览器在一些特别键上也触发keypress，此时返回null
     **/
     getChar: function (event) {
        if (event.which == null) {
            return String.fromCharCode(event.keyCode);  // IE
        }
        else if (event.which != 0 && event.charCode != 0) {
            return String.fromCharCode(event.which);    // the rest
        }
        else {
            return null;    // special key
        }
     }
};

正则表达式

  • 注册账号请求以字母开首，能够包括字母、数字、下划线，请写出考证该账号的正则表达式

/^[a-zA-Z]w+$/

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