每日思维洞察：2020年8月19日的深度分析与反思

题目概览

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


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


• js异步加载有哪些方案


• 对robots文件的理解

题目解答

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

• 是onclick属性先触发

  
  



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

  test

  

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

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

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

  








  
  

  
  

  
  
  



  

js异步加载有哪些方案

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

  


.....




  




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

  

{
var element = document.creatElement(‘script‘);
element.type = ‘text/Javascript‘;
element.src = ‘...‘;
var headTag = document.getElementsByTagName(‘head‘)[0];
headTag.insertBefore(element, headTag.firstChild);}">
.....



  




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

  



.....


  




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

  



.....


  




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

  
  

对robots文件的理解

• robots.txt文件对抓取工具（如爬虫）在访问路径等方面做出了规定，用于阻止或引导抓取工具对网站下特定内容的抓取


• 参考文档：Robots.txt 规范 | 搜索 | Google Developers