题目概览
- 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文件的理解
robots.txt文件对抓取工具（如爬虫）在访问路径等方面做出了规定，用于阻止或引导抓取工具对网站下特定内容的抓取- 参考文档：Robots.txt 规范 | 搜索 | Google Developers