SlideShare une entreprise Scribd logo
1  sur  35
前端 JavaScript 相关Tips 怿飞 / 圆心
Who's this guy? 怿飞 / 圆心 in Taobao UED ,[object Object]
Front-End Engineer
Twitter:   @blankzheng
Email:     blankzheng@gmail.com
Blog:       www.planabc.net,[object Object]
JavaScript
JSON
Ajax,[object Object]
HTML ,[object Object]
JS 数据约定
外联 JS
内联 JS
JS 时间戳,[object Object]
JS 数据源约定: ,[object Object],[object Object]
外联 JS: ,[object Object]
将 JS 文件移至页面的底部<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
外联 JS: ,[object Object]
阻塞其后面组件的(并行)下载
阻塞其后面内容的呈现
影响的主要原因:
保持执行顺序
对 document.write的依赖关系,[object Object]
如果的确要使用,移至页面的尾部<script type="text/javascript"> _uacct = "UA-300049-1"; urchinTracker(); </script>
内联JS:案例
内联JS :案例 观察到的现象: 脚本执行结束,第二张图才开始下载。 页面加载后,至少5秒页面无任何内容显示。
内联JS: ,[object Object]
阻塞其后面组件的(并行)下载
阻塞整个页面的逐步渲染
影响的主要原因:
保持执行顺序
对 document.write的依赖关系,[object Object]
二、JavaScript
JavaScript ,[object Object]
模式约定

Contenu connexe

En vedette

Low Effort, High Impact Mobile Web Development
Low Effort, High Impact Mobile Web DevelopmentLow Effort, High Impact Mobile Web Development
Low Effort, High Impact Mobile Web Developmentchaefele
 
Mes Rosiers
Mes RosiersMes Rosiers
Mes Rosierschlud
 
持続可能な教材開発プロジェクトのために教師がWebですべきこと
持続可能な教材開発プロジェクトのために教師がWebですべきこと持続可能な教材開発プロジェクトのために教師がWebですべきこと
持続可能な教材開発プロジェクトのために教師がWebですべきことSunami Hokuto
 
Online Corporate Crisis Analyse
Online Corporate Crisis AnalyseOnline Corporate Crisis Analyse
Online Corporate Crisis AnalyseSebastiaan Bode
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for TeacherSunami Hokuto
 
Что помогает животным выживать
Что помогает животным выживатьЧто помогает животным выживать
Что помогает животным выживатьRaikhanaM
 
Technology Use v. Technology Integration
Technology Use v. Technology IntegrationTechnology Use v. Technology Integration
Technology Use v. Technology Integrationadusard
 
Intellectual Property Rights Enforcement
Intellectual Property Rights EnforcementIntellectual Property Rights Enforcement
Intellectual Property Rights EnforcementJane Lambert
 
M&CSAATCHI.GAD Snack Planning Vol.8
M&CSAATCHI.GAD Snack Planning Vol.8M&CSAATCHI.GAD Snack Planning Vol.8
M&CSAATCHI.GAD Snack Planning Vol.8Benoît Pellevoizin
 
Grails and MongoDB - what, why and how
Grails and MongoDB - what, why and howGrails and MongoDB - what, why and how
Grails and MongoDB - what, why and howIure Guimaraes
 
Explaining Constructuve And Destructive Interference V0.01
Explaining Constructuve And Destructive Interference V0.01Explaining Constructuve And Destructive Interference V0.01
Explaining Constructuve And Destructive Interference V0.01paulbhill
 
House sales customer_satisfaction_survey
House sales customer_satisfaction_surveyHouse sales customer_satisfaction_survey
House sales customer_satisfaction_surveyjsembiring
 
The Patent Box: Alternatives to Patents
The Patent Box: Alternatives to PatentsThe Patent Box: Alternatives to Patents
The Patent Box: Alternatives to PatentsJane Lambert
 
2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книги
2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книги2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книги
2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книгиYevgeny Sinyakov
 
The Intellectual Property Bar
The Intellectual Property BarThe Intellectual Property Bar
The Intellectual Property BarJane Lambert
 

En vedette (20)

eFocus Generation Next
eFocus Generation NexteFocus Generation Next
eFocus Generation Next
 
Low Effort, High Impact Mobile Web Development
Low Effort, High Impact Mobile Web DevelopmentLow Effort, High Impact Mobile Web Development
Low Effort, High Impact Mobile Web Development
 
Mes Rosiers
Mes RosiersMes Rosiers
Mes Rosiers
 
持続可能な教材開発プロジェクトのために教師がWebですべきこと
持続可能な教材開発プロジェクトのために教師がWebですべきこと持続可能な教材開発プロジェクトのために教師がWebですべきこと
持続可能な教材開発プロジェクトのために教師がWebですべきこと
 
