Loading

每日思考（2020/08/19）

题目概览

  • a标签的href和onclick属性同时存在时哪个先触发
  • 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度
  • js异步加载有哪些方案
  • 对robots文件的理解

题目解答

a标签的href和onclick属性同时存在时哪个先触发

  • 是onclick属性先触发

  • 判断依据是在onclik中使用preventDefault方法可以阻止a标签的跳转，说明a标签的跳转行为是一个默认行为

    <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a" onclick="event.preventDefault()">test</a>

外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度

  • 可以设置外层自适应高度的容器为flex布局，利用flex-basis属性即可实现自动填满剩余高度（flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值，比如350px，则项目将占据固定空间。

    一句话就是项目占据了固定的高度，再使用flex: 1填空间的时候，不会考虑固定的空间）

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            flex-flow: column nowrap;
            height: 500px;
            border: 2px dashed orange;
        }

        .area1 {
            flex-basis: 300px;
            background-color: lightblue
        }

        .area2 {
            flex: 1;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
    <section class="container">
        <div class="area1">300px</div>
        <div class="area2">other</div>
    </section>
</body>

  • 利用css3的calc函数

    <html>
<head>
  <style type="text/css">
    .top {
      height: 300px;
      background-color: #dbdd66
    }
    .bottom {
      height: calc(100% - 300px);
      background-color: #427cdd
    }
  </style>
</head>
<body>
<div>
  <div class="top"></div>
  <div class="bottom"></div>
</div>
</body>
</html>

js异步加载有哪些方案

  • 将script标签放在body结束标签之前：先加载dom树，然后再加载js脚本

    <html>
<head></head>
<body>
 .....
<script type="text/javascript" src='...'></script>
</body>
</html>

  • 在onload方法中给dom树动态添加script标签：先加载dom树，然后触发onload方法添加script标签加载js脚本

    <html>
<head></head>
<body onload="() => {
  var element = document.creatElement('script');
  element.type = 'text/javascript';
  element.src = '...';
  var headTag = document.getElementsByTagName('head')[0];
  headTag.insertBefore(element, headTag.firstChild);}">
.....
</body>
</html>

  • 使用defer属性：并行加载dom树和下载js脚本，js脚本下载后会等dom树解析完再执行

    <html>
<head>
    <script defer type='text/javascript'></script>
</head>
<body >.....</body>
</html>

  • 使用async属性：会并行加载dom树和下载js脚本，js脚本下载完后立刻并行执行

    <html>
<head>
    <script async type='text/javascript'></script>
</head>
<body >.....</body>
</html>

  • <script type='module'>（自带 defer 效果） 和 动态加载模块的 import() 函数，配合 async/await 实现，参考在浏览器中使用JS module

对robots文件的理解

posted @ 2020-08-20 00:01  澎湃_L  阅读(78)  评论(0)  编辑  收藏  举报