Frontend performance optimization: asynchronous loading and delayed loading of Dependencies

Date: 2013-7-1 Source: gbin1.com

Requirejs has ushered in a huge wave of asynchronous loading and AMD format. XMLHttpRequest (this object can call Ajax) makes asynchronous loading of resources popular. It allows non-blocking resource loading, and enables onload to start faster, allowing page content loading, you do not need to refresh the page.

The asynchronous loader I used is John Hann's curl. The curl loader is a basic asynchronous loader that can be configured and has good plug-ins. The following is a short curlCode:

// Basic usage: loads a part of AMD-format module curl (['social', 'dom '], function (social, DOM) {Dom. setelementcontent ('. social-iner ', social. loadwidgets () ;}); // defines a module that uses Google Analytics. This module is a non-AMD define (["JS! // Google-analytics.com/ga.js "], function () {// return a simple custom Google Analytics controller return {trackpageview: function (href) {_ gaq. push (["_ trackpageview", Url]) ;}, trackevent: function (eventname, href) {_ gaq. push (["_ trackevent", "interactions", eventname, "", href | window. location, true]) ;};}); // load a non-amd js file curl (['js! // Somesite.com/widgets.js']); // load the JavaScript and CSS files as modules (['js! Libs/prism. js', 'css! Libs/prism/prism.css '], function () {prism. highlightall () ;}); // load the urlcurl of an Ajax request (['text! Sidebar. PHP ', 'store', 'dom'], function (content, storage, DOM) {storage. set ('inclubar', content, 60); Dom. setelementcontent ('. sidebar', content );});

You may have known that asynchronous loading can greatly increase the speed of the WAN Zhan, but here I want to explain that you want to use asynchronous loading! After you use it, you can see the difference. More importantly, your users can see the difference.

When you can load Dependencies by page content delay, you can understand the benefits of asynchronous loading. For example, you can only load Twitter, Facebook, and Google Plus to the DIV elements that apply the CSS style named Social. The "check whether it is needed before loading" policy can save several KB of unnecessary loading for my users.

In the next article, we will introduce how to use array. Prototype. Join to replace string connections to improve the front-end performance of web pages.

Via
Nelly @ geeks

Source: frontend performance optimization: asynchronous loading and delayed loading Dependencies