[TOC] ## `integrity`屬性 驗證外部加載js 的文件hash ``` <script src="/assets/application.js" integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs="> </script> ``` 如果`application.js`的腳本hash 改變,則不會加載 ## URL 協議 a標簽 `<a href="javascript: 'hello word';">點擊</a>` 如果javascript 中是字符串,則會打開一個文件,里面是字符串內容 如果是可執行代碼.則執行 ## script 的屬性 ### defer 屬性 延遲執行 如果腳本之間有依賴關系，就使用`defer`屬性 ``` <script src="a.js" defer></script> <script src="b.js" defer></script> ``` 1. 瀏覽器開始解析 HTML 網頁。 2. 解析過程中，發現帶有`defer`屬性的`<script>`元素。 3. 瀏覽器繼續往下解析 HTML 網頁，同時并行下載`<script>`元素加載的外部腳本。 4. 瀏覽器完成解析 HTML 網頁，此時再回過頭執行已經下載完成的腳本。 注意: 使用`defer`加載的外部腳本不應該使用`document.write`方法 對內置 script 代碼不起作用 使用`defer`加載的外部腳本不應該使用`document.write`方法 ### async 屬性 同步執行 如果腳本之間沒有依賴關系，就使用`async`屬性 1. 瀏覽器開始解析 HTML 網頁。 2. 解析過程中，發現帶有`async`屬性的`script`標簽。 3. 瀏覽器繼續往下解析 HTML 網頁，同時并行下載`<script>`標簽中的外部腳本。 4. 腳本下載完成，瀏覽器暫停解析 HTML 網頁，開始執行下載的腳本。 5. 腳本執行完畢，瀏覽器恢復解析 HTML 網頁。 ### script 加載使用的協議 ``` <script src="example.js"></script> 上面的example.js默認就是采用 HTTP 協議下載，如果要采用 HTTPS 協議下載，必需寫明。 <script src="https://example.js"></script> 但是有時我們會希望，根據頁面本身的協議來決定加載協議，這時可以采用下面的寫法。 <script src="//example.js"></script> ``` ### 重流和重繪 * 讀取 DOM 或者寫入 DOM，盡量寫在一起，不要混雜。不要讀取一個 DOM 節點，然后立刻寫入，接著再讀取一個 DOM 節點。 * 緩存 DOM 信息。 * 不要一項一項地改變樣式，而是使用 CSS class 一次性改變樣式。 * 使用`documentFragment`操作 DOM * 動畫使用`absolute`定位或`fixed`定位，這樣可以減少對其他元素的影響。 * 只在必要時才顯示隱藏元素。 * 使用`window.requestAnimationFrame()`，因為它可以把代碼推遲到下一次重流時執行，而不是立即要求頁面重流。 * 使用虛擬 DOM（virtual DOM）庫。 ### window.requestAnimationFrame() 推遲重繪 ``` // 重繪代價高 function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } all_my_elements.forEach(doubleHeight); // 重繪代價低 function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } all_my_elements.forEach(doubleHeight); ```