Submit Search
Upload
Javascript加载总结
•
Download as DOCX, PDF
•
0 likes
•
625 views
衡锋 阳
Follow
javascript加载总结,高性能加载,按照依赖执行。模块加载器的实现的关键技术。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 6
Download now
Recommended
推聊 3分钟可运行起来的开源 android手机聊天系统
推聊 3分钟可运行起来的开源 android手机聊天系统
kaerseng
3分钟可运行起来的开源 android手机聊天系统
Node.js长连接开发实践
Node.js长连接开发实践
longhao
使用node.js + socket.io 开发real-time web通讯系统。 twitter @hoorace weibo @hoorace From longtask.com
PHP/NodeJS/Redis项目实战
PHP/NodeJS/Redis项目实战
Sun Zephyr
Presta shop 1.6 详细安装指南
Presta shop 1.6 详细安装指南
YUCHENG HU
PrestaShop 1.6 详细安装指南
Presta shop 1.6 的安装环境
Presta shop 1.6 的安装环境
YUCHENG HU
PrestaShop 1.6 的安装环境
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
guest2d0fe3
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
Cary Yang
Wordpress使用心得
Wordpress使用心得
hihirex
本來要在公司講給大家聽 結果... 用不著了 = =
Recommended
推聊 3分钟可运行起来的开源 android手机聊天系统
推聊 3分钟可运行起来的开源 android手机聊天系统
kaerseng
3分钟可运行起来的开源 android手机聊天系统
Node.js长连接开发实践
Node.js长连接开发实践
longhao
使用node.js + socket.io 开发real-time web通讯系统。 twitter @hoorace weibo @hoorace From longtask.com
PHP/NodeJS/Redis项目实战
PHP/NodeJS/Redis项目实战
Sun Zephyr
Presta shop 1.6 详细安装指南
Presta shop 1.6 详细安装指南
YUCHENG HU
PrestaShop 1.6 详细安装指南
Presta shop 1.6 的安装环境
Presta shop 1.6 的安装环境
YUCHENG HU
PrestaShop 1.6 的安装环境
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
guest2d0fe3
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
Cary Yang
Wordpress使用心得
Wordpress使用心得
hihirex
本來要在公司講給大家聽 結果... 用不著了 = =
Presta shop 1.6 图文安装教程
Presta shop 1.6 图文安装教程
YUCHENG HU
Presta shop 1.6 图文安装教程
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
cachowu
an aginx ppt
Presta shop 1.6 如何安装简体中文语言文件
Presta shop 1.6 如何安装简体中文语言文件
YUCHENG HU
PrestaShop 1.6 如何安装简体中文语言文件
使用Nginx轻松实现开源负载均衡——对外版
使用Nginx轻松实现开源负载均衡——对外版
pigso
Presta shop 1.6 如何安装简体中文语言文件
Presta shop 1.6 如何安装简体中文语言文件
YUCHENG HU
PrestaShop 1.6 如何安装简体中文语言文件
8, lamp
8, lamp
ted-xu
About LAMP, how to setup.
Php及drupal性能优化系列(二)
Php及drupal性能优化系列(二)
Robbin Zhao
Drupal性能优化,php性能优化、服务器性能优化,Varnish缓存。
Php Webservers
Php Webservers
samon127
Maven & mongo & sring
Maven & mongo & sring
Tzu Chi University
Maven mongo spring framework
Wamp环境下安装 wordpress
Wamp环境下安装 wordpress
strugglesmen
Nodejs api server_implement
Nodejs api server_implement
Chi-wen Sun
Use nodejs Implement API Server, for team develop api route
Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹
My own sweet home!
Java API for WebSocket
第十二章解答
第十二章解答
jiannrong
超。光速 網站最佳化實戰 -twMVC#8
超。光速 網站最佳化實戰 -twMVC#8
twMVC
講者:demo http://demo.tc (現任MVP、ASP.NET MVC4網站開發美學作者、twMVC核心講者) http://mvc.tw 簡介:網頁最怕的就是卡卡獸來襲,本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求,利用工具的好處就是無須改變寫法與習慣,套上去就有效果,如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。 注意事項:本課程不注重原理說明,主要圍繞在 .NET 周邊工具,如您不是 .NET 開發人員可能會有點茫然。
使用Rpm&yum进行基础软件管理
使用Rpm&yum进行基础软件管理
haiyuan ning
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
Zhen Li
Javascript stacktrace
Javascript stacktrace
cazhfe
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server
志賢 黃
PHP 應用之一 socket funion : 偽 WEB Server
Slideshare
Slideshare
mmehtala
Lyhyesti Slidesharesta
Tangramgrid
Tangramgrid
衡锋 阳
Tangram Grid介绍以及技术细节
I like this bag
I like this bag
echimeg
More Related Content
What's hot
Presta shop 1.6 图文安装教程
Presta shop 1.6 图文安装教程
YUCHENG HU
Presta shop 1.6 图文安装教程
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
cachowu
an aginx ppt
Presta shop 1.6 如何安装简体中文语言文件
Presta shop 1.6 如何安装简体中文语言文件
YUCHENG HU
PrestaShop 1.6 如何安装简体中文语言文件
使用Nginx轻松实现开源负载均衡——对外版
使用Nginx轻松实现开源负载均衡——对外版
pigso
Presta shop 1.6 如何安装简体中文语言文件
Presta shop 1.6 如何安装简体中文语言文件
YUCHENG HU
PrestaShop 1.6 如何安装简体中文语言文件
8, lamp
8, lamp
ted-xu
About LAMP, how to setup.
Php及drupal性能优化系列(二)
Php及drupal性能优化系列(二)
Robbin Zhao
Drupal性能优化,php性能优化、服务器性能优化,Varnish缓存。
Php Webservers
Php Webservers
samon127
Maven & mongo & sring
Maven & mongo & sring
Tzu Chi University
Maven mongo spring framework
Wamp环境下安装 wordpress
Wamp环境下安装 wordpress
strugglesmen
Nodejs api server_implement
Nodejs api server_implement
Chi-wen Sun
Use nodejs Implement API Server, for team develop api route
Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹
My own sweet home!
Java API for WebSocket
第十二章解答
第十二章解答
jiannrong
超。光速 網站最佳化實戰 -twMVC#8
超。光速 網站最佳化實戰 -twMVC#8
twMVC
講者:demo http://demo.tc (現任MVP、ASP.NET MVC4網站開發美學作者、twMVC核心講者) http://mvc.tw 簡介:網頁最怕的就是卡卡獸來襲,本次主軸將與各位 Web 開發人員分享如何使用「工具」來達到網站優化的需求,利用工具的好處就是無須改變寫法與習慣,套上去就有效果,如此立竿見影的成效身為 .NET 的 Web 開發人員一起來聽聽吧。 注意事項:本課程不注重原理說明,主要圍繞在 .NET 周邊工具,如您不是 .NET 開發人員可能會有點茫然。
使用Rpm&yum进行基础软件管理
使用Rpm&yum进行基础软件管理
haiyuan ning
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
Zhen Li
Javascript stacktrace
Javascript stacktrace
cazhfe
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server
志賢 黃
PHP 應用之一 socket funion : 偽 WEB Server
What's hot
(19)
Presta shop 1.6 图文安装教程
Presta shop 1.6 图文安装教程
使用Nginx轻松实现开源负载均衡
使用Nginx轻松实现开源负载均衡
Presta shop 1.6 如何安装简体中文语言文件
Presta shop 1.6 如何安装简体中文语言文件
使用Nginx轻松实现开源负载均衡——对外版
使用Nginx轻松实现开源负载均衡——对外版
Presta shop 1.6 如何安装简体中文语言文件
Presta shop 1.6 如何安装简体中文语言文件
8, lamp
8, lamp
Php及drupal性能优化系列(二)
Php及drupal性能优化系列(二)
Php Webservers
Php Webservers
Maven & mongo & sring
Maven & mongo & sring
Wamp环境下安装 wordpress
Wamp环境下安装 wordpress
Nodejs api server_implement
Nodejs api server_implement
Java API for WebSocket 實作介紹
Java API for WebSocket 實作介紹
第十二章解答
第十二章解答
超。光速 網站最佳化實戰 -twMVC#8
超。光速 網站最佳化實戰 -twMVC#8
使用Rpm&yum进行基础软件管理
使用Rpm&yum进行基础软件管理
Node.js從無到有 基本課程
Node.js從無到有 基本課程
使用Samba提升linux平台开发效率
使用Samba提升linux平台开发效率
Javascript stacktrace
Javascript stacktrace
PHP 應用之一 socket funion : 偽 WEB Server
PHP 應用之一 socket funion : 偽 WEB Server
Viewers also liked
Slideshare
Slideshare
mmehtala
Lyhyesti Slidesharesta
Tangramgrid
Tangramgrid
衡锋 阳
Tangram Grid介绍以及技术细节
I like this bag
I like this bag
echimeg
Herelegdehvvn word
Herelegdehvvn word
echimeg
谈谈模块化
谈谈模块化
衡锋 阳
模块化介绍,演进过程,实现手段,Noah组件库的实践,模块化实现总结。
Halloween 2011
Halloween 2011
jimmypolk
Web绘图
Web绘图
衡锋 阳
Web绘图的应用
Hereglegdehvvn
Hereglegdehvvn
echimeg
I like this bag
I like this bag
echimeg
Viewers also liked
(9)
Slideshare
Slideshare
Tangramgrid
Tangramgrid
I like this bag
I like this bag
Herelegdehvvn word
Herelegdehvvn word
谈谈模块化
谈谈模块化
Halloween 2011
Halloween 2011
Web绘图
Web绘图
Hereglegdehvvn
Hereglegdehvvn
I like this bag
I like this bag
Similar to Javascript加载总结
PHP & AppServ
PHP & AppServ
Ht Wang
PHP基礎與開發環境的建立
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
Html5
Html5
cazhfe
it's my own ppt
高性能网站最佳实践
高性能网站最佳实践
longhao
客户端存储与计算
客户端存储与计算
xiaotao ning
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
Real-Time Web实时信息流推送,培训材料
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
self study
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
Frank Cai
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
rewinx
高性能Web服务器Nginx及相关新技术的应用实践.
那些年,我们一起跨过域
那些年,我们一起跨过域
ksky521
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
Web开发基础
Web开发基础
dynaturtle
web 开发的基础知识,对于希望了解Web开发全貌的初学者有参考价值
51 cto下载 51cto信息图:openshift vs cloudfoundry
51 cto下载 51cto信息图:openshift vs cloudfoundry
Hong Cai
Paveo Tweak WordPress
Paveo Tweak WordPress
Yuancheng Yang
如何使用 Xhprof 分析網站效能 (真實案例)
如何使用 Xhprof 分析網站效能 (真實案例)
Cyril Wang
如何使用 Xhprof 分析網站效能 (真實案例)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。 Modern Web 2018 👉 http://modernweb.tw/
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
web标准化交流会第十八期上海站分享。 Jackson Tian:从无阻塞脚本加载(LAB.js)到浏览器线程模型
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
Asp.net 5 新功能與變革
Asp.net 5 新功能與變革
Gelis Wu
探討 Asp.Net 5 多項變革與新功能
Similar to Javascript加载总结
(20)
PHP & AppServ
PHP & AppServ
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Html5
Html5
高性能网站最佳实践
高性能网站最佳实践
客户端存储与计算
客户端存储与计算
Real time web实时信息流推送
Real time web实时信息流推送
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
那些年,我们一起跨过域
那些年,我们一起跨过域
非常靠谱 Html 5
非常靠谱 Html 5
Web开发基础
Web开发基础
51 cto下载 51cto信息图:openshift vs cloudfoundry
51 cto下载 51cto信息图:openshift vs cloudfoundry
Paveo Tweak WordPress
Paveo Tweak WordPress
如何使用 Xhprof 分析網站效能 (真實案例)
如何使用 Xhprof 分析網站效能 (真實案例)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
Asp.net 5 新功能與變革
Asp.net 5 新功能與變革
Javascript加载总结
1.
javascript 加载总结 加载 javascript
的 demo http://labjs.com/test_suite/test-script-tags.php Timeline: IE8: IE8 模拟 IE7: FF7: Chrome14: 问题:脚本加载会阻塞后续的页面内容加载,影响 web 性能。 内联脚本同样阻塞脚本并行下载,影响 web 性能。
2.
原因: 浏览器并发即可以同时下载 CSS 文件和
JS 文件,在 http1.1 的协议多支持 2 个并发数,IE8、 firefox2 最多支持 6 个并发数,opera 和 safari 最多支持 8 个并发数,chrome 最多支持 4 个并 发数。 常规解决办法: 浏览器并发个数是指同一个域名同时可请求数量。浏览器的并发数是可以设置的。 使用多域名下载,使用 CDN 可以有效的提高并发数。 脚本放在页面底部。 脚本加载完毕即执行。 脚本的加载和执行 最理想的情况:无阻塞并行加载,并且能控制脚本加载顺序(解决文件间的依赖问题)。 脚本加载方式: XHR Eval XHR Inject Script Iframe Script DOM Element Script Defer document.write Script Tag
3.
控制脚本的执行时机 http://labjs.com/test_suite/test-script-tags.php 假设依赖关系是 script2 依赖于
script1,script3 依赖于 script2。能达到理想的状况么? 默认脚本下载完即执行。非并行下载可以保证脚本的执行顺序。 异步加载回调 window onload 定时器(Timer) Script Onload Degrade Script Tag
4.
Script 标签的 defer
属性: 脚本加载完后并不立即执行,在 DOMReady 后执行。 延迟脚本执行,相当于将 script 标签放入页面 body 标签的底部。 IE,FF3.1+支持 HTML5 的 script 标签 async 属性 该脚本异步加载,下载完即执行,无视其他脚本的存在。 一些解决方案 YUILoader:前后端一起来解决这个问题,后端 combo 服务拼接好所需 js。减少 http 请求。 commonjs/seajs:换个角度看这个问题,不是解决脚本加载本身的问题。而是通过模块化的思 想重新组织脚本。 labjs/reqiurejs/headjs: 解决脚本加载问题。 labjs http://labjs.com/test_suite/test-LABjs-preloading.php?which=16 IE8 模拟 IE7 Timeline: FF7:
5.
FF7 Debug 日志: 脚本的执行顺序是
script1,script2,script3,虽然下载完毕的时间不是 script1,script2,script3 labjs 原理: http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order 要保证并行下载,而且按给定顺序执行,需要预加载 js 文件而不执行。 labjs 中预加载,执行的几种方式: 1.给 script 设置 src 属性但是并不把 dom 节点 append 到 head 中,实现预加载, dom 追加 当 到 head 中时脚本执行(IE 中使用该方法)。 2.相同 domain。使用 XHR 对象加载。然后使用 eval(xhr.responseText)来执行脚本。 3. 非 IE 浏 览 器 , 使 用 <script type=”text/cache”></script> 来 预 先 加 载 脚 本 。 然 后 将 type=”text/javascript”来执行脚本。 (类似的思路还可以使用(new Image().src=”xx.js” 来将脚本加载到缓存中,然后使用 DOM 操 作添加 script 节点) 4.使用 html5 中<script async ></script>来保证执行顺序
6.
5.单个 js 加载直接使用
DOM 操作。
Download now