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

我来总结一下:

  由于 大多数浏览器都是 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>

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

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

    代码为什么要这样写? function initUI(){ var doc = document, bd = doc.body, links = doc.getElementsByTagName_r( ...

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

    When the browser encounters a <script> tag, as in this HTML page, there is no way of knowing w ...

  3. 读高性能JavaScript编程 第四章 Conditionals

    if else 和 switch    &&    递归 if else 和 switch 一般来说,if-else 适用于判断两个离散的值或者判断几个不同的值域.如果判断多于两个离散 ...

  4. 读高性能JavaScript编程 第四章 Duff's Device

    又要开始罗里吧嗦的 第四章  Summary 了. 这一次我尽量精简语言. 如果你认为 重复调用一个方法数次有点辣眼睛的话 比如: function test(i){ process(i++); pr ...

  5. 读高性能JavaScript编程 第三章

    第三章  DOM Scripting  最小化 DOM 访问,在 JavaScript 端做尽可能多的事情. 在反复访问的地方使用局部变量存放 DOM 引用. 小心地处理 HTML 集合,因为他们表现 ...

  6. 你不知道的javaScript上卷(第一章 作用域是什么)

    在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...

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

    Windows核心编程第一章,错误处理. 一丶错误处理 1.核心编程学习总结 不管是做逆向,开始做开发.在Windows下.你都需要看一下核心编程这本书.这本书确实写得很好.所以自己在学习这本书的同时 ...

  8. 读《编写可维护的JavaScript》第一章总结

    第一章 基本的格式化 1.4 ① 换行 当一行长度到达了单行最大的字符限制时,就需要手动将一行拆成俩行.通常我们会在运算符后换行,下一行会增加俩个层级的缩进. // 好的做法: 在运算符后换行,第二行 ...

  9. 高性能JavaScript 编程实践

    前言 最近在翻<高性能JavaScript>这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的 ...

随机推荐

  1. windows环境下搭建Java开发环境(一):jdk安装和配置

    一.资源下载 官网:http://www.oracle.com/technetwork/java/javase/downloads/index.html 本人安装的是jdk1.8,百度云资源:链接:h ...

  2. intellij idea 怎么全局搜索--转

    https://jingyan.baidu.com/article/29697b9163ac7dab20de3cbf.html intellij idea是一款智能,功能强大的ide,对比eclips ...

  3. Ubuntu16.04安装mac主题之图标居中(百度经验)

    ubuntu14.04怎么把桌面任务栏调到下方,像Mac那样的 50 匿名 | 浏览 22789 次 我有更好的答案 2015-11-30 16:58 最佳答案   先看图片,感兴趣往下看.按照步骤一 ...

  4. 原型模式Prototype,constructor,__proto__详解

    最近由于在找工作,又拿起<JavaScript高级程序设计>看了起来,从中也发现了自己确实还是有很多地方不懂,刚刚看到原型模式这里,今天终于搞懂了,当然,我也不知道自己的理解是否有错. 1 ...

  5. CTSC 2018 游记

    day0 李总提前一天放假,回家颓整理行李... 然而我... 早上:睡觉... 中午:睡觉... 晚上:睡觉去火车站... 吃了几把鸡,本来想带李总入坑,但他挥手拒绝然后被李总带进了炸金花的坑... ...

  6. Net Core 中间件实现修改Action的接收参数及返回值

    新一个WebApi项目(Net Core 2.1) 新建InputOutputAlterMiddleware类,修改命名空间为Microsoft.AspNetCore.Builder(不修改也没关系, ...

  7. 手机调试 --- 通过chrome测试手机网站

     移动端有时候我们要调试手机网站. Chrome怎么调试手机页面呢? 毕竟有时候手机支持的JS度跟PC不一样.最开始就遇见了.手机端浏览器不支持执行string.includes. PC端支持该函数, ...

  8. C#调用百度地图API经验分享(三)

    这一篇我将跟大家分享一下我自己在开发过程中总结出的一些操作地图的方法,属性,及思路,希望可以让大家少走弯路. 1.定位 一般百度的示例DEMO里开始初始化地图时用的都是map.centerAndZoo ...

  9. jquery完成界面无刷新加载登陆注册

    昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击! ...

  10. Sql动态查询拼接字符串的优化

    Sql动态查询拼接字符串的优化 最原始的 直接写:string sql="select * from TestTables where 1=1";... 这样的代码效率很低的,这样 ...