iframe用法实例 web前端影响页面渲染的主要因素是？

web前端影响页面渲染的主要因素是？

主要因素:

1、script脚本阻塞渲染进程，一般的处理都是将script放在body标签的尾部，或者采用异步script

2、页面体积。一般页面内容越多，越复杂，浏览器渲染的耗时就越大，所以一般的处理是页面懒加载，按需加载，将一个大的script分成多个bundle文件

3、页面中有耗时的执行脚本，这个过程是在页面浏览过程中，因为执行某段耗时脚本而导致的页面卡顿，这种情况可以考虑将耗时任务放到web worker中和页面线程并行

4、页面中引入ifreme，或者移动播放的媒体组件。因为iframe会阻止浏览器渲染进程，所以建议页面中不到万不得已，尽量少使用iframe，对于视频这种资源比较大的场景，可以等页面加载完成后再启动媒体的加载。

5、网络问题也是影响页面加载的原因之一，一般我们的处理方案是对静态资源打包压缩，或者采用cdn来降低加载耗时，减少同域名下网络的请求数也是一个优化措施

Iframe特点？

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、很多的移动设备无法完全显示框架，设备兼容性差。

页面 iframe 处理 问题 浏览器

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。