JS的100道经典面试题(三)只看这四篇就够了,收藏起来以后偷偷看

年轻人你不讲武德,耗子尾汁~~~
在这里插入图片描述

总结就是为了形成自己的js知识网,提升自己,加油!

开始干

51、谈性能优化问题

  • 代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。
  • 缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等
  • 请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。
  • 请求带宽:压缩文件,开启GZIP,代码层面的优化
  • 用hash-table来优化查找,少用全局变量
  • 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
  • 用setTimeout来避免页面失去响应
  • 缓存DOM节点查找的结果
  • 避免使用CSS Expression
  • 避免全局查询
  • 避免使用with(with会创建自己的作用域,会增加作用域链长度)
  • 多个变量声明合并
  • 避免图片和iFrame等的空Src。空Src会重新加载当前页面,影响速度和效率
  • 尽量避免写在HTML标签中写Style属性

51、解释jsonp的原理,以及为什么不是真正的ajax
动态创建script标签,回调函数;Ajax是页面无刷新请求数据操作

52、javascript的本地对象,内置对象和宿主对象

  • 本地对象为array obj regexp等可以new实例化
  • 内置对象为gload Math 等不可以实例化的
  • 宿主为浏览器自带的document,window 等

53、document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法,jquery中有 $().ready(function)

54、==和===的不同
前者会自动转换类型 值判断数值 不判断类型

let  a = 12;
let  b = '12'
console.log(a==b) //true

后者先比较数值后比较数据类型都一样时才一样

let  a = 12;
let  b = '12'
console.log(a===b) //false

55、javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合

56、Ajax你以前用过么?简单介绍一下
AJAX = 异步 JavaScript 和 XML。 xmlhttprequest
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必需重载整个网页面。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

57、 Ajax可以做异步请求么?
可以。Ajax请求默认是异步的.如果想同步把async设置为false就可以了默认是true。如果是jquery $.ajax({ url: some.php, async: false, success : function(){ } }); 如果是原生的js xmlHttp.open(“POST”,url,false)。

58、一网站如果有大量的人登陆访问。那么会产生很多的session,如果你是程序员你该怎么办。
session默认保存在内存中,内存资源宝贵,session数据量大导致内存利用率高,以下方案解决session内存存储问题:
(1)可以设置session超时时间,达到超时时间session自动清空

 <session-config>
<session-timeout>20</session-timeout>
</session-config> 

(2)将session中的数据序列化到硬盘中;
不使用session,使用cookie(此方法存在安全性问题)

59、Ajax如何实现异步定时5秒刷新?

setInterval(function() {
    
    
$("#content").load(location.href+" #content>*","");
}, 5000);

60、如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式。
方法一:
localstorge在一个标签页里被添加、修改或删除时,都会触发一个storage事件,通过在另一个标签页里监听storage事件,即可得到localstorge存储的值,实现不同标签页之间的通信。

标签页11.<input id="name">  
2.<input type="button" id="btn" value="提交">  
3.<script type="text/javascript">  
4.    $(function(){
    
        
5.        $("#btn").click(function(){
    
        
6.            var name=$("#name").val();    
7.            localStorage.setItem("name", name);   
8.        });    
9.    });    
10.</script>  
标签页2[html] view plain copy
1.<script type="text/javascript">  
2.    $(function(){
    
       
3.        window.addEventListener("storage", function(event){
    
        
4.            console.log(event.key + "=" + event.newValue);    
5.        });     
6.    });  
7.</script>  

方法二:
使用cookie+setInterval,将要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。
标签页1:

1.<input id="name">  
2.<input type="button" id="btn" value="提交">  
3.<script type="text/javascript">  
4.    $(function(){
    
        
5.        $("#btn").click(function(){
    
        
6.            var name=$("#name").val();    
7.            document.cookie="name="+name;    
8.        });    
9.    });    
10.</script>  
标签页2[html] view plain copy
1.<script type="text/javascript">  
2.    $(function(){
    
       
3.        function getCookie(key) {
    
        
4.            return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
5.        }     
6.        setInterval(function(){
    
        
7.            console.log("name=" + getCookie("name"));    
8.        }, 10000);    
9.    });  
10.</script>  

61、页面可见性(Page Visibility)API 可以有哪些用途?

