前端面试知识点锦集JavaScript

哪些地方会出现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服务器供别人使用。

时间: 2024-07-30 00:00:55

前端面试知识点锦集JavaScript的相关文章

前端面试知识点锦集 JavaScript

哪些地方会出现css阻塞,哪些地方会出现js阻塞? js的阻塞特性: 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.直到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容.为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等). 由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现. 嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显

【干货分享】前端面试知识点锦集02(CSS篇)——附答案

二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型.

前端面试知识点梳理之五——javascript面向对象

一.相关问题 1.创建对象有几种方法 2.原型,构造函数,实例,原型链 3.instanceof的原理 4.new运算符 二.问题解答 1.创建对象有几种方法 原文地址:https://www.cnblogs.com/bobodeboke/p/8449802.html

前端面试知识点集锦

个人总结的比较全面的前端面试知识点.主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点. 本人只是对这些知识进行了一个大概的总结,还有一部分技术还没开始涉及,后期会持续添加.如果需要进行深入了解可以根据知识点查询相关的技术文章. 本文涵盖了以下各个方面的知识: HTML, CSS, JS基础知识 网站性能优化知识 前端项目自动化构建相关知识 算法相关知识 网络与HTTP协议相关知识 前端的安全相关知识 插件编写相关知识 JS模块化编程相关知识 Github Repo:https://g

菜鸟前端程序员小知识点锦集二

1. 数组排序      Array---sort()方法:     1> 用sort方法对字母排序:         var arr=new Array(6)         arr[0]=a.. arr[1]=...         arr.sort();         排出来按a-z的顺序排     2> 用sort方法对数字排序:         arr.sort(sortNumber);从小到大对数字排序.     3> 如果按照其他标准进行排序,需提供函数,        

2017 web前端面试知识点汇总

跨域 同源策略:浏览器上为安全性考虑实施的安全策略.url由协议.域名.端口号和路径组成,如果两个url的协议.域名和端口号相同,则是同源. ajax请求受到同源策略的限制 一.jsonp 利用<script>标签的src属性可以加载跨域的js脚本特点,动态创建script标签来载入跨域资源,jquery对该方法进行了封装,需要设置dataType为jsonp,只支持get请求 二.domain 三.CORS 服务端在响应头加上允许访问的domain和HTTP method 四.服务端代理 因

前端面试知识点梳理之四——http协议

一.相关问题 http协议的主要特点 http报文的组成部分 http方法 post与get的区别 http状态码 什么是持久连接 什么是管线化 二.问题解答 1.http协议的主要特点 无连接:无连接的含义是限制每次连接只处理一个请求.服务器处理完客户的请求,并返回应答后,即断开连接 无状态:无状态是指协议对于事务处理没有记忆能力.缺少状态意味着如果后续处理需要前面的信息,则它必须重传 快速灵活:允许传输任意类型的数据对象,使用content-type加以标记. 2.http报文的组成部分 h

问得最多的十个JavaScript前端面试问题

我知道有很多人不同意这种类型的面试.其实不管你喜不喜欢,你都得接受.尤其当你是自学的,而且要申请第一份工作时. 我估计很多有人其它方法来证明他自己,像Github/ 项目地址可能是非常理想的证明方法,但也别全都指望这些. 好消息是有一些很难的问题,在有限的时间里我没答上来(比如说Event Loop和杨辉三角),一些其它面试侯选人也承认他们也没答上来,这会让讨论变得轻松很多. 坏消息是有些面试之后就没有任何反馈了.有三家公司再也没联系过.这点击打击自信,而且没有受到尊重.然后你可能会有心理斗争,

php面试需要掌握的基础题目锦集

1.session与cookie的区别? 答:session:储存用户访问的全局唯一变量,存储在服务器上的php指定的目录中的(session_dir)的位置进行的存放 cookie:用来存储连续訪問一个頁面时所使用,是存储在客户端,对于Cookie来说是存储在用户WIN的Temp目录中的. 两者都可通过时间来设置时间长短 2.如何修改SESSION的生存时间 答:方法1:将php.ini中的session.gc_maxlifetime设置为9999重启apache 方法2:$savePath