Javascript-用戶端相關

一、JS程式的執行

1.當HTML解析器遇到

<script>

元素時，預設必須先執行腳本，然後再恢複文檔的解析和渲染。這對于内聯腳本沒什麼問題，但如果腳本源代碼是一個由src屬性指定的外部檔案，這意味着腳本後面的文檔部分在下載下傳和執行腳本之前，都不會出現在浏覽器中。（“不會出現在浏覽器中”的含義：文檔的文本内容已經載入，但是并未被浏覽器引擎解析為DOM樹，而DOM樹的生成是受js代碼執行的影響的，js代碼會“阻塞”頁面UI的渲染。）

2.腳本的執行隻在預設情況下是同步和阻塞的。

<script>

标簽可以有 defer 和 async 屬性，這可以改變腳本的執行方式。使用這兩個屬性使得浏覽器可以在下載下傳腳本時繼續解析和渲染文檔。

• defer延遲屬性：使得浏覽器延遲腳本的執行，直到文檔的載入和解析完成，并可以操作。
• async異步屬性：使得浏覽器可以盡快地執行腳本，而不用在下載下傳腳本時阻塞文檔解析。

• 同時有這兩個屬性：會遵從 async 屬性并忽略 defer 屬性。

  注意，延遲的腳本會按它們在文檔裡的出現順序執行；異步腳本在它們載入後執行，可能會無序執行。

二、用戶端JS時間線（一條理想的時間線）

1.web浏覽器建立ducument對象，并開始解析web頁面。document.readyState屬性值為loading。

2.遇到沒有async和defer屬性的script标簽元素時，把這些元素添加到文檔中，然後執行行内或外部腳本。這些腳本會同步執行，并在腳本下載下傳和執行時解析器會暫停。

3.遇到有async屬性的script标簽元素時，開始下載下傳腳本并繼續解析文檔。腳本會在它下載下傳完成後盡快執行。

4.當文檔完成解析，document.readyState=“interactive”。

5.遇到有defer屬性的script标簽元素時，會按出現順序執行。延遲腳本能通路完整的文檔樹。

6.浏覽器在document對象上觸發DOMContentLoaded事件，标志着程式執行從同步腳本執行階段轉換到了異步事件驅動階段。

7.文檔已完全解析完成。浏覽器等待其他内容（如圖檔）載入完成時，并且所有異步腳本完成載入和執行，document.readyState=“complete”，浏覽器觸發window對象上的load事件。

8.從此刻起，會調用異步事件，以異步響應使用者輸入事件、網絡事件、計時器過期等。

三、用戶端JS相容性和互動性

1.三類問題

（1）演化

（2）未實作

（3）bug

2.解決方法

（1）選擇支援的所有浏覽器都普遍支援的特性

（2）使用類庫

（3）使用JS架構，如jquery，定義了新的API并相容所有浏覽器

四、功能測試

1.用途：解決相容性問題

2.示例：

if(element.addEventListener){...}//檢測addEventListener是否可用
else if(element.attachEvent){...}//檢測attachEvent是否可用
else{...}
           

五、同源政策

1.概念：是對JS代碼能夠操作哪些web内容的一條完整的安全限制。腳本隻能讀取與所屬文檔來源相同的視窗和文檔的屬性。

2.文檔的來源：包含協定、主機，以及載入文檔的URL端口。

• 從不同web伺服器載入的文檔具有不同的來源。
• 通過同一主機的不同端口載入的文檔具有不同的來源。
• 使用http:協定載入的文檔和使用https:協定載入的文檔具有不同的來源。即使它們來自同一個web伺服器。

3.同源政策使用的地方

（1）視窗中對象的屬性，包含另一個伺服器中文檔的視窗或窗體。

（2）應用于使用XMLHttpRequest生成的HTTP請求。

4.作用：防止腳本竊取似有的資訊。如果沒有同源政策的限制，惡意腳本可能會打開一個空的視窗，欺騙使用者進入并使用這個視窗在内網上浏覽檔案，惡意腳本就能讀取視窗内容并将其發送回自己的伺服器。

5.不嚴格的同源政策

（1）使用document對象的domain屬性。注意domain值中必須有一個點号，不能把它設定為"com"或其他頂級域名。

（2）跨域資源共享。用新的"Origin:"請求頭和新的Access-Control-Allow-Origin響應頭來擴充HTTP。它允許伺服器用頭資訊顯式地列出源，或使用通配符*來比對所有的源，并允許由任何位址請求檔案。

（3）跨文檔消息。調用window對象的postMessage()方法，可以異步傳遞消息事件到視窗的文檔裡。

六、跨站腳本XSS

1.概念：表示一類安全問題，即攻擊者向目标web站點注入HTML标簽或者腳本。

2.為什麼會受到XSS攻擊：如果web頁面動态地産生文檔内容，并且這些文檔内容是基于使用者送出的資料的，而并沒有通過從中移除任何嵌入的HTML标簽來“消毒”的話，那麼這個web頁面很容易遭到跨站腳本攻擊。

3.防止XSS攻擊：

• 移除

  <script>

  标簽兩邊的尖括号。通過把字元串中所有的尖括号替換成它們對應的HTML實體，也就是說将字元串中任意HTML标簽進行轉義和過濾删除處理。
• HTML5的内容安全政策更進一步，它為

  <iframe>

  元素定義了一個sandbox屬性，允許顯示不可信的内容，并自動禁用腳本。

——閱讀《Javascript權威指南》第十三章