Web 性能优化:异步加载脚本

DOM async defer JavaScript 异步 性能

本文通过几个例子详述脚本对页面渲染的影响,以及浏览器正在加载提示 (标签页旋转按钮、页面停止渲染、光标停止响应)的行为。 介绍如何使用异步脚本载入策略提前 load 事件,提前结束浏览器的正在加载提示。TL;DR

  • 脚本会阻塞 DOM 渲染,因此可以把不必要首屏载入的脚本异步载入。
  • 载入方式一:使用类似 requirejs 的方案,或在 load 事件后再插入外链脚本。
  • 载入方式二:XHR 获取内容后 Eval(不安全,且跨域不可用)。
  • 载入方式三:使用 <script>asyncdefer 属性。

外链 CSS 延迟 DOM 解析和 DOMContentLoaded

CSS DOM JavaScript 事件 DOM解析

绝大多数情况下我们总是让JavaScript在DOM载入后再开始执行。 不管是直接用 DOM API 实现还是使用 jQuery,最终都是DOMContentLoaded事件在起作用。 本文讨论一个我们习以为常却很少了解的问题: 样式文件的载入会延迟脚本执行,以及DOMContentLoaded事件的触发。

DOMContentLoaded事件

页面文档(DOM)完全加载并解析完毕之后,会触发DOMContentLoaded事件, HTML文档不会等待样式文件,图片文件,Iframe页面的加载。 但DOM树已被创建,多数JavaScript已经操作DOM并完成功能了。

This (DOMContentLoaded) event fires after the HTML code has been fully retrieved from the server, the complete DOM tree has been created and scripts have access to all elements via the DOM API. – molily.de

然而在绝大多数场景下,样式文件的载入会延迟DOMContentLoaded事件的触发。 其实这样的行为正是开发者所希望的,为什么呢?

事实上,老版本的IE中DOMContentLoaded事件存在兼容性问题。 参见:兼容所有浏览器的 DOM 载入事件

兼容所有浏览器的 DOM 载入事件

Chrome DOM HTML JavaScript jQuery 事件 Firefox Safari IE

本文就页面载入问题讨论DOMContentLoadedloadreadyState等DOM事件的浏览器兼容性, 并给出怎样绑定DOM载入事件以兼容所有的浏览器。 接着介绍jQuery对该问题的实现源码,以及jQuery中$(document).ready()$(window).load()方法的区别。

在讨论页面载入事件之前,首先需要区分的两个概念:DOM就绪和渲染结束。

  • DOM就绪是指浏览器已经接收到整个HTML并且DOM解析完成;
  • 渲染结束是指浏览器已经接收到HTML中引用的所有样式文件、图片文件、以及Iframe等资源并渲染结束。

overflow 与布局上下文(BFC)

CSS HTML float overflow BFC

HTML 采用流式布局方式,CSS 的float在这种环境下非常重要。 float 常与 overflow 配合使用都是因为 overflow 会创建新的 BFC,进而影响布局。 本文从三个方面介绍 overflow 对浮动的影响:清除环绕,包裹浮动元素,以及独立布局环境。 在此之前先来了解一下什么是 BFC:

BFC(Block Formatting Context,布局上下文) 是 CSS 渲染过程中进行布局的盒子,所有浮动子元素都在盒子内进行布局。 也就是说 BFC 内的浮动元素不会影响到 BFC 外部,BFC 外部的环境也不会影响 BFC 内的布局。 MDN 共列出 8 类可以生成 BFC 的元素,包括浮动和绝对定位元素、行内块,以及 overflow 不为 visible 的元素。 可见,设置 overflow:hidden 可以开启一个 BFC

BFC 很多时候翻译为块级格式化上下文,其实笔者认为布局上下文更为贴切。 本质上讲一个 BFC 就是一个矩形块的独立布局环境。

从MVC数据同步到AngularJS双向绑定

AngularJS MVC Unix WPF 事件 数据绑定 MVVM

MVC恐怕是Web开发中最流行的术语,它是一种设计模式,也是软件架构风格。 MVC也成为一整个系列的设计模式,衍生品包括PAC、HMVC、MVP、MTV、MVVM等。 本文从经典MVC模式谈起,讨论MVC下数据同步策略的设计, 进一步引申出MVVM设计模式,并讨论其数据绑定的优缺点。

MVC

MVC(Model-View-Controller)一词最初在1979年由Trygve Reenskaug提出(Smalltalk-79), 此后Krasner和Pope在Smalltalk-80中再次进行了描述。 最初Krasner和Pope描述的MVC设计是这样工作的:

mvc

跟踪 Github 项目的持续集成状态

持续集成 Github NPM Mocha 测试

不知从什么时候开始,Github项目的README中到处都能看到绿色的小徽章。 通过这些徽章可以获知项目的最新版本号、构建状态、测试覆盖率, 以及依赖软件包的过期情况。请看这个Brick.JS项目的首页:

brick.js

项目标题Brick.JS下是一排徽章,它们分别表示着: 该项目在npm的最新版本是2.0.2,构建和测试状态是通过(还可能是failing), 测试程序的覆盖率为92%,该项目的依赖软件包都处于最新状态。 每次Push一些提交到Github仓库,测试和构建都会自动执行,这些徽章都会更新。

导航: 上一页 下一页

加载中...

🔝