10. 進入瀏覽器
•Download as PPTX, PDF•
1 like•284 views
script標籤基本特性 認識async與defer 初探同源策略與CORS 認識ES6前的模組管理 使用ECMAScript模組
Recommended
More Related Content
What's hot
Similar to 10. 進入瀏覽器
Similar to 10. 進入瀏覽器 (20)
More from Justin Lin
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