页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面;隐藏的页面,就是我们没有看的页面。 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前,其他页面就是隐藏的,还有一种就是…,(把浏览器最小化,所有的页面就都不可见了)。
API 很简单,document.hidden 就返回一个布尔值,如果是true, 表示页面可见false 则表示,页面隐藏。 不同页面之间来回切换,触发visibilitychange事件。 还有一个document.visibilityState, 表示页面所处的状态,取值:visible, hidden 等四个。

document.addEventListener("visibilitychange", function(){
    
    
    if(document.hidden){
    
    
        document.title ="hidden";
    }else {
    
    
        document.title = "visibile";
    }
})

我们打开这个页面,然后再打开另一个页面,来回点击这两个页面,当我们看到这个页面时,标题显示visiable ,当我们看另一个页面时,标题显示hidden;
动画,视频,音频都可以在页面显示时打开,在页面隐藏时关闭。

62、JavaScript原型,原型链 ?

  1. js原型?
    js每声明一个function,都有prototype原型,prototype原型是函数的一个默认属性,在函数的创建过程中由js编译器自动添加。
    也就是说:当生产一个function对象的时候,就有一个原型prototype。
    举个栗子:

是不是还看到了一个_proto_的属性?!骚年,你的眼睛不错~待会在解释prototype和_proto_的基友关系!
prototype的属性值是一个对象,是属性的集合,是属性的集合,是属性的集合

Js原型链是实现继承的主要方法。其基本思想是:利用原型让一个引用类型继承另一个应用类型的属性和方法。
简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

首先,我觉得有必要先解释一下prototype 和_proto_之间的关系。
每一个基本对象都有自己的_proto_属性,而每一个函数对象都有自己的prototype原型(函数对象也属于基本对象,所以也有_proto_),每当去定义一个prototype的时候,就相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型。 我们还是来看图吧~比较清晰:

	var foo = {
    
    
       x: 10,
       y: 20
};

解析:当你定义一个函数对象的时候,其内部就有这样一个链表关系。声明foo对象,自带了_proto_的属性,而这个属性指向了prototype,从而实现对象的扩展(例如继承等操作)。

63、Javascript创建对象的几种方式?
javascript是一种基于prototype的面向对象语言 ,与java有非常大的区别,无法通过类来创建对象。那么,既然是面象对象的,如何来创建对象呢?
一、通过”字面量“方式创建。
方法:将成员信息写到{}中,并赋值给一个变量,此时这个变量就是一个对象。
例如:

 var person = (name:'dongjc', work:function() {
    
    console.log('write coding')});  

如果{}中为空,则将创建一个空对象:

 var person = {
    
    } //创建空对象 

演示代码:

<script>
        var person = {
    
    
            name: "dongjc",
            age: 32,
            Introduce: function () {
    
    
                alert("My name is " + this.name + ".I'm " + this.age)
            }
        }; 
        person.Introduce();   
</script>

我们还可以给对象丰富成员信息。
  对象.成员名称 = 值;
  对象[成员名称] = 值;
也可以获取对象的成员信息。
  对象.成员名称;
  对象[成员名称];

    <script type="text/javascript">
        var person = {
    
    
            name: "dongjc",
            age: 32,
            Introduce: function () {
    
     alert("My name is " + this.name + ".I'm " + this.age); }
        };
        person.worker = 'coding'; //丰富成员信息 
    </script>

二、通过”构造函数“方式创建。
 方法:

 var obj = new 函数名(); 

这与通过类创建对象有本质的区别。通过该方法创建对象时,会自动执行该函数。这点类似于php通过创建对像时,会自动调用构造函数,因此该方法称为通过"构造函数“方式创建对象。

    <script type="text/javascript"> function Person() {
    
    
            this.name = "dongjc";    //通过this关键字设置默认成员      
            var worker = 'coding';    //没有this关键字,对象创建后,该变量为非成员      
            this.age = 32;
            this.Introduce = function () {
    
     alert("My name is " + this.name + ".I'm " + this.age); }; alert("My name is " + this.name + ".I'm " + this.age);
        }; var person = new Person();
        person.Introduce(); 
    </script>

此代码一共会两次跳出对话框,原因在于创建对象是自动执行了该函数。
注意:this关键字的使用。这里的this与php中话法意思类似,指调用该函数的对象,这里指的是person。

三、通过object方式创建。
方法:先通过object构造器new一个对象,再往里丰富成员信息。

 var obj = new Object(); 

实例代码:

<script type="text/javascript">
        var person = new Object();
        person.name = "dongjc";
        person.age = 32;
        person.Introduce = function () {
    
    
            alert("My name is " + this.name + ".I'm " + this.age);
        };
        person.Introduce(); 
    </script>

