摘要：所以全局对象的返回所需要的时间是最长的应该用局部变量存起来减少作用域链的查询次数。这就导致本来可以自己访问的局部变量需要在作用域链的后面一层被访问到了。因为访问对象中的一些属性和方法涉及到原型链的查找这个和作用域链是一个道理。
第一部分:关于script
当把js脚本通过script标签放在head中的时候,早期浏览器在遇到script的时候会阻止浏览器加载和渲染html。直到javascript脚本被下载并执行完,且这些javascript是依次下载和执行,不能并行。如下面这个图所示：
现代浏览器如IE8,Firefox 3.5,Safari 4,Chrome 允许同时并行下载js文件。但是不幸的是js下载仍然会阻塞其他资源的下载,如图片。还是会阻止浏览器去加载和渲染html。解决办法就是将js body的最底端。
限制script标签的数量,因为每次遇到script都要阻塞浏览器加载和渲染html。这个对于内联和外联js都是一样的。但是对于外联js,每个http请求都需要和服务器建立一次连接,时间上的开销也不小。所以下载一个100KB的js文件比下载4个25KB的js文件速度要快。所以可以将js文件进行文件的合并减少http请求的数量提高性能。
非阻塞脚本在html加载完成后进行javascript源码的下载。有几种方法可以做到：
3.1 在script上添加defer属性。defer属性告诉浏览器该javascript代码不会影响dom树。所以浏览器可以放心的将他延迟执行,即等dom加载完成后执行。defer属性的script可以防止浏览器的任何一个地方，当浏览器遇到这个script时候,开始下载但是并不立即执行，等到dom树加载完成在onload事件触发之前执行,且不会影响到其他资源的下载。
Script Defer Example
执行结果：
在不支持defer属性的浏览器中结果为：defer script load 在支持defer属性的浏览器中的结果是script defer load
3.2 动态执行将javascript代码插入文档中。
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName_r("head")[0].appendChild(script);
}
第二部分: 关于作用域链和原型链3.3 通过XHR 从服务端获取js 动态插入到文档中。
每个函数都会有个作用域链,用于标识符的查找也就是变量的查找。所以如果变量在原型链越后面的地方访问所需要的时间就越长。所以全局对象的返回所需要的时间是最长的,应该用局部变量存起来减少作用域链的查询次数。
with语句和try-catch 会改变执行函数的作用域链。会在作用域链前加上with或者catch自己的活跃对象AO。这就导致本来可以自己访问的局部变量需要在作用域链的后面一层被访问到了。增加了变量访问的时间。所以避免使用with语句。而try-catch还是很有用的。不应该避免,可以通过在catch到错误后用一个错误处理函数来解决这种性能问题。
在javascript中存储数据的地方有四个。分别是直接量,变量,数组,对象。其中直访问接量和变量是最快的,两者差别不大。但是对于数组和对象相对来说要慢些,特别是对象。因为访问对象中的一些属性和方法涉及到原型链的查找,这个和作用域链是一个道理。所以需要存储这些需要遍历原型链的方法或者属性提供性能。
第三部分 ： DOM对象编程浏览器一般分为渲染引擎和js引擎,如chrome 它的渲染引擎就是webkit 它的js引擎是v8。
访问和修改dom是需要付出性能代价的。因为修改一个dom元素可能回去触发浏览器去重新计算它的几何属性,重新排版。所以尽可能少的去和dom元素打交道。
选用更快的DOM API 比如用nextSibling 代替childNodes 或者用children代替childNodes。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78041.html
摘要：除此以外，让元素脱离文档流也是一个很好的方法。因为元素一旦脱离文档流，它对其他元素的影响几乎为零，性能的损耗就能够有效局限于一个较小的范围。讲完重排与重绘，往元素上绑定事件也是引起性能问题的元凶。高性能这本书非常精致，内容也非常丰富。 showImg(https://segmentfault.com/img/bVJgbt?w=600&h=784); 入手《高性能JavaScript》一...
摘要：首先将对象引用存储到局部变量中，全局变量的访问减少，当有很多全局变量被反复访问时，这种方法对性能的改善是很明显的。 javascript加载和运行 1. 脚本位置 尽管浏览器已经允许并行下载javascript文件，但是javascript下载过程仍然会阻塞其他资源的下载，如图片。页面仍然需要等待所有javascript代码下载并执行完成才能继续所以优化javascript的首要原...
摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程 从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。 网络基础知识之 HTTP 协议 详细介绍 HTT...
摘要：作用域链查找作用域链的查找是逐层向上查找。而全局变量和闭包则会与之相反，继续保存，所以使用用后需手动标记清除，以免造成内存泄漏。获取元素的属性获取元素的属性等参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域链查找 作用域链的查找是逐层向上查找。查...
摘要：虽然会有阻塞但还是有几招可以减少对性能的影响的。下载资源是异步的但是执行代码的时候仍是同步的同样会造成阻塞。缺点文件必须与所请求页面处于同一个域这种情况下文件不能从下载不适合大型的应用。 浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个...
阅读 1268·2021-11-11 10:57
阅读 3691·2021-09-07 10:10
阅读 3429·2021-08-03 14:03
阅读 3046·2019-08-30 13:45
阅读 659·2019-08-29 11:19
阅读 1020·2019-08-28 18:07
阅读 3066·2019-08-26 13:55
阅读 775·2019-08-26 12:17
