前端面试知识点锦集JavaScript

Posted 2020-08-27 CC大神01

 

哪些地方会出现css阻塞，哪些地方会出现js阻塞?

　　js的阻塞特性：

　　所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载仍然会阻塞其它资源的下载(例如.图片，css文件等)。

　　由于浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。

　　嵌入JS会阻塞所有内容的呈现，而外部JS只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。

　　CSS怎么会阻塞加载?

　　CSS本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6下CSS都是阻塞加载)

　　当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。

　　根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

　　JS应该放在什么位置?

　　(1)、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

　　(2)、如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

　　(3)、使用defer(只支持IE)

　　(4)、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用

　　javascript无阻塞加载具体方式

　　将脚本放在底部。\\还是放在head中，用以保证在js加载前，能加载出正常显示的页面。\\

　　此技术的重点在于：无论在何处启动下载，文件额下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)。

　　19、对比Flash与ajax哪个好?

　　Ajax的优势：

　　(1)、可搜索性

　　普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的。虽然Google等一些大型的搜索引擎可以检索SWF内部的内容，但是仍然有很多麻烦存在。

　　(2)、开放性

　　Flash常年以来被Macromedia看的很死。包括Flex、FMS等辅佐技术一直都需要昂贵的安装、维护费用。而JS则没有这样的麻烦。没有人愿意承担法律和版权的风险。

　　费用

　　Flash开发是很昂贵的，因为FlashIDE等环境都是要收费的.而Ajax则不同.虽然有一些便宜的生成swf的工具，但是他们的工能实在无法满足复杂需求。

　　(3)、易用性

　　Ajax程序有更好的易用性。由于中间有一层Flashplayer代理层，因此许多辅助功能无法被Flash灵活利用。而且Flash在一些方面有着不好的口碑。比如弹出广告、比如恶意代码。

　　(http://awflasher.com个人认为这八成是乱上xx网站造成的)

　　(4)、易于开发

　　人们开发复杂的Ajax和Flash应用程序时，都会借助一些高级的开发工具。普遍来说，Ajax的开发包比Flash简便、容易。

　　Flash的优势：

　　(1)、多媒体处理

　　Flash在音频、视频等多媒体领域相比HTML有绝对的优势。现在几乎所有的网站都包含有Flash内容。

　　(2)、兼容性

　　兼容性好：由于通过了唯一的FlashPlayer“代理”。人们不必像调试JS那样，在不同的浏览器中调试程序。

　　(3)、矢量图型

　　这是Flash最大的优势，同样处在这一领域的SVG、Canvas element以及Direct完全不能与Flash相比。

　　(4)、客户端资源调度

　　Flash能够更容易的调用浏览器以外的外部资源。比如摄像头、麦克风等。然而这是普通的HTML无法完成的。但是这也许是一个缺点(为什么呢?)

　　Ajax的劣势：

　　(1)、它可能破坏浏览器的后退功能

　　(2)、使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过这些都有相关方法解决。

　　Flash的劣势：

　　(1)、二进制格式

　　(2)、格式私有

　　(3)、flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间

　　(4)/性能问题

　　ajax与flash各有利弊，到底哪个好，这取决于你的需求

　　20、请你解释一下事件冒泡机制

　　a、在一个对象上触发某类事件(比如单击onclick事件)，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理(父级对象所有同类事件都将被激活)，或者它到达了对象层次的最顶层，即document对象(有些浏览器是window)。

　　b、冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发

　　c、js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。

　　//阻止冒泡时间方法，兼容ie(e.cancleBubble)和ff(e.stopProgation)function stopBubble(e){var evt = e||window.event;evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡evt.preventDefault

　　21、请你说说split()与join() 函数的区别?

　　前者是切割成数组的形式，后者是将数组转换成字符串Join 函数获取一批字符串，然后用分隔符字符串将它们联接起来，从而返回一个字符串。Split 函数获取一个字符串，然后在分隔符处将其断开，从而返回一批字符串。但是，这两个函数之间的主要区别在于 Join 可以使用任何分隔符字符串将多个字符串连接起来，而 Split 只能使用一个字符分隔符将字符串断开。 简单地说，如果你用split，是把一串字符(根据某个分隔符)分成若干个元素存放在一个数组里。而Join是把数组中的字符串连成一个长串，可以大体上认为是split的逆操作。

　　22、说说你对Promise的理解?

　　ES6 原生提供了 Promise 对象。

　　所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作)，并且这个事件提供统一的 API，可供进一步处理。Promise 对象有以下两个特点。

　　(1)、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：Pending(进行中)、Resolved(已完成，又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。

　　(2)、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果。这与事件(Event)完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

　　有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

　　Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

　　23、谈谈你对Javascript垃圾回收机制的理解?

　　(1)、标记清除(mark and sweep)

　　这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。

　　垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量(闭包)，在这些完成之后仍存在标记的就是要删除的变量了

　　(2)、引用计数(reference counting)

　　在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

　　在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。

　　24、说说你对原型(prototype)理解?

　　JavaScript是一种通过原型实现继承的语言与别的高级语言是有区别的，像java，C#是通过类型决定继承关系的，JavaScript是的动态的弱类型语言，总之可以认为JavaScript中所有都是对象，在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个” prototype”内部属性，这个属性所对应的就是该对象的原型。

　　“prototype”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome内核的JavaScript引擎中提供了”proto“这个非标准的访问器(ECMA新标准中引入了标准对象原型访问器”Object.getPrototype(object)”)。

　　原型的主要作用就是为了实现继承与扩展对象。

　　25、typeof与instanceof的区别是什么?

　　在 JavaScript 中，判断一个变量的类型可以用typeof

　　(1)、数字类型， typeof 返回的值是 number。比如说：typeof(1)，返回值是number

　　(2)、字符串类型， typeof 返回的值是 string。比如typeof(“123”)返回值是string。

　　(3)、布尔类型， typeof 返回的值是 boolean 。比如typeof(true)返回值是boolean。

　　(4)、对象、数组、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。

　　(5)、函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。

　　(6)、不存在的变量、函数或者undefined，将返回undefined。比如：typeof(abc)、typeof(undefined)都返回undefined。

　　在 JavaScript 中,instanceof用于判断某个对象是否被另一个函数构造。

　　使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

　　26、说说你对node.js的理解

　　a、Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

　　b、能方便地搭建响应速度快、易于扩展的网络应用，Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行的数据密集型的实时应用。

　　c、 简单说Node.js就是运行在服务器端的JavaScript，是现在流行的语言中能同时运行在前端与后台的程序语言

　　27、NPM(包管理器)作用是什么?

　　NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

　　a、允许用户从NPM服务器下载别人编写的第三方包到本地使用。

　　b、允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

　　c、允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。