網站建設之腳本加載

時間 2019-11-18

原文原文鏈接

網站建設之腳本加載

網站建設並非一件簡簡單單的事情，固然這裏說的不會是普通的較小的靜態站點。一個網站須要考慮的東西不少，頁面總體結構，SEO，css hack, 跨域，腳本加載策略，站點架構，代碼壓縮等。要成爲一名出色的前端開發工程師你除了須要知道上面羅列的這些東西以外還應該具有良好的設計功底，具有後臺開發功底。這些都是廢話，在這裏之談標題所要表述的內容，那就是腳本加載的問題。腳本在網站開發中可謂是重中之重，在頁面交互當中，沒有腳本的加入，整個網站也就少了生機。對於javascript這樣一個不循規蹈矩的腳本語言來講，咱們要想深入理解它吃透它也是須要必定的時間和開發經驗的。javascript

常常，咱們會以最普通的標籤形式在<head>標籤中引入腳本：css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="ken.js"></script>
 7 </head>
 8 <body>
 9     
10 </body>
11 </html>

1 //ken.js
2 var i = 900000000;
3 while(i > 0) {
4   i--;
5 }
6 console.log('hello');

這樣作是在一個大型的網站中是很存在問題的，ken.js這個腳本中執行了比較耗時的操做，因此咱們的頁面就會渲染的比較慢，對於用戶體驗而言是至關很差的。html

咱們有辦法能讓腳本的加載執行過程由同步變爲異步過程，例如加上defer屬性，可是該屬性在各版本瀏覽器上並非十分兼容，也能夠用async屬性，就像天貓網站上script標籤也是用了這樣的屬性。咱們還有好幾種異步加載腳本的方式，好比xhr eval技術， xhr注入技術，iframe加載腳本技術等，比較受歡迎的就是document.write這種方式動態加載腳本。前端

1 var newScript = document.createElement('script');
2 newScript.src = 'ken.js';
3 var script = document.getElementsByTagName('script')[0];
4 script.parentNode.insertBeford(newScript, script);java

固然，爲了避免阻塞頁面，咱們一般還會將腳本插入位置放在</body>結束標籤以前，這裏所講的僅僅是普通的腳本加載技巧。跨域

另外，要想實如今頁面所有加載完成後再加載腳本其實也很是簡單，相信onload你必定用過，就像下面這樣：瀏覽器

1 window.onload = function() {
2     var script = document.createElement('script');
3     script.src = "ken".js;
4     document.documentElement.firstChild.appendChild(script);
5 };

onload方法就是在頁面所有加載完成纔會觸發的，所以咱們只須要在該方法體內動態添加腳本便可，這就是所謂的延遲加載。架構

有時候咱們的頁面中會須要加載某些腳原本實現動態效果，可是其中有一些腳本又是多餘的，咱們在進行模塊化開發的時候能夠考慮按需加載腳本的方式來進行腳本加載。app

按需加載，顧名思義就是根據須要加載必要的腳本，參考requirejs的實現方式爲require('a.js', function(a) {});該方式就是當咱們加載完成a.js後纔去調用回調函數，該形式的實現很簡單：異步

 1 function require(file, callback) {
 2     var script = document.getElementsByTagName('script')[0],
 3         newjs = document.createElement('script');
 4         newjs.onreadyStateChange = function() {
 5             if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
 6                 newjs.onreadyStateChange = null;
 7                 callback();
 8             }
 9         };
10         newjs.onload = function() {callback();};
11         newjs.src = file;
12         script.parentNode.insertBeford(newjs, script);
13 }

預加載javascript須要解決一個問題，就是如何僅僅加載腳本而不會去執行和解析腳本。由於預加載的腳本多是爲了後面加載的頁面用的，而此時頁面還未加載，這時就去執行腳本的話就會出錯。
在IE瀏覽器中能夠用燈塔模式來實現預加載:

1 new Image().src = "ken.js";

在其餘瀏覽器中能夠用<object>來代替腳本元素便可實現預加載:

1 var obj = document.createElement('object');
2 obj.data = 'ken.js';
3 document.body.appendChild(obj);

由此，咱們能夠建立一個通用的preload()函數並使用初始化時分支模式來處理瀏覽器差別

 1 var preload;
 2 if (/*@cc_on!*/false) {
 3     preload = function(file) {
 4         new Image().src = file;
 5     };
 6 } else {
 7     preload = function(file) {
 8         var obj = document.createElement('object'),
 9             body = document.body;
10         obj.width = 0;
11         obj.height = 0;
12         obj.data = file;
13         body.appendChild(obj);
14     };
15 }