每日前端日报(第八十五天)
第八十五天（2018-10-28）
[html] a标签的href和onclick属性同时存在时哪个先触发？
[css] 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？
[js] js异步加载有哪些方案？
[软技能] 说说你对robots文件的理解，它有什么作用？
题目一：
应该是onclick属性先触发，判断依据是在onclik中使用preventDefault方法可以阻止a标签的跳转，说明a标签的跳转行为是一个默认行为；如下：
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a" onclick="event.preventDefault()">test</a>
题目二：
可以设置外层自适应高度的容器为flex布局，利用flex-basis属性即可实现自动填满剩余高度；代码如下：
.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;
}
<section class="container">
<div class="area1">300px</div>
<div class="area2">other</div>
</section>
在线demo
题目三：
1.将script标签放在body结束标签之前
<html>
<head></head>
<body>
.....
<script type="text/javascript" src='...'></script>
</body>
</html>
这种方案会先加载dom树，然后再加载js脚本
2.在onload方法中给dom树动态添加script标签
<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>
这种方案也是先加载dom树，然后触发onload方法添加script标签加载js脚本
3.使用defer属性
<html>
<head>
<script defer type='text/javascript'></script>
</head>
<body >.....</body>
</html>
这种方案会并行加载dom树和下载js脚本，js脚本下载后会等dom树解析完再执行
4.使用async属性
<html>
<head>
<script async type='text/javascript'></script>
</head>
<body >.....</body>
</html>
这种方案也会并行加载dom树和下载js脚本，js脚本下载完后立刻并行执行
9012 年不得不提 <script type="module">（自带 defer 效果） 和 动态加载模块的 import() 函数，配合 async/await 我忍不住说真香！
题目四：
robots.txt文件对抓取工具（如爬虫）在访问路径等方面做出了规定，用于阻止或引导抓取工具对网站下特定内容的抓取；
参考文档：Robots.txt 规范 | 搜索 | Google Developers
