读高性能JavaScript编程 第一章

草草的看完第一章,虽然看的是译文也是感觉涨姿势了,

我来总结一下:

  由于 大多数浏览器都是 single process 处理 ui updatas and js execute

  于是产生问题: js (script tag) will blocking page processing

上图说话:

 于是大家动脑筋想办法

想到了三个办法

1、 Parallel downloads, then execute  并行下载,然后执行。

2、Download times less,Less download file  少次少量 (精缩)

3、动态添加脚本,注入脚本(使用xmlhttprequest)。

其他:

defer  eg:<script type="text/javascript" src="file1.js" defer></script>

对应的 JavaScript 文件将在<script>被解析
时启动下载,但代码不会被执行,直到 DOM 加载完成(在 onload 事件句柄被调用之前)

把js引用放在 </body>上面(很多人知道但不懂为什么)

原因:在 head 里 你会看到 阻塞全在白页上了

在下面阻塞的时候好歹页面上有点东西了 哈哈好简单~  将脚本放在底部是定律

最后

果然最爽的还是把别人造好的轮子拿来用:

  1、 YUI3 2、The LazyLoad library 3、The LABjs library 第二和第三个看着很爽的样子 第三个比较推荐。

而且可以体验一把链式结构的爽快写法。

eg:

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
 $LAB.script("first-file.js").wait() //这个wait 是保证 js被执行(注意:不是被完全下载,下载是并行的)的先后顺序
.script("the-rest.js")
.wait(function(){
Application.init();
});
</script>

时间: 2025-01-06 03:47:52

读高性能JavaScript编程 第一章的相关文章

读高性能JavaScript编程 第二章 让我知道了代码为什么要这样写

代码为什么要这样写? function initUI(){ var doc = document, bd = doc.body, links = doc.getElementsByTagName_r("a"), i = 0, len = links.length; while(i < len){ update(links[i++]); } doc.getElementById("go-btn").onclick = function(){ start(); }

读高性能JavaScript编程学英语 第一章第三页第二段话

Script Positioning 脚本位置 The HTML 4 specification indicates that a <script> tag may be placed inside of a <head> or <body> tag in an HTML document and may appear any number of times within each. Traditionally, script> tags that are use

读高性能JavaScript编程 第四章 Conditionals

if else 和 switch    &&    递归 if else 和 switch 一般来说,if-else 适用于判断两个离散的值或者判断几个不同的值域.如果判断多于两个离散值,switch表达式将是更理想的选择. 如同 我们在写sql 总习惯把可以过滤掉更多的where 放在前面一样,当 if else 判断的离散值较多时也因该这么干. 二分搜索法: if (value == 0){ //要优化的代码 return result0; } else if (value == 1)

Windows核心编程第一章.错误处理

Windows核心编程第一章,错误处理. 一丶错误处理 1.核心编程学习总结 不管是做逆向,开始做开发.在Windows下.你都需要看一下核心编程这本书.这本书确实写得很好.所以自己在学习这本书的同时,也把自己所学的知识进行 总结,以及巩固. 2.常见的Windows函数返回类型总结 数据类型 作用 VOID 如果是Void表示函数不可能失败.极少数windows函数会返回void BOOL 表示这个函数会有失败情况.0失败.否则就是非0.但是一般都会使用TRUE FALSE来判断. HANDL

高性能JavaScript 编程实践

前言 最近在翻<高性能JavaScript>这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的有些内容还是相当不错的,譬如第八章编程实践,为了方便以后的查阅,对此做个总结.失效的代码也会在以后做更进一步的探索. 避免双重求值 这个优化策略很好理解,我们可能都已经不知不觉地运用在了实际的编程中: // not use this setTimeout('alert("hello world&qu

Go Web 编程 第一章 Web相关概念

第一章 Go与Web应用 Go学习群:415660935 1.1 Web应用 在计算机的世界里,应用(application)是一个与用户进行交互,并完成用户特定任务的软件程序.而Web应用则是部署在Web之上,并通过Web来使用的软件程序.一程序满足以下两个条件,我们可以把它看做是一个Web应用: 1.这个程序必须向发送命令请求的客户端返回HTML,而客户端则会向用户展示渲染后的HTML. 2.这个程序在向客户端传输数据时必须使用HTTP协议. 在这个定义的基础上,如果一个程序不是向用户渲染并

高性能javascript编程(复读1)

一: 1.同样的事情发在使用src属性加载javascript的过程中,浏览器必须首先下载外部文件的代码,这要占用时间,然后解析运行此代码.此过程中,页面解析和用户交互被完全阻塞: 2.浏览器在遇到body标签之前,不会渲染任何部分: 3.YAHOO! 优越性能小组,关于javascript的第一条规律:讲脚本放在底部: 4.每个HTTP请求会产生额外的性能负担,下载一个100K的文件,比下载4个25K的文件要快:可以将这些文件整合成一个文件,只需要一个<script>标签,可以减少性能损失,

C专家编程 第一章

第一章 C:穿越时空的迷雾 C语言的史前阶段 UNIX比C语言出现的早. BCPL-->B-->New B-->早期的C UNIX(PDP-7汇编)-->UNIX(PDP-11汇编)-->UNIX(C语言) PDP-7-->PDP-11.IBM 360 .Honeywell 635 C语言的早期体验 根据编译器设计者的思路发展的特性: 数组下标从0而不是1开始 C的基本数据类型直接与底层硬件相对应 auto关键字是摆设 表达式中的数组名可以看作是指针 float被自动扩

MDN——javascript——入门——第一章——知识点总结

1.什么是js: JavaScript 是允许你在网页中实现复杂事情的一门编程语言 例子: var para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { var name = prompt('Enter a new name'); para.textContent = 'Player 1: ' + name; } JS APIs: 1浏览器 A