1.瀏覽器對script引用的js文件分兩步,下載,下載完畢后馬上執行;這兩步都會阻塞瀏覽器繼續解析。
2.加入defer屬性,<
script
defer
type
=
"text/javascript"
src
=
"some.js"
>
</
script
>,瀏覽器會異步加載js,待DOMContentLoaded后順序執行js。
3.預加載js,自定義執行時機。
<script language="javascript" type="text/javascript"> function cachejs(script_filename){ var cache = document.createElement('object'); cache.data = script_filename; cache.id = "coolshell_script_cache_id"; cache.width = 0; cache.height = 0; document.body.appendChild(cache); } function loadjs(script_filename) { var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', script_filename); script.setAttribute('id', 'coolshell_script_id'); script_id = document.getElementById('coolshell_script_id'); if(script_id){ document.getElementsByTagName('head')[0].removeChild(script_id); } document.getElementsByTagName('head')[0].appendChild(script); } function LoadJS(){ var script = './alert.js'; loadjs(script); } </script> ... <p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p> ... ... <script> cachejs('./alert.js'); </script>
4.seajs和requirejs
seajs是執行到引用文件代碼,再去引用下載,慢。
requirejs也是如此。
希望有什么選項能給個選擇,指定哪些文件要預加載,哪些文件是需要時才去加載。
參考鏈接:
http://coolshell.cn/articles/9749.html
http://www.cnblogs.com/coco1s/p/4010310.html
http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html