iframe用法實例 web前端影響頁面渲染的主要因素是？

2023-04-04

2640

web前端影響頁面渲染的主要因素是？主要因素:1、script腳本阻塞渲染進程，一般的處理都是將script放在body標簽的尾部，或者采用異步script2、頁面體積。一般頁面內容越多，越復雜，瀏覽

web前端影響頁面渲染的主要因素是？

主要因素:

1、script腳本阻塞渲染進程，一般的處理都是將script放在body標簽的尾部，或者采用異步script

2、頁面體積。一般頁面內容越多，越復雜，瀏覽器渲染的耗時就越大，所以一般的處理是頁面懶加載，按需加載，將一個大的script分成多個bundle文件

3、頁面中有耗時的執行腳本，這個過程是在頁面瀏覽過程中，因為執行某段耗時腳本而導致的頁面卡頓，這種情況可以考慮將耗時任務放到web worker中和頁面線程并行

4、頁面中引入ifreme，或者移動播放的媒體組件。因為iframe會阻止瀏覽器渲染進程，所以建議頁面中不到萬不得已，盡量少使用iframe，對于視頻這種資源比較大的場景，可以等頁面加載完成后再啟動媒體的加載。

5、網絡問題也是影響頁面加載的原因之一，一般我們的處理方案是對靜態資源打包壓縮，或者采用cdn來降低加載耗時，減少同域名下網絡的請求數也是一個優化措施

iframe的優點：

1、iframe能夠原封不動的把嵌入的網頁展現出來;

2、如果有多個網頁引用iframe，那么只需要修改iframe的內容，就可以實現調用每一個頁面的更改，方便快捷;

3、網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe嵌套，可以增加代碼的可重用;

4、如果遇到加載緩慢的第三方內容，如圖標或廣告，這些問題可以由iframe來解決;

5、iframe會堵塞主頁面的Onload事件;

6、iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

iframe的缺點：

1、iframe會阻塞主頁面的Onload事件;

2、iframe和主頁面共享鏈接池，而瀏覽器對相同城的鏈接有限制，所以會影響頁面的并行加載;

3、使用iframe之前需要考慮這兩個缺點，如果需要使用iframe，最好是通過JavaScript;

4、動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題

5、不利于seo

6、代碼復雜，無法一下被搜索引擎索引到

7、iframe框架頁面會增加服務器的http請求，對于大型網站不可取。

8、很多的移動設備無法完全顯示框架，設備兼容性差。