資訊專欄INFORMATION COLUMN
摘要：指定了屬性的元素標(biāo)簽內(nèi)不應(yīng)該再有嵌入的腳本。該屬性定義元素包含或引用的腳本語(yǔ)言。為時(shí)缺省為方式。該屬性指示瀏覽器是否在允許的情況下異步執(zhí)行該腳本。這個(gè)屬性被設(shè)定用來(lái)通知瀏覽器該腳本將在文檔完成解析后，觸發(fā)事件前執(zhí)行。
html元素及其屬性，相信大家都很熟悉，但是script的屬性，未必熟悉，故而整理總結(jié)，以待查閱。
前言默認(rèn)情況下，瀏覽器是同步加載 JavaScript 腳本，即渲染引擎遇到 2、type
該屬性定義script元素包含或src引用的腳本語(yǔ)言。屬性的值為MIME類型;
只能是下面幾種方式:
text/javascript（默認(rèn)）
text/ecmascript
application/javascript
application/ecmascript
除了上面以上4中，還有一種
module
即代碼會(huì)被當(dāng)作JavaScript模塊處理。
type為module時(shí)缺省為defer方式。
3、async該屬性指示瀏覽器是否在允許的情況下異步執(zhí)行該腳本。該屬性對(duì)于沒有src屬性的腳本不起作用。
等同于下面
var script = document.createElement("script");
script.src = "file.js";
document.body.appendChild(script);
//從腳本中創(chuàng)建的腳本默認(rèn)為異步。
瀏覽器支持： chrome，firfox，safari，IE10+都已經(jīng)實(shí)現(xiàn)。
4、defer這個(gè)屬性被設(shè)定用來(lái)通知瀏覽器“該腳本將在文檔完成解析后，觸發(fā) DOMContentLoaded 事件前執(zhí)行”。如果無(wú)src，則不起作用。
精髓就是一句話： 不管這段腳本放在html的何處(即使head中)，都會(huì)等待dom解析完成后再去加載。
如果將script標(biāo)簽放在整個(gè)html文件的最后，那就不需要defer了，畫蛇添足。
瀏覽器支持： chrome，firfox，safari，IE10+都已經(jīng)實(shí)現(xiàn)。
async和defer的區(qū)別:
defer要等到整個(gè)頁(yè)面正常渲染結(jié)束，才會(huì)執(zhí)行；
async是在渲染html時(shí)發(fā)現(xiàn) 腳本已經(jīng)異步下載完，就去執(zhí)行，執(zhí)行完了，再繼續(xù)往下渲染html
使用本屬性來(lái)使那些將靜態(tài)資源放在另外一個(gè)域名的站點(diǎn)打印錯(cuò)誤信息。
what??? 這個(gè)官方的解釋讓人很懵逼，別急。
由于使用普通的方式加載script，即下面這種
如果src中的跨站js文件，出現(xiàn)了錯(cuò)誤。我們是無(wú)法通過(guò)監(jiān)聽window.onerror來(lái)將錯(cuò)誤準(zhǔn)確的打印出來(lái)。只能打印出來(lái)"Script error"（當(dāng)然瀏覽器控制臺(tái)可能會(huì)出來(lái)詳細(xì)錯(cuò)誤，但我們無(wú)法在代碼中捕獲，并作出處理）
所以我們要添加crossorigin屬性來(lái)獲取跨站文件的錯(cuò)誤信息。
首先，服務(wù)器要允許跨站獲取文件
access-control-allow-origin: *
其次，在js中添加crossorigin
crossorigin的值為:
anonymous 采用普通方式設(shè)置對(duì)此元素的CORS請(qǐng)求
use-credentials 采用憑證的方式設(shè)置對(duì)此元素的CORS請(qǐng)求
瀏覽器支持： 只有IE未實(shí)現(xiàn)，其他均實(shí)現(xiàn)。
6、integrity提供hash值，來(lái)驗(yàn)證覽器獲得的資源（例如從 CDN 獲得的）是否被篡改。
首先需要服務(wù)器開啟內(nèi)容安全策略，即 Content-Security-Policy
Content-Security-Policy: require-sri-for script; //加載script時(shí)需要進(jìn)行校驗(yàn)
第二步，加入integrity值
integrity的值為src文件進(jìn)行base64編碼的值，可通過(guò)SRI在線生成工具生成。
如果integrity和src文件的hash值不匹配，則瀏覽器會(huì)報(bào)錯(cuò)。
除了對(duì)script進(jìn)行校驗(yàn)外，同樣還可對(duì)style進(jìn)行校驗(yàn)
Content-Security-Policy: require-sri-for style;
瀏覽器支持： 只有chrome，firfox實(shí)現(xiàn)，safari，IE都未實(shí)現(xiàn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54809.html
我們時(shí)常會(huì)想在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎(chǔ)上，這些功能如何優(yōu)化的實(shí)現(xiàn)？ 以Element Plus的el-input為例： 在封裝一個(gè)MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來(lái)編寫： //MyInput.vue <template&...
摘要：指定了屬性的元素標(biāo)簽內(nèi)不應(yīng)該再有嵌入的腳本。該屬性定義元素包含或引用的腳本語(yǔ)言。為時(shí)缺省為方式。該屬性指示瀏覽器是否在允許的情況下異步執(zhí)行該腳本。這個(gè)屬性被設(shè)定用來(lái)通知瀏覽器該腳本將在文檔完成解析后，觸發(fā)事件前執(zhí)行。 html元素及其屬性，相信大家都很熟悉，但是script的屬性，未必熟悉，故而整理總結(jié)，以待查閱。 前言 默認(rèn)情況下，瀏覽器是同步加載 JavaScript 腳本，即渲染...
跨域 要知道在請(qǐng)求后臺(tái)接口遇到Access-Control-Allow-Origin時(shí)，這就表明跨域了?！ ∈紫冉忉尶缬?，是因?yàn)闉g覽器的同源策略所導(dǎo)致，同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，同源是指：域名、協(xié)議、端口相同 解決跨域常用方法： 一、VUE中常用proxy來(lái)解決跨域問(wèn)題 1、在vue.config.js中設(shè)置如下代碼...
這篇文章要說(shuō)的就是如何配置跨域，代理域名，其實(shí)這個(gè)話題繞不開的，現(xiàn)在我們就說(shuō)說(shuō)vite的代理 server:{ proxy:{ '/api':{ target:'https://baidu.com', changeOrigin:true, rewrite:(path)=>path.replace(/^\/api/,''...
用vite作為項(xiàng)目打包工具，這是為什么？其中最主要的原因是 ——vite在開發(fā)環(huán)境基于ESM規(guī)范實(shí)現(xiàn)的Nobundle模式，節(jié)省了代碼打包的時(shí)間?！ ‘?dāng)前打包的需求任然有，且ESM規(guī)范兼容性越來(lái)越好，進(jìn)入生產(chǎn)環(huán)境大面積可用的狀態(tài)也不是不可能?！ ‘?dāng)生產(chǎn)環(huán)境打包將不再是剛需時(shí)?！ ×硪环矫妫瑥腍TTP協(xié)議的角度看，在HTTP/1.1時(shí)代，多個(gè)模塊被打包成一個(gè)文件能減少瀏覽器并發(fā)請(qǐng)求數(shù)，達(dá)到優(yōu)化目...
閱讀 2938·2023-04-25 19:08
閱讀 1426·2021-11-16 11:45
閱讀 1988·2021-10-13 09:40
閱讀 4153·2021-09-30 09:47
閱讀 2425·2019-08-30 15:44
閱讀 2295·2019-08-30 13:03
閱讀 1399·2019-08-30 12:56
閱讀 1899·2019-08-26 14:04
