前端開發(fā)內(nèi)聯(lián)代碼的優(yōu)點(diǎn)與缺點(diǎn)?
網(wǎng)友解答: 內(nèi)聯(lián)是直接在HTML文檔中包含文件內(nèi)容的過程:CSS文件可以在元素內(nèi)部?jī)?nèi)聯(lián),JavaScript文件可以內(nèi)聯(lián)在元素中:通過打印HTML輸出中已有的代碼,內(nèi)聯(lián)可避免渲染阻塞請(qǐng)求
內(nèi)聯(lián)是直接在HTML文檔中包含文件內(nèi)容的過程:CSS文件可以在元素內(nèi)部?jī)?nèi)聯(lián),JavaScript文件可以內(nèi)聯(lián)在元素中:
通過打印HTML輸出中已有的代碼,內(nèi)聯(lián)可避免渲染阻塞請(qǐng)求,并在呈現(xiàn)頁(yè)面之前執(zhí)行代碼。因此,它有助于提高站點(diǎn)的感知性能(即頁(yè)面變得可用的時(shí)間。)例如,我們可以使用在加載站點(diǎn)(大約14kb)時(shí)立即傳送的數(shù)據(jù)緩沖區(qū)來內(nèi)聯(lián)在關(guān)鍵的風(fēng)格,包括款式上面屏內(nèi)容(如已經(jīng)在先前的網(wǎng)站完成),以及字體大小和布局的寬度和高度,以避免跳躍的布局重新繪制時(shí)數(shù)據(jù)的其余部分被輸送。
但是,當(dāng)過度使用時(shí),內(nèi)聯(lián)代碼也會(huì)對(duì)站點(diǎn)性能產(chǎn)生負(fù)面影響:由于代碼不可緩存,因此會(huì)反復(fù)向客戶端發(fā)送相同的內(nèi)容,并且無法通過Service Workers預(yù)緩存,或者從內(nèi)容交付網(wǎng)絡(luò)緩存和訪問。此外,在實(shí)施內(nèi)容安全策略(CSP)時(shí),內(nèi)聯(lián)腳本被認(rèn)為是不安全的。
所以,內(nèi)聯(lián)代碼是一個(gè)明智的開發(fā)策略,內(nèi)聯(lián)CSS和JS的關(guān)鍵部分,使網(wǎng)站加載速度更快,但盡可能避免代碼繁多導(dǎo)致服務(wù)器性能下降。