[·Òë]High Performance JavaScript(004)
XMLHttpRequest Script Injection XHR½Å±¾×¢Èë
Another approach to nonblocking scripts is to retrieve the JavaScript code using an XMLHttpRequest (XHR) object and then inject the script into the page. This technique involves creating an XHR object, downloading the JavaScript file, then injecting the JavaScript code into the page using a dynamic <script> element. Here's a simple example:
ÁíÒ»¸öÒÔ·Ç×èÈû·½Ê½»ñµÃ½Å±¾µÄ·½·¨ÊÇʹÓÃXMLHttpRequest(XHR)¶ÔÏ󽫽ű¾×¢Èëµ½Ò³ÃæÖС£´Ë¼¼ÊõÊ×ÏÈ´´½¨Ò»¸öXHR¶ÔÏó£¬È»ºóÏÂÔØJavaScriptÎļþ£¬½Ó×ÅÓÃÒ»¸ö¶¯Ì¬<script>ÔªËØ½«JavaScript´úÂë×¢ÈëÒ³Ãæ¡£ÏÂÃæÊÇÒ»¸ö¼òµ¥µÄÀý×Ó£º
var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement_x("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);
This code sends a GET request for the file file1.js. The onreadystatechange event handler checks for a readyState of 4 and then verifies that the HTTP status code is valid (anything in the 200 range means a valid response, and 304 means a cached response). If a valid response has been received, then a new <script> element is created and its text property is assigned to the responseText received from the server. Doing so essentially creates a <script> element with inline code. Once the new <script> element is added to the document, the code is executed and is ready to use.
´Ë´úÂëÏò·þÎñÆ÷·¢ËÍÒ»¸ö»ñÈ¡file1.jsÎļþµÄGETÇëÇó¡£onreadystatechangeʼþ´¦Àíº¯Êý¼ì²éreadyStateÊDz»ÊÇ4£¬È»ºó¼ì²éHTTP״̬ÂëÊDz»ÊÇÓÐЧ£¨2XX±íʾÓÐ
Ïà¹ØÎĵµ£º
±¾ÎÄÖ÷ÒªÊdzöÓÚÓÐÅóÓÑʹÓÃÎÒÔÀ´Ð´µÄautocompleteµÄJS¿Ø¼þ¡£µ±Êý¾ÝÁ¿´óµÄʱºò£¬»á³öÏÖЧÂʼ«ÆäÂýµÄÇé¿ö£¬ÎÒÔÚÕâ¶Îʱ¼ä×ö³öµÄһЩ²âÊÔÒ²¼°Ò»Ð©¾Ñ飬Óë´ó¼Ò·ÖÏí£¬Èç¹ûÓдíµÄµØ·½£¬»¹ÇëÖ¸³ö¡£
¾¹ý²âÊÔ£¬ÎÒÃǻᷢÏÖÈçϵÄÇé¿ö»òÕß˵µÄ½áÂÛ£¬Èç¹ûÄúµÄ²âÊÔ½á¹ûÓëÎҵIJ»·û£¬Çë˵Ã÷ÔÒò£¬ÒÔ±ãÏ໥ѧϰ¡£
1£©µ±Ò»¸ö½Ï´óµÄHTML×Ö· ......
ÉÏÃæËù˵ÓйØHTMLµÄÄÚÈݷdz£ÉÙÓÖ¼òµ¥,µ«¶ÔÒѾÁ˽âµÄÈËÀ´Ëµ¾ÍÊÇûÓõÄ.
ÈçÓÐÎÊÌâ¿Éµ½È¨ÍþÍø http://www.html.com/ Éϲ鿴
ÒÔÏ¿ªÊ¼ËµËµ¹ØÓÚXMLµÄһЩ֪ʶ.
XMLÒ²ÊDZê¼ÇÓïÑÔ,¿ÉËüÊÇ×Ô¶¨ÒåµÄ,ûÓÐÒѸø¶¨¸ñʽ.²»¾ßÌå˵Ëü,¸ø³öÀý×ӾͿÉÃ÷ÁË.
Èç
<NAME>TOM</NAME>
<SEX>M</SEX>
ÒÔÉÏÄÚÈݵÄ< ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; ......
<SCRIPT>
//ÅжÏyÄêµÄÅ©ÀúÖÐÄǸöÔÂÊÇÈòÔÂ,²»ÊÇÈòÔ·µ»Ø0
function leapMonth(y){
return(lunarInfo[y-1900]&0xf);
}
var lunarInfo=new Array(
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0 ......
Grouping Scripts ³É×é½Å±¾
Since each <script> tag blocks the page from rendering during initial download, it's helpful to limit the total number of <script> tags contained in the page. This applies to both inline scripts as well as those in external files. Every time ......