HTML5 特性

<script defer>, <script async>

都是为了解决传统js加载影响DOM解析引起网页白屏而设计的。都知道js是按照书写顺序加载,按照书写顺序执行的。

  1. defer是延迟执行,HTML文档加载同时不阻塞,有defer属性的script标签中js文件还是按先后顺序加载,但在DOM被完全解析和显示后才执行。
  2. async是异步加载,HTML文档加载同时不阻塞,有async属性的script标签中js文件与下一个js文件同时加载。
  3. ⚠️注意:异步和延迟属性只对外部js文件有效;页面最好只有一个defer脚本;async脚本在解析时不要修改DOM。
  4. 应用场景:一些第三方库用defer最后加载;如果页面加载解析的同时需要的插件,使用async异步加载。

href和src区别

  1. href是Hypertext Reference的缩写,超文本引用。常用于超链接,是建立一种连接,是方向箭头。常用于超链接的<a href=”>和加载CSS的<link href=”>。href所在标签不会阻塞HTML文档的加载与解析。
  2. src是source缩写,表示资源的引用。会将资源下载到本地进行填充替换到标签的位置。src所在标签会阻挡页面的解析。常用语<img>, <script>, <frame>, <iframe>
  3. ⚠️注意:对于CSS的加载(4,5)
  4. ⚠️由于<link>是XHTML标签。不仅可以加载CSS还可加载RSS等其他事物。而@import是CSS2.1提出的,低版本浏览器可能不兼容。
  5. ⚠️使用link标签加载CSS时是文档于CSS一起加载,若使用@import,则页面加载完才加载CSS。

Meta标签

<meta>只能在head中,并且只可以在HTML文档的前1024字节内(因为某些浏览器只查看这些范围来选择charset编码方式)

  1. charset属性。声明当前文档所使用的字符编码,一般为 UTF-8。
  2. name属性。为方便robots抓取,因此添加描述网页关键词。在后面的content中要对关键词进行展开。<meta name="" content="">. name属性的参数:keywords关键词、description内容描述、viewport移动端窗口、robots索引方式、author网页作者、format-detection移动端网页格式检测。
  3. http-equiv属性。<meta http-equiv=” “>refresh自动刷新并指向新页面。expires页面到期时间,GMT格式停止向服务器传输;set-cookie 如果网页过期,本地cookie被清除;content-Type 显示字符设置;Page_Enter、Page_Exit 设置进出页面时的过渡效果;window-target 新窗口设定。