参考高性能javascript 理解浏览器UI线程  用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程  UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 <button onclick="handleClick()">click</button> <script type="text/javascript"> function handleClick() { var div = do…
循环 在javaScript中的四种循环中(for.for-in.while.do-while),只有for-in循环比其它几种明显要慢,另外三种速度区别不大 有一点需要注意的是,javascript没有块级作用域,只有函数级作用域,也就是说在for循环初始化中的var语句会创建一个函数级变量而非循环级变量 优化循环的方法有如下 1.减少对象成员及数组项的查找次数(使用局部变量保存需要查找的对象成员) 2.颠倒数组的顺序来提高循环性能,也就是从最后一项开始向前处理 for (var i = ar…
本文是学习<高性能javascript>(Nichols C. Zakes著)的一些总结,虽然书比较过时,里面的知识点也有很多用不上了,但是毕竟是前人一步步探索过来的,记录着javascript艰难的发展历程,如今站在巨人的肩膀上,也许我们也能发掘更好的javascript性能. 第一章:加载和执行 管理浏览器中的javascript代码是个棘手的问题,因为代码执行过程会阻塞浏览器的其他进程,比如用户界面绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如外部链接文件…
----------------------------------------------------------- 第一章 加载和执行 -------------------------------------1.脚本位置    浏览器在遇到<script>标签时会等待脚本下载完并执行完才会继续渲染页面        因为js代码有可能会改变dom结构,所以需要等待js的执行完成        遇到<script>标签 -> 下载脚本 -> 执行脚本 -> 继…
零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) 这样的组织结构也符合我们的开发习惯,首先进入第一部分. 一.JavaScript加载 起因:script脚本的加载会阻塞浏览器渲染页面和处理用户交互,如果加载的script脚本太多太大,就会长时间阻塞,造成页面假死. 解决方案: 1.脚本位置 放在底部. 放在底部可以保证页面主体结构已经基本加载完…
By XFE-堪玉 阅读<高性能javascript>后,对其内容的一个整理和精简 加载与执行 将script标签放在body结尾标签上面 控制script标签数量(每一次script解析都意味着阻塞或延迟) 内嵌脚本不要放在link样式之后 对script标签应用defer属性 动态创建script标签加载js文件(模块化框架即可) 数据存取 不影响this的情况下,对反复访问的对象进行变量保存 合理使用局部变量,减少作用域跨越 避免使用with和eval 谨慎地使用闭包 减少Object对…
最近在阅读这本Nicholas C.Zakas(javascript高级程序设计作者)写的最佳实践.性能优化类的书.记录下主要知识. 加载和执行 脚本位置 放在<head>中的javascript文件会阻塞页面渲染:一般来说浏览器中有多种线程:UI渲染线程.javascript引擎线程.浏览器事件触发线程.HTTP请求线程等.多线程之间会共享运行资源,浏览器的js会操作dom,影响渲染,所以js引擎线程和UI渲染线程是互斥的,导致执行js时会阻塞页面的渲染.最佳实践:所有的script标签应尽…
这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令的过程,这个过程就会带来一定的性能损耗,所以在js中做性能的优化是必须的 javascript的阻塞特性:浏览器在执行js代码的时候,不能做其他的任何事情,因为浏览器使用单一的进程来处理用户界面的刷新和javascript的脚本执行,也就是说什么时候执行js脚本影响着用户对页面的使用体验(之所以js…
这本<高性能JavaScript>讲述了有关JavaScript性能优化的方方面面,主要围绕以下几个方面: 1> 加载顺序 2> 数据访问(如怎样的数据类型访问最快,怎样的作用域链最优) 3> DOM编程(如怎样的方式访问DOM元素性能是最优的) 4> 字符串和正则 5> Ajax 6> 编程实践(性能测试工具的使用.创建与部署JavaScript应用程序.如何提升程序响应) var script = document.createElement (&quo…
我们知道,对DOM的操作都是非常的耗性能的,那么为什么会耗性能呢?      文档对象模型(DOM)是一个独立于语言的,使用 XML和 HTML 文档操作的应用程序接口(API).在浏览器中,主要与 HTML 文档打交道,在网页应用中检索 XML 文档也很常见.DOM APIs 主要用于访问这些文档中的数据.尽管 DOM 是与语言无关的 API,在浏览器中的接口却是以 JavaScript 实现的.客户端大多数脚本程序与文档打交道,DOM 就成为 JavaScript 代码日常行为中重要的组成部…