10. 進入瀏覽器
•1 like•283 views
Report
Share
Download to read offline
script標籤基本特性 認識async與defer 初探同源策略與CORS 認識ES6前的模組管理 使用ECMAScript模組
More Related Content
What's hot(20)
Similar to 10. 進入瀏覽器
Similar to 10. 進入瀏覽器(20)
More from Justin Lin
More from Justin Lin(20)
10. 進入瀏覽器
- 2. 10.進入瀏覽器 • 學習目標 – script標籤基本特性 – 認識async與defer – 初探同源策略與CORS – 認識ES6前的模組管理 – 使用ECMAScript模組 2
- 5. • HTML4規範了script標籤的type屬性， 必須設定它的值 • type在HTML5中為選用，若沒有指定，預 設為"text/javascript“ – "module" – "text/jscript" – "text/vbscript" – 其他自訂值 5
- 6. 文件解析與script標籤 • 在瀏覽器載入HTML檔案後，必須先解析所 有HTML標籤 • 建立各標籤對應的DOM（Document Object Model）物件並組成DOM樹 • 最後依DOM樹結構來呈現畫面 6
- 12. • 「全部資源」載入不單只是DOM樹建立完 成，還包含了HTML頁面鏈結的CSS、圖片 等都載入完成 • HTML5標準化了DOMContentLoaded事 件，會在DOM樹建立之後就觸發 12
- 13. 開發人員工具 13
- 14. 14
- 15. 15
- 16. 引用.js原始碼 16
- 17. 17
- 18. 原始碼編碼 • 保持.js原始碼編碼與HTML檔案的編碼一致 • 如果HTML是UTF-8，那麼.js檔案也應該設 為UTF-8 • 瀏覽器會假設HTML與.js編碼兩者是一致的 18
- 19. noscript標籤 • 在無法執行 JavaScript 時出現，提供替代 的頁面內容 19
- 21. async屬性 • 只要出現async屬性就可以了 • 「非同步地」下載.js檔案（使用瀏覽器執行緒） • 下載完成前，不阻斷後續資源下載與頁面剖析 • 下載完成，瀏覽器就會暫停頁面剖析， JavaScript引擎執行.js的程式碼後，再繼續處 理頁面剖析 • 執行順序也就無法預測 21
- 22. • 如果程式庫檔案容量比較大，然而與初始 頁面處理沒有立即相關性 • 頂層程式碼不多或執行迅速，與其他程式 庫也沒有相依性 • 可以試著在script標籤上設置async屬性， 看看效果是否符合需求 22
- 23. defer屬性 • 只要出現defer屬性就可以了 • 瀏覽器會「非同步地」下載.js檔案，不會 阻斷後續資源下載與頁面剖析 • 下載完成後也不會馬上執行程式碼，而是 在DOM樹生成、其他非defer的.js執行完 後，才執行被加上defer屬性的.js • 如果有多個defer屬性的.js，會按照「頁 面上出現的順序」執行 23
- 24. • 如果程式庫檔案容量比較大，必須在剖析 完DOM之後執行 • 與其他程式碼間有順序上的相依性 • 就可以試著在script標籤上設置defer屬 性，看看效果是否符合需求 24
- 25. 初探安全 • 原始碼中的敏感資訊 • XSS • 認識安全弱點 25
- 28. 認識安全弱點 • OWASP TOP 10 • CWE（Common Weakness Enumeration） • CVE（Common Vulnerabilities and Exposures） 28
- 29. 29
- 30. • CVE-YYYY-NNNN • 2017年底的CPU「推測執行」 （Speculative execution）安全漏洞 – CVE-2017-5754 – CVE-2017-5753 – CVE-2017-5715 30
- 31. 同源策略與CORS • 同源指的是請求的資源與目前文件來源， 具有相同的協定、埠號以及位置 • http://caterpillar.onlyfun.net/ – https://caterpillar.onlyfun.net – http://openhome.cc – http://192.168.0.1 – http://caterpillar.onlyfun.net:8080 31
- 32. 同源策略 • 無法取得src為非同源的iframe相關資訊 • 預設也無法以XMLHttpRequest或Fetch API等，請求非同源的資源，瀏覽器會禁止 JavaScript取得結果 32
- 33. • 子網域的資源，預設視為非同源 • JavaScript在瀏覽器中，可以透過 document.domain設定子網域為同源 – 可以設為頂層網域，然而不能設其他網域 • 不同來源的.js檔案在HTML頁面中執行時， 是以該HTML頁面來源作為同源依據 33
- 34. 簡介CORS • Cross-Origin Resource Sharing • 基於HTTP標頭的跨來源資源共享協議 • 瀏覽器發出非同源的跨域請求時，會附上 HTTP標頭Origin • 伺服端若同意跨域請求，回應中要包含 Access-Control-Allow-Origin標頭，值 可以是*或某一網域名稱 • 瀏覽器收到回應時，若回應中沒有Access- Control-Allow-Origin標頭，或者它的值 既非*也不符合目前文件來源，就不會交出收 到的資源 34
- 35. • 遵照CORS – XMLHttpRequest或Fetch API – ECMAScript模組的匯入 – script標籤若設定crossorigin屬性 35
- 36. 36
- 37. 37
- 38. 38
- 39. 39
- 41. 物件名稱空間 41
- 43. 43
- 44. 44
- 45. 45
- 46. 名稱管理程式 46
- 47. 47
- 48. 48
- 49. 49
- 50. 50
- 51. 51
- 52. 從CommonJS到AMD • 自2005年JavaScript逐漸被人們廣為應用 之後，當年倉促定義的語言特性也因而曝 露出許多缺點 • 在避免全域名稱這方面，也發展出物件階 層、IIFE等各種模式 • 過去許多程式庫上，像是Dojo、YUI、 jQuery等，都可見不同名稱空間管理模式 之實現 52
- 53. • 為了在瀏覽器環境之外構築出JavaScript生 態系，2009年1月，Mozilla的開發者Kevin Dangoor發起了ServerJS專案 • JavaScript必須得有個模組的標準規範，同 年九月專案更名為CommonJS，顯示其不 想僅侷促於伺服端的意圖 • Node.js曾經遵循著CommonJS來實現模組 管理 53
- 55. • 有人試圖將CommonJS的模組規範往前端 推進，希望能一統前端模組管理的混亂 • Node.js的主打特性是非同步，require() 函式在載入模組時卻是同步的 • 這意謂著require()某模組時，會阻斷瀏 覽器對後續頁面的處理 55
- 56. • 非同步模組定義AMD（Asynchronous Module Definition） • 定義模組時使用define() • 載入模組時雖然也採用require()，然而 為了不影響頁面的後續處理，載入過程是 非同步 • AMD最為人所知的實現，正是RequireJS 56
- 57. script標籤與模組 57
- 59. 59
- 62. 62
- 64. 模組語法入門 64
- 65. 65
- 66. • import的來源可以使用./開頭指定相對路 徑，或者是以/開頭指定絕對路徑 • 也可以是http://、https://開頭 • 對於非同源的模組來源，必須遵循CORS 66
- 67. • 被匯入的模組在解析後，會執行其頂層程 式碼 • 同一模組無論import幾次，都只會下載、 解析、執行一次，不會重複匯入 • 可以為import的名稱取個別名 67
- 69. 69
- 70. 70
- 71. 71
- 75. • 如果打算提供模組的預設公開「值」 • export default公開的是值 75
- 76. • 模組可以有多個export，但是只能有一個 export default • export default可以讓模組的客戶端， 在不知道模組中匯出了哪些名稱的情況下， 就能取用模組功能 76
- 77. 77
- 78. 78
- 79. • 此方式並不建議 79