We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<script>
</body>
/*** * 推荐的非阻塞模式(用XHR下载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("head")[0].appendChild(script); }
innerHTML
createElement / appendChild
优化循环工作量的第一步是减少对象成员和数组项查找的次数
倒序循环是编程语言中常用的性能优化方法
forEach 比传统循环(for、while、do while)要慢,每个数组项要关联额外的函数 调用是造成速度慢的原因
尽量减少循环中每次迭代的运算量,并减少循环迭代次数
除非你要迭代遍历一个属性未知的对象,否则不要使用 for-in 循环
switch 表达式总是比 if-else 更快,但只有当条件体数量很大时才明显更快。两者间的主要性能区别在于:当条件体增加时,if-else 性能负担增加的程度比 switch 更多
将最常见的(频率高的)条件体放在 if-else 首位(更快作出选择)
将 if-else 组织成一系列嵌套的 if-else 替换 else if 再判断,可以减少条件判断。
当条件体的数目为大量离散值时,使用查表法(对象/数组/Map 直接选择)
任何可以用递归实现的算法都可以用迭代实现。使用优化的循环替代长时间运行的递归函数可以提高性能, 因为运行一个循环比反复调用一个函数的开销要低。
减少工作量就是最好的性能优化技术。代码所做的事情越少,它的运行速度就越快
使用 memoization 技术,通过缓存先前计算结果为后续计算所重复使用,节省计算时间。
算法本身复杂度优化
字符串合并:大多数情况下 String.prototype.concat 比简单的 + 和 += 慢
JavaScript 和UI界面在同一个主线程内运行,同一时刻只能其中一个可以运行。这意味着当 JavaScript 代码正在运行时,用户界面不能响应,反之亦然。
JavaScript 运行时间不应该超过 100 毫秒。过长的运行时间导致 UI 更新出现可察觉的延迟,从而对整体用户体验产生负面影响。这时可用定时器让出时间片,分解长运行脚本成为较短的片断
/** * 用定时器让出时间片, 每25ms后再将任务继续加入执行队列 * 并且做了限时运行代码,在50ms内直接继续下一次的执行,(执行超过50ms后再让出时间片) * @param {array} items 需要处理的数组对象 * @param {function} process 处理函数 * @param {fucntion} callback 完成回调函数 */ function timedProcessArray(items, process, callback) { var todo = items.concat(); //create a clone of the original setTimeout(function() { var start = +new Date(); do { process(todo.shift()); } while (todo.length > 0 && (+new Date() - start < 50)); if (todo.length > 0) { setTimeout(arguments.callee, 25); } else { callback(items); } }, 25); }
通过使用Web Workers,Worker 可以在独立于主线程(通常是UI线程)的后台线程中,执行费时的处理任务。主线程不会因此被阻塞/放慢。
数据格式 越轻量级越好,最好是 JSON 和字符分隔的自定义格式。xml、json、html、custom各数据格式下载和解析的性能测试
The text was updated successfully, but these errors were encountered:
No branches or pull requests
JavaScript加载
<script>
标签尽可能放置在页面的底部,紧靠 body 关闭标签</body>
的上方,保证页面在脚本 运行之前完成解析样式<script>
标签越少,页面的加载速度就越快,响应也更加迅速。(单个文件文件也不宜过大,可利用浏览器并行下载能力, 切割成多个文件)<script>
元素;用 XHR 对象下载JavaScript代码,并注入到页面中数据访问
DOM 编程
innerHTML
和createElement / appendChild
性能比较:在老的浏览器 innerHTML 要快得多,在新的浏览器差距不大,甚至 createElement 表现更好• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle() (currentStyle in IE)(在 IE 中此函数称为 currentStyle)
获取布局信息这些属性和方法,需返回最新的数据,浏览器不得不刷新 渲染队列并重排版。所以 不要在布局信息改变时查询它
算法和流程控制
优化循环工作量的第一步是减少对象成员和数组项查找的次数
倒序循环是编程语言中常用的性能优化方法
forEach 比传统循环(for、while、do while)要慢,每个数组项要关联额外的函数 调用是造成速度慢的原因
尽量减少循环中每次迭代的运算量,并减少循环迭代次数
除非你要迭代遍历一个属性未知的对象,否则不要使用 for-in 循环
switch 表达式总是比 if-else 更快,但只有当条件体数量很大时才明显更快。两者间的主要性能区别在于:当条件体增加时,if-else 性能负担增加的程度比 switch 更多
将最常见的(频率高的)条件体放在 if-else 首位(更快作出选择)
将 if-else 组织成一系列嵌套的 if-else 替换 else if 再判断,可以减少条件判断。
当条件体的数目为大量离散值时,使用查表法(对象/数组/Map 直接选择)
任何可以用递归实现的算法都可以用迭代实现。使用优化的循环替代长时间运行的递归函数可以提高性能, 因为运行一个循环比反复调用一个函数的开销要低。
减少工作量就是最好的性能优化技术。代码所做的事情越少,它的运行速度就越快
使用 memoization 技术,通过缓存先前计算结果为后续计算所重复使用,节省计算时间。
算法本身复杂度优化
响应接口
字符串合并:大多数情况下 String.prototype.concat 比简单的 + 和 += 慢
JavaScript 和UI界面在同一个主线程内运行,同一时刻只能其中一个可以运行。这意味着当 JavaScript 代码正在运行时,用户界面不能响应,反之亦然。
JavaScript 运行时间不应该超过 100 毫秒。过长的运行时间导致 UI 更新出现可察觉的延迟,从而对整体用户体验产生负面影响。这时可用定时器让出时间片,分解长运行脚本成为较短的片断
通过使用Web Workers,Worker 可以在独立于主线程(通常是UI线程)的后台线程中,执行费时的处理任务。主线程不会因此被阻塞/放慢。
数据格式 越轻量级越好,最好是 JSON 和字符分隔的自定义格式。xml、json、html、custom各数据格式下载和解析的性能测试
编程实践
构建与部署
The text was updated successfully, but these errors were encountered: