{"version":"1.0","provider_name":"Jui-Nan Lin&#039;s Blog","provider_url":"https:\/\/jnlin.org","author_name":"jnlin","author_url":"https:\/\/jnlin.org\/author\/jnlin\/","title":"Head JS : The only script in your HEAD","html":"<p><a href=\"http:\/\/headjs.com\/\">head.js<\/a>\u662f\u4e00\u500b\u5f88\u5c0f\uff08\u53ea\u67092.3kb\uff09\u7684javascript\u7a0b\u5f0f\uff0c\u4e3b\u8981\u7684\u529f\u80fd\u662f\u53ef\u4ee5\u300c\u975e\u540c\u6b65\u300d\u7684\u8f09\u5165javascript\u3002\u5728head.js\u81ea\u5df1\u7684\u7db2\u7ad9\u4ecb\u7d39\u4e2d\uff0c\u5f88\u5927\u81bd\u7684\u8aaa\u300cThe only script in your &lt;HEAD&gt;\u300d\u3002\u66f4\u7cbe\u78ba\u7684\u4f86\u8aaa\uff0c\u4f7f\u7528head.js\u4ee5\u5f8c\u53ea\u9700\u8981\u6709\u4e00\u500b script tag\u8f09\u5165head.js\uff0c\u5176\u4ed6\u7684 javascript \u6a94\u6848\u90fd\u53ef\u4ee5\u7528head.js\u4f86\u8f09\u5165\u3002<\/p> <p>\u5176\u5be6\u975e\u540c\u6b65\u8f09\u5165javascript\u7684\u6280\u8853\u5df2\u7d93\u5f88\u6210\u719f\u4e86\uff0c\u50cf\u662f<a href=\"http:\/\/www.google.com\/analytics\/\">Google Analytics<\/a>\u5c31\u6709\u63d0\u4f9b\u975e\u540c\u6b65\u8f09\u5165\u7684\u7a0b\u5f0f\u78bc\u3002\u7531\u65bcBrowser\u5728\u8655\u7406&lt;script&gt; tag\u7684\u6642\u5019\u6703block\u4f4f\u6574\u500b\u9801\u9762\u7684render\uff08\u70ba\u4e86\u8981\u8655\u7406 document.write()\uff09\u8207\u9801\u9762\u4e0a\u5176\u4ed6 resource \u7684\u8f09\u5165\uff0c\u6240\u4ee5\u80fd\u5920\u7528\u975e\u540c\u6b65\u7684\u65b9\u5f0f\u8f09\u5165javascript\u7684\u8a71\uff0c\u9664\u4e86\u4e0d\u6703 blocking render \u8b93\u4f7f\u7528\u8005\u66f4\u5feb\u770b\u5230\u9801\u9762\u4e4b\u5916\uff0c\u4e5f\u53ef\u4ee5\u5e73\u884c\u5730\u8f09\u5165\u4e0d\u540c\u7684script\uff0c\u52a0\u5feb\u6574\u500b\u7db2\u9801\u7684\u8f09\u5165\u901f\u5ea6\u3002<\/p> <p>\u4f46\u662f\u975e\u540c\u6b65\u8f09\u5165\u6709\u500b\u554f\u984c\uff1a\u5982\u4f55\u4fdd\u8b49\u57f7\u884cjavascript\u6642\u7684\u76f8\u4f9d\u6027\uff1f\uff08\u4f8b\u5982\uff0c\u4e00\u5b9a\u8981\u5148\u57f7\u884c\u5b8c A script \u624d\u80fd\u958b\u59cb\u57f7\u884c B script\u3002\uff09\u9019\u9ede\u8981\u81ea\u5df1\u8655\u7406\u7684\u8a71\u5f88\u9ebb\u7169\uff0c\u4f46 head.js \u5df2\u7d93\u5e6b\u5fd9\u4f5c\u6389\u4e86\u3002<\/p> <blockquote><pre>\/\/ load files in parallel but execute them in sequence<\/pre><pre><br \/>head.js(\"file1.js\", \"file2.js\", ... \"fileN.js\");<\/pre><\/blockquote>\r\n<p>\u9019\u6a23\u7684\u8a71\u5c31\u6703\u540c\u6642\u8f09\u5165file[1-N].js\uff0c\u4f46\u662f\u6309\u7167\u9806\u5e8f\u57f7\u884cfile1.js ~ fileN.js\u3002<\/p>\r\n<p>\u6709\u4eba\u6703\u8aaa\uff0c\u5982\u679c\u5168\u90e8\u58d3\u6210\u4e00\u500b\u5f88\u5927\u7684\u6a94\u6848\uff0c\u4e0d\u5c31\u6c92\u6709\u57f7\u884c\u9806\u5e8f\u7684\u554f\u984c\u4e86\u55ce\uff1f\u4f46\u662f\u58d3\u6210\u5927\u6a94\u7684\u58de\u8655\u662f\uff0c\u5373\u4f7f\u53ea\u66f4\u65b0\u4e00\u500b\u5c0f\u529f\u80fd\uff0c\u6574\u500b\u5927\u6a94\u6848\u90fd\u5fc5\u9808\u91cd\u65b0load\u3002\u53e6\u5916\uff0ciPhone \u7684 safari \u6700\u5927\u53ea cache \u55ae\u6a94\u5927\u5c0f 15~25kb \u7684\u6a94\u6848 ((<a href=\"http:\/\/www.phpied.com\/iphone-caching\/\">http:\/\/www.phpied.com\/iphone-caching\/<\/a>)) \u3002<\/p>\r\n<p>\u4e0d\u904e\u8981\u6ce8\u610f\u7684\u662f\uff0chead.js\u7684\u975e\u540c\u6b65\u8f09\u5165\u4e5f\u6709\u4e00\u4e9b\u9650\u5236\uff0c\u53ef\u4ee5\u5230<a href=\"http:\/\/headjs.com\/\">http:\/\/headjs.com\/<\/a> \u53bb\u770b\u770b \u201c Developing with Head JS\u201d \u9019\u4e00\u6bb5\u7684\u8aaa\u660e\u3002<\/p>\r\n<p>\u9664\u6b64\u4e4b\u5916\uff0chead.js \u9084\u6709\u63d0\u4f9b CSS3 feature detection\u7684\u529f\u80fd\uff0c\u5728\u4e0d\u652f\u63f4CSS3\u529f\u80fd\u7684\u700f\u89bd\u5668\u4e0a\uff0c&lt;html&gt;\u9019\u500b\u5143\u7d20\u6703\u88ab\u52a0\u4e0a\u76f8\u5c0d\u61c9\u7684class\u3002\u4f8b\u5982\u700f\u89bd\u5668\u4e0d\u652f\u63f4CSS3 \u7684 borderimage \u5c6c\u6027\u7684\u8a71\uff0c\u4ed6\u7684 &lt;html&gt; \u5143\u7d20\u5c31\u6703\u88ab\u52a0\u4e0a no-borderimage \u9019\u500b class\uff0c\u65b9\u4fbf\u524d\u7aef\u5de5\u7a0b\u5e2b\u5beb\u51fa\u66ff\u4ee3\u65b9\u6848\u3002<pre><\/pre>\r\n<\/p><p>\u53e6\u5916\u9084\u6709\u87a2\u5e55\u5927\u5c0f\u5075\u6e2c\u3001\u700f\u89bd\u5668\u5075\u6e2c\u3001HTML5 enabler\uff08\u8b93CSS\u53ef\u4ee5style\u4e00\u4e9bHTML5 tag\uff09\u7b49\u7b49\u529f\u80fd\uff0c\u770b\u8d77\u4f86\u9019\u4e9b\u529f\u80fd\u7684\u4e3b\u8981\u76ee\u6a19\u662f\u653e\u5728\u884c\u52d5\u5e02\u5834\u3002\u539f\u59cb\u78bc\u653e\u5728 <a href=\"https:\/\/github.com\/headjs\/headjs\">github<\/a>\u3002<\/p>\r\n<p>\u76f8\u95dc\u95b1\u8b80\uff1a<a href=\"http:\/\/kaix.in\/daddy\/2010\/12\/head-js-the-only-script-in-your-head\/\">http:\/\/kaix.in\/daddy\/2010\/12\/head-js-the-only-script-in-your-head\/<\/a><\/p>","type":"rich"}