64、Javascript作用链域?
JavaScript中所有的量都是存在于某一个作用域中的
除了全局作用域, 每一个作用域都是存在於某个作用域中的
在试图访问一个变量时JS引擎会从当前作用域开始向上查找直到Global全局作用域停止
例如

var A;//全局作用域
function B()
{
    
    
    var C;//C位于B函数的作用域
    function D()
    {
    
    
        var E;//E位于D函数的作用域
        alert(A)
    }
}

当alert(A)时, JS引擎沿着D的作用域, B的作用域, 全局作用域的顺序进行查找.
这三个作用域组成的有序集合就成为作用域链
至于为什么叫链, 你可以理解和链表有相似之处, 深层的作用域会能够访问到上层作用域, 就如同链表中两个连续节点能够单向访问一样

65、什么是window对象? 什么是document对象?
简单来说,document是window的一个对象属性。
Window 对象表示浏览器中打开的窗口。
如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
所有的全局函数和对象都属于Window 对象的属性和方法。
document 对 Document 对象的只读引用。
[window对象]

它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口。

属性

defaultStatus 缺省的状态条消息

document 当前显示的文档(该属性本身也是一个对象)

frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)

frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)

history 窗口的历史列表(该属性本身也是一个对象)

length 窗口内的框架数

location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location (因为这是当前显示文档的位置)

name 窗口打开时,赋予该窗口的名字

opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)

parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

self 当前窗口或框架的同义词

status 状态条中的消息

top 包含当前框架的最顶层浏览器窗口的同义词

window 当前窗口或框架的同义词,与self相同

方法

alert() 打开一个Alert消息框

clearTimeout() 用来终止setTimeout方法的工作

close() 关闭窗口

confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false

blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

focus() 把指定的窗口带到前台(另一个新方法)

open() 打开一个新窗口

prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序事件处理程序

Onload() 页面载入时触发

Onunload() 页面关闭时触发

[document 对象]

该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

属性

alinkColor 活动链接的颜色(ALINK)

anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)

anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)

bgColor 文档的背景颜色(BGCOLOR)

cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

fgColor 文档的文本颜色(标记里的TEXT特性)

form 文档中的一个窗体()(该属性本身也是一个对象)

forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

lastModified 文档最后的修改日期

linkColor 文档的链接的颜色,即标记中的LINK特性(链接到用户没有观察到的文档)

link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)

links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变 window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

