Loading

每日思考（2020/08/14）

题目概览

  • iframe的使用场景有哪些
  • 怎么让body高度自适应屏幕
  • js延迟加载的方式有哪些

题目解答

iframe的使用场景有哪些

  • 典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe
  • ajax上传文件：iframe实现Ajax文件上传效果示例
  • 加载别的网站内容，例如google广告，网站流量分析
  • 在上传图片时，不用flash实现无刷新
  • 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源

怎么让body高度自适应屏幕

  • DOM 元素的 height 当设为百分比时，只有当父元素有一个定高的值时才会生效，否则不起作用

  • 要让 body 高度自适应就必须要在 html 上设置定高。而 html 的父级就是浏览器，html 的宽高由浏览器决定。浏览器的宽高是定值，因此需要给 html 和 body 同时设置 100%

    html,body{
    height:100%
}

  • 另外也可以给 body 设置一个 min-height: 100vh; 让 body在高度不够时可以撑满整个屏幕。（做验证可以使用 border，background 即便是高度不足时，浏览器也会填满颜色

    body{
	min-height: 100vh;
}

js延迟加载的方式有哪些

  • defer 属性：

    <!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

  • async 属性

    <!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

  • 动态创建DOM方式

    //这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load",downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload",downloadJSAtOnload);
else
window.onload =downloadJSAtOnload;
</script>

  • 使用jQuery的getScript方法

    $.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
	console.log("脚本加载完成")
});

  • 使用setTimeout延迟方法

  • 让JS最后加载：把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

posted @ 2020-08-15 00:37  澎湃_L  阅读(121)  评论(0)  编辑  收藏  举报