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