title 文档的标题((TITLE>)

vlinkColor 指向用户已观察过的文档的链接文本颜色,即标记的VLINK特性

方法

clear 清除指定文档的内容

close 关闭文档流

open 打开文档流

write 把文本写入文档

writeln 把文本写入文档,并以换行符结尾
区别:
1、window 指窗体。document指页面。document是window的一个子对象。
2、用户不能改变 document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

66、写一个通用的事件侦听器函数

1. markyun.Event = {
    
      
2.      // 页面加载完成后  
3.      readyEvent : function(fn) {
    
      
4.          if (fn==null) {
    
      
5.              fn=document;  
6.          }  
7.          var oldonload = window.onload;  
8.          if (typeof window.onload != 'function') {
    
      
9.              window.onload = fn;  
10.          } else {
    
      
11.              window.onload = function() {
    
      
12.                  oldonload();  
13.                  fn();  
14.              };  
15.          }  
16.      },  
17.      // 视能力分别使用dom0||dom2||IE方式 来绑定事件  
18.      // 参数: 操作的元素,事件名称 ,事件处理程序  
19.      addEvent : function(element, type, handler) {
    
      
20.          if (element.addEventListener) {
    
      
21.              //事件类型、需要执行的函数、是否捕捉  
22.              element.addEventListener(type, handler, false);  
23.          } else if (element.attachEvent) {
    
      
24.              element.attachEvent('on' + type, function() {
    
      
25.                  handler.call(element);  
26.              });  
27.          } else {
    
      
28.              element['on' + type] = handler;  
29.          }  
30.      },  
31.      // 移除事件  
32.      removeEvent : function(element, type, handler) {
    
      
33.          if (element.removeEnentListener) {
    
      
34.              element.removeEnentListener(type, handler, false);  
35.          } else if (element.datachEvent) {
    
      
36.              element.detachEvent('on' + type, handler);  
37.          } else {
    
      
38.              element['on' + type] = null;  
39.          }  
40.      },   
41.      // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)  
42.      stopPropagation : function(ev) {
    
      
43.          if (ev.stopPropagation) {
    
      
44.              ev.stopPropagation();  
45.          } else {
    
      
46.              ev.cancelBubble = true;  
47.          }  
48.      },  
49.      // 取消事件的默认行为  
50.      preventDefault : function(event) {
    
      
51.          if (event.preventDefault) {
    
      
52.              event.preventDefault();  
53.          } else {
    
      
54.              event.returnValue = false;  
55.          }  
56.      },  
57.      // 获取事件目标  
58.      getTarget : function(event) {
    
      
59.          return event.target || event.srcElement;  
60.      },  
61.      // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;  
62.      getEvent : function(e) {
    
      
63.          var ev = e || window.event;  
64.          if (!ev) {
    
      
65.              var c = this.getEvent.caller;  
66.              while (c) {
    
      
67.                  ev = c.arguments[0];  
68.                  if (ev && Event == ev.constructor) {
    
      
69.                      break;  
70.                  }  
71.                  c = c.caller;  
72.              }  
73.          }  
74.          return ev;  
75.      }  
76.  };  

67、[“1”, “2”, “3”].map(parseInt) 答案是多少?
[1,NaN,NaN]

68、关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?
我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
事件处理机制:IE是事件冒泡、火狐是 事件捕获;
ie:event.cancelBubble = true 或者 return false
火狐: event.stopPropagation() 或者 return false

69、什么是闭包(closure),为什么要用它?
闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。
闭包的特性:
(1)函数内再嵌套函数
(2)内部函数可以引用外层的参数和变量
(3)参数和变量不会被垃圾回收机制回收

HTML:

<!-- li节点的onclick事件都能正确的弹出当前被点击的li索引 -->
<ul id="testUL">
  <li> index = 0</li>
  <li> index = 1</li>
  <li> index = 2</li>
  <li> index = 3</li>
</ul>

JS:

<script type="text/javascript">
  var nodes = document.getElementsByTagName("li");
  for(i = 0;i<nodes.length;i+= 1){
    
    
    nodes[i].onclick = (function(i){
    
    
      return function() {
    
    
        console.log(i);
      } //不用闭包的话,值每次都是4    })(i);
  }
</script>

然后我们看看下面的一段代码,这是对闭包作用的非常直白的描述:

function say667() {
    
    // Local variable that ends up within closure
  var num = 666;
  var sayAlert = function() {
    
    
    alert(num);
  }
  num++;
  return sayAlert;
}
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
因为say667()的内部函数的执行需要依赖say667()中的变量

70、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?
除了正常运行模式,ECMAscript 5添加了第二种运行模式:“严格模式”(strict mode)。
顾名思义,这种模式使得Javascript在更严格的条件下运行。
为什么用严格模式

  • 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
  • 消除代码运行的一些不安全之处,保证代码运行的安全;
  • 提高编译器效率,增加运行速度;
  • 为未来新版本的Javascript做好铺垫。
    "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
    另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。掌握这些内容,有助于更细致深入地理解Javascript,让你变成一个更好的程序员。

进入标志

"use strict";

如何调用
(1)针对单个脚本

 <script>
    "use strict";
    console.log("这是严格模式。");
  </script>

(2)针对单个函数

function strict(){
    
    
    "use strict";
    return "这是严格模式。";
  }
  function notStrict() {
    
    
    return "这是正常模式。";
  }

语法与行为改变
严格模式对Javascript的语法和行为,都做了一些改变。
5.1 全局变量显式声明
在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。

"use strict";
  v = 1; // 报错,v未声明
  for(i = 0; i < 2; i++) {
    
     // 报错,i未声明
  }

因此,严格模式下,变量都必须先用var命令声明,然后再使用。 禁止this关键字指向全局对象

function f(){
    
    
    return !this;
  } 
  // 返回false,因为"this"指向全局对象,"!this"就是false
  function f(){
    
     
    "use strict";
    return !this;
  } 
  // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。
//因此,使用构造函数时,如果忘了加new,this不再指向全局对象,而是报错。
function f(){
    
    
    "use strict";
    this.a = 1;
  };
  f();// 报错,this未定义
 

禁止删除变量
严格模式下无法删除变量。只有configurable设置为true的对象属性,才能被删除。

"use strict";
  var x;
  delete x; // 语法错误
  var o = Object.create(null, {
    
    'x': {
    
    
      value: 1,
      configurable: true
  }});
  delete o.x; // 删除成功

对象不能有重名的属性
正常模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。

"use strict";
  var o = {
    
    
    p: 1,
    p: 2
  }; // 语法错误

函数不能有重名的参数
正常模式下,如果函数有多个重名的参数,可以用arguments[i]读取。严格模式下,这属于语法错误。

 "use strict";
  function f(a, a, b) {
    
     // 语法错误
    return ;
}

71、如何判断一个对象是否属于某个类?
javascript中检测对象的类型的运算符有:typeof、constructor、instanceof
typeof:typeof是一个一元运算符,返回结果是一个说明运算数类型的字符串。如:“number”,“string”,“boolean”,“object”,“function”,“undefined”(可用于判断变量是否存在)。 但 typeof 的能力有限,其对于Date、RegExp、Array类型返回的都是"object"。所以它只在区别对象和原始类型的时候才有用。要区一种对象类型和另一种对象类型,必须使用其他的方法。

instanceof 运算符:instanceof 运算符要求其左边的运算数是一个对象,右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例,则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例,或者 object 为 null,则返回 false。instanceof方法可以判断变量是否是数组类型,但是只限同一全局环境之内,在一个页面有多个iframe的情况下,instanceof失效。

function Car(make, model, year) {
    
    
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// expected output: true

console.log(auto instanceof Object);
// expected output: true

constructor 属性: JavaScript中,每个对象都有一个constructor属性,它引用了初始化该对象的构造函数,常用于判断未知对象的类型。如给定一个求知的值 通过typeof运算符来判断它是原始的值还是对象。如果是对象,就可以使用constructor属性来判断其类型。

<script type="text/javascript">

var test=new Array();

if (test.constructor==Array)
{
    
    
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
    
    
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
    
    
document.write("This is a Date");
}
if (test.constructor==String)
{
    
    
document.write("This is a String");
}

/输出
This is an Array
</script>

Object.prototype.toString.call():该方法是目前为止发现的判断一个对象类型的最好的办法。

72、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
hasOwnProperty

74、js延迟加载的方式有哪些?
js的延迟加载有助与提高页面的加载速度,以下是延迟加载的几种方法:
(1)使用setTimeout延迟方法的加载时间
延迟加载js代码,给网页加载留出更多时间

<script type="text/javascript" >
    function A(){
    
    
        $.post("/lord/login",{
    
    name:username,pwd:password},function(){
    
    
            alert("Hello");
        });
    }
    $(function (){
    
    
        setTimeout('A()', 1000); //延迟1秒
    })</script>

(2)让js最后加载
例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

(3)上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。
//这些代码应被放置在</body>标签前(接近HTML文件底部)

<script type="text/javascript">
    function downloadJSAtOnload() {
    
    
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>

这段代码意思是等到整个文档加载完后,再加载外部文件“defer.js”。
使用此段代码的步骤:
1).复制上面代码
2).粘贴代码到HTML的标签前 (靠近HTML文件底部)
3).修改“defer.js”为你的外部JS文件名
4).确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。
注意:这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

75、同步和异步的区别?
同步
同步的思想是:所有的操作都做完,才返回给用户。这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉)。这种情况下,用户不能关闭界面,如果关闭了,即迁移程序就中断了。

异步
将用户请求放入消息队列,并反馈给用户,系统迁移程序已经启动,你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉,会告诉你,你的请求系统已经响应了。你可以关闭界面了。

同步,是所有的操作都做完,才返回给用户结果。即写完数据库之后,在相应用户,用户体验不好。
异步,不用等所有操作等做完,就相应用户请求。即先相应用户请求,然后慢慢去写数据库,用户体验较好。

异步操作例子:
为了避免短时间大量的数据库操作,就使用缓存机制,也就是消息队列。先将数据放入消息队列,然后再慢慢写入数据库。

引入消息队列机制,虽然可以保证用户请求的快速响应,但是并没有使得我数据迁移的时间变短(即80万条数据写入mysql需要1个小时,用了redis之后,还是需要1个小时,只是保证用户的请求的快速响应。用户输入完http url请求之后,就可以把浏览器关闭了,干别的去了。如果不用redis,浏览器不能关闭)。

同步就没有任何价值了吗?
银行的转账功能。 哈哈哈哈哈 不转完你放得下心吗?

后续还在陆续更新~~~

猜你喜欢

转载自blog.csdn.net/qq_43291759/article/details/109775000