Enviar búsqueda
Cargar
浅谈 Javascript 性能优化
•
Descargar como PPTX, PDF
•
18 recomendaciones
•
4,084 vistas
R
rainoxu
Seguir
improve javascript performance
Leer menos
Leer más
Desarrollo personal
Denunciar
Compartir
Denunciar
Compartir
1 de 53
Descargar ahora
Recomendados
Mysql performance analyze
Mysql performance analyze
a8888dongdong
如何Hold住性能测试
如何Hold住性能测试
higkoo
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
Dexter Yang
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Dexter Yang
Linux 系列分享[1] 概览
Linux 系列分享[1] 概览
rainoxu
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具
Dexter Yang
Git 零基础介绍
Git 零基础介绍
Ethan Zhang
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
Dexter Yang
Recomendados
Mysql performance analyze
Mysql performance analyze
a8888dongdong
如何Hold住性能测试
如何Hold住性能测试
higkoo
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
Dexter Yang
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Dexter Yang
Linux 系列分享[1] 概览
Linux 系列分享[1] 概览
rainoxu
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具
Dexter Yang
Git 零基础介绍
Git 零基础介绍
Ethan Zhang
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
Dexter Yang
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Web前端性能优化 2014
Web前端性能优化 2014
Yubei Li
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
Node way
Node way
Ethan Zhang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Tim (文昌)
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
Dexter Yang
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
Berserk js
Berserk js
taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
前端概述
前端概述
Ethan Zhang
前端性能测试
前端性能测试
tbmallf2e
前端性能优化&测试
前端性能优化&测试
tbmallf2e
網站設計100步
網站設計100步
evercislide
高端版Tmall
高端版Tmall
tbmallf2e
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
iflytek
Más contenido relacionado
Destacado
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Joseph Chiang
Web前端性能优化 2014
Web前端性能优化 2014
Yubei Li
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
Node way
Node way
Ethan Zhang
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Will Huang
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
Tim (文昌)
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
Dexter Yang
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
Berserk js
Berserk js
taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
前端概述
前端概述
Ethan Zhang
Destacado
(17)
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
Web前端性能优化 2014
Web前端性能优化 2014
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
Node way
Node way
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
淘宝开放产品前端实践
淘宝开放产品前端实践
第三方内容开发最佳实践
第三方内容开发最佳实践
高力:19楼现有前端架构
高力:19楼现有前端架构
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
李成银:前端编译平台
李成银:前端编译平台
Berserk js
Berserk js
编辑器设计U editor
编辑器设计U editor
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
前端概述
前端概述
Similar a 浅谈 Javascript 性能优化
前端性能测试
前端性能测试
tbmallf2e
前端性能优化&测试
前端性能优化&测试
tbmallf2e
網站設計100步
網站設計100步
evercislide
高端版Tmall
高端版Tmall
tbmallf2e
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
iflytek
When Android meets RxJava
When Android meets RxJava
Sean Liu
互联网创业服务器运维工具集
互联网创业服务器运维工具集
zhen chen
Beyond rails server
Beyond rails server
Michael Chen
前端性能优化和自动化
前端性能优化和自动化
kaven yan
Hbase在淘宝的应用与优化 修改
Hbase在淘宝的应用与优化 修改
yp_fangdong
手机之家的数据访问层实践
手机之家的数据访问层实践
guestf5121c
手机之家的数据访问层实践
手机之家的数据访问层实践
xcq
The way to continuous delivery
The way to continuous delivery
Qiao Liang
JavaScript Engine
JavaScript Engine
jay li
Struts Mitac(1)
Struts Mitac(1)
wangjiaz
纵览Loadrunner核心功能
纵览Loadrunner核心功能
beiyu95
Javascript 闭包
Javascript 闭包
jason hu 金良胡
Html5移动网站开发实践
Html5移动网站开发实践
Web Zhao
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
yiditushe
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
appollo0312
Similar a 浅谈 Javascript 性能优化
(20)
前端性能测试
前端性能测试
前端性能优化&测试
前端性能优化&测试
網站設計100步
網站設計100步
高端版Tmall
高端版Tmall
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
When Android meets RxJava
When Android meets RxJava
互联网创业服务器运维工具集
互联网创业服务器运维工具集
Beyond rails server
Beyond rails server
前端性能优化和自动化
前端性能优化和自动化
Hbase在淘宝的应用与优化 修改
Hbase在淘宝的应用与优化 修改
手机之家的数据访问层实践
手机之家的数据访问层实践
手机之家的数据访问层实践
手机之家的数据访问层实践
The way to continuous delivery
The way to continuous delivery
JavaScript Engine
JavaScript Engine
Struts Mitac(1)
Struts Mitac(1)
纵览Loadrunner核心功能
纵览Loadrunner核心功能
Javascript 闭包
Javascript 闭包
Html5移动网站开发实践
Html5移动网站开发实践
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
浅谈 Javascript 性能优化
1.
浅谈 JavaScript 性能优化
龙刚 (@RainoXu)TaobaoUED www.rainoxu.com
2.
优化 JavaScript性能,使它运行足够快一个关键因素:运行的时间
3.
响应时间与用户的体验 0.1s 用户觉得很流畅
1.0s 用户的操作可能偶尔受到影响,并且用户已经能感觉到有些不流畅 10s 对用户的影响比较严重,需要相应的进度提示。用户也会有一些沮丧
4.
What To Do
&& How To Do?
5.
管理作用域 操作数据 流控制
Reflow DOM操作 长时间运行的脚本处理
6.
管理作用域 function add(num1,
num2){ return num1 + num2; } var result = add(5, 10);
7.
使用局部变量 局部变量存在于活动对象中,解析器只需查找作用域中的单个对象 var
a = 1; function test(){ //对变量a进行一系列操作 } function test2(){ var a = 1; //对变量a进行一系列操作 }
8.
另一个例子 (function(win, S,
undefined) { ... ... var doc = win['document'], loc = location, EMPTY = '', ... ... })(window, 'KISSY');
9.
数据操作
10.
使用局部变量,它是最快的缓存频繁使用的对象、数组及相关的属性值
11.
obj.name比obj.xxx.name访问更快,访问属性的速度,与其在对象中的深度有关 “ .
”操作的次数直接影响着访问对象属性的耗时 varobjName = obj.name;
12.
KISSY.add('switchable', function(S, undefined)
{ var DOM = S.DOM, Event = S.Event, ... ... });
13.
function process(data){ if
(data. count> 0){ for(vari = 0; i < data.count; i++){ processData(data.item[i]); } } }
14.
function process(data){ var
count = data.count; if (count > 0){ for(vari = 0; i < count ; i++){ processData(data.item[i]); } } }
15.
NodeList 不直接操作NodeList,将其转换成静态数组后再使用 方法:
Array.prototype.slice.call() => 标准浏览器 逐个拷贝到一个新数组中 => For IE
16.
大部分JS库都有提供将Array-Like的对象转变成Array的方法(如KISSY提供的makeArray()方法);部分JS库在返回元素集合时,已预处理成Array(例子:YUI的DOM相关操作方法)
17.
遍历NodeList时,不做对当前NodeList相关结构有影响的DOM操作,并且如之前所提到的,要缓存一些频繁使用到的属性值,以避免杯具发生。
18.
vardivs = document.getElementsByTagName('DIV');
//假定页面中有div,所以divs.length是大于0的 for (varidx = 0; idx < divs.length; idx++){ document.body.appendChild( //杯具悄然而置 document.createElement('DIV') ); console.info(divs.length); }
19.
杯具的原因? 通过getElementsByTagName()获取得到的是一个LiveNodeList的引用,任何对其相关的DOM操作都会立即反应在这个NodeList上面 通过不断地往document.body下插入div
节点,for循环的终止条件(div.length也随之改变)失效,陷入死循环。
20.
Live NodeListvs Static
NodeList 理论上,静态的东西应该是最快的,但是实际情况是,Live NodeList更快。
21.
Live NodeListvs Static
NodeList 原因:目前市场上的浏览器,对Live NodeList做了缓存
22.
Live NodeListvs Static
NodeList 结论:优先使用Live NodeList,通过选择器获取以后,再进一步转换成数组来使用。这也是目前许多JS库在使用的方案。
23.
DOM操作 指明操作DOM的context YUI:
Array getElementsByClassName ( className , tag , root , apply , o , overrides ) KISSY: Array<HTMLElement> query ( selector, context ) 即便是用原生的JS,也应该指明: context.getElementsByTagName()
24.
DOM操作 增删、修改节点 使用DocumentFragment
使用cloneNode()复制一份目标节点来处理 如果是直接修改DOM,请先将其display:none;
25.
一个方法尽可能只做一件事 拆分功能,让一个方法只做一件事,通过不断地调用方法来实现复杂功能,但是,这些简单方法要避免相互交叉调用。
26.
KISSY Poster中的一些方法拆分
27.
KISSY Poster中的一些方法拆分
28.
Be Lazy 使脚本尽可能少地运行,或者不运行。
29.
短路表达式应用:如 a &&
b || c 基于事件去写相应的处理方法 惰性函数
30.
合理地使用事件代理 DOM与事件处理
31.
为元素绑定事件 Event.on (
target, type, fn, scope )
32.
事件代理的原理 冒泡 捕获
33.
事件代理应用的场景?
34.
35.
Event.on(container, ‘click’, function
(ev){ var target = ev.target(); switch(target.className){//或者可以是nodeName ... ... ... } });
36.
流控制
37.
if(...){ }elseif(...){ }elseif(...){
}elseif(...){ }elseif(...){ }elseif(...){ }else{ }
38.
在if语句中,将经常会发生的条件,放在靠上的位置 if的条件为连续的区间时,可以使用二分法的方式来拆分 较多离散值的判断,可以使用switch来替代
使用数组查询的方式
39.
要注意隐式的类型转换 varfoo =
0; if(foo == false){ ... }
40.
小心递归!
41.
function recurse(){ recurse();
} recurse();//又是一个杯具
42.
浏览器对调用栈的最大限度的定义各不一样 递归的相互调用、自身调用可能触发浏览器的调用栈的最大极限
43.
Reflow
44.
主要引起Reflow的因素 操作DOM树 与布局有关的样式改变
改变className 窗口大小调整 字休大小
45.
优化运行时间较长的脚本
46.
原因: 大量DOM操作 过多的循环与递归
解决问题的最佳实践: 使用定时器
47.
最后,优化原则?
48.
2/8原则 考虑大多数情况,极端情况,有能力则兼顾之,适当取舍
49.
性能与可维护性权衡之一原则
50.
站在巨人的肩膀上,看得更远 YAHOO的前端小组、JohnResig、NicholasC.Zakas等都已经总结了很多有用的性能优化方面的经验,以他们的研究成果做为优化时的参考。
51.
52.
53.
Question?
Descargar ahora