测试环境
Chrome 99.0.4844.51(正式版本) (64 位)
测试用例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>main</title>
</head>
<body>
<h1>main</h1>
<iframe src="http://127.0.0.1:5500/iframe.html" frameborder="0" style="border: solid 1px;"></iframe>
<br>
<button>btn</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
</head>
<body>
<h1>iframe</h1>
<button onclick="block()">block</button>
<script>
function block() {
for (let i = 0; i === i; i++) { }
}
</script>
</body>
</html>
测试方法
-
先用Live Server 打开iframe.html ,再直接打开main.html ,然后Shift+Esc 呼出浏览器的任务管理器,可见iframe 与父页面并未共用同一个渲染进程,而是会有一个辅助框架 进程用于渲染iframe 。验证方法也很简单,可以直接结束辅助进程 ,会发现主页面并未卡死或崩溃;也可以直接点击iframe 中的block 按钮,会发现iframe 卡死但主页面未卡死 -
先用Live Server 打开iframe.html ,再用Live Server 打开main.html ,然后Shift+Esc 呼出浏览器的任务管理器,可见iframe与父页面共用了同一个渲染进程。验证方法和上面的测试一样
测试结论
当iframe 与父页面同源 时,它们会共用渲染进程,否则不会。
|