YogeshBhosale_Resume
YogeshBhosale_ResumeYogeshBhosale_Resume
YogeshBhosale_Resume
 
Leningrad's Siege
Leningrad's SiegeLeningrad's Siege
Leningrad's Siege
 
Online Corporate Crisis Analyse
Online Corporate Crisis AnalyseOnline Corporate Crisis Analyse
Online Corporate Crisis Analyse
 
e-Learning Design for Teacher
e-Learning Design for Teachere-Learning Design for Teacher
e-Learning Design for Teacher
 
Что помогает животным выживать
Что помогает животным выживатьЧто помогает животным выживать
Что помогает животным выживать
 
Technology Use v. Technology Integration
Technology Use v. Technology IntegrationTechnology Use v. Technology Integration
Technology Use v. Technology Integration
 
Intellectual Property Rights Enforcement
Intellectual Property Rights EnforcementIntellectual Property Rights Enforcement
Intellectual Property Rights Enforcement
 
M&CSAATCHI.GAD Snack Planning Vol.8
M&CSAATCHI.GAD Snack Planning Vol.8M&CSAATCHI.GAD Snack Planning Vol.8
M&CSAATCHI.GAD Snack Planning Vol.8
 
Grails and MongoDB - what, why and how
Grails and MongoDB - what, why and howGrails and MongoDB - what, why and how
Grails and MongoDB - what, why and how
 
Explaining Constructuve And Destructive Interference V0.01
Explaining Constructuve And Destructive Interference V0.01Explaining Constructuve And Destructive Interference V0.01
Explaining Constructuve And Destructive Interference V0.01
 
House sales customer_satisfaction_survey
House sales customer_satisfaction_surveyHouse sales customer_satisfaction_survey
House sales customer_satisfaction_survey
 
The Patent Box: Alternatives to Patents
The Patent Box: Alternatives to PatentsThe Patent Box: Alternatives to Patents
The Patent Box: Alternatives to Patents
 
2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книги
2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книги2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книги
2013 ТРИУНА Лидерз, Колесо Инноваций, презентация книги
 
Michael Jackson tribute
Michael Jackson tributeMichael Jackson tribute
Michael Jackson tribute
 
Google
GoogleGoogle
Google
 
The Intellectual Property Bar
The Intellectual Property BarThe Intellectual Property Bar
The Intellectual Property Bar
 

Similaire à 前端 JavaScript 相关的小Tips

Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)ziggear
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化li qiang
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctechKai Cui
 
让我们的页面跑得更快
让我们的页面跑得更快让我们的页面跑得更快
让我们的页面跑得更快li qiang
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
TBAD F2E 2010 review
TBAD F2E 2010 reviewTBAD F2E 2010 review
TBAD F2E 2010 reviewleneli
 
Ajax Transportation Methods
Ajax Transportation MethodsAjax Transportation Methods
Ajax Transportation Methodsyiditushe
 
J Query简介及入门指南
J Query简介及入门指南J Query简介及入门指南
J Query简介及入门指南AppZ
 
前端基础知识回顾
前端基础知识回顾前端基础知识回顾
前端基础知识回顾Wu tianhao
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsChieh Lin
 
jQuery介绍@disandu.com
jQuery介绍@disandu.comjQuery介绍@disandu.com
jQuery介绍@disandu.comThink hy
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 

Similaire à 前端 JavaScript 相关的小Tips (20)

Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
 
让我们的页面跑得更快
让我们的页面跑得更快让我们的页面跑得更快
让我们的页面跑得更快
 
J Query Learn
J Query LearnJ Query Learn
J Query Learn
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
TBAD F2E 2010 review
TBAD F2E 2010 reviewTBAD F2E 2010 review
TBAD F2E 2010 review
 
Ajax Transportation Methods
Ajax Transportation MethodsAjax Transportation Methods
Ajax Transportation Methods
 
J Query简介及入门指南
J Query简介及入门指南J Query简介及入门指南
J Query简介及入门指南
 
Html&css基础
Html&css基础Html&css基础
Html&css基础
 
前端基础知识回顾
前端基础知识回顾前端基础知识回顾
前端基础知识回顾
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
Structs2簡介
Structs2簡介 Structs2簡介
Structs2簡介
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
jQuery介绍@disandu.com
jQuery介绍@disandu.comjQuery介绍@disandu.com
jQuery介绍@disandu.com
 
Qwrap jss
Qwrap jssQwrap jss
Qwrap jss
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 

前端 JavaScript 相关的小Tips