2022web前端全栈完整整理——（三）html/html5篇

原创已于 2022-11-30 21:45:38 修改 · 714 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #html5 #异步加载script #预加载link

于 2022-05-07 21:57:45 首次发布

前端专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了前端开发中的HTML5基础、移动端Web技巧以及Vue文件结构。重点讲解了不同类型的<script>标签在资源加载上的差异，包括同步、异步、延迟加载以及import的使用场景。此外，还探讨了<link>标签的预加载策略，如preload、prefetch、subresource和prerender，强调了它们在提升页面性能和用户体验上的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多前端资料，《前端Tool》小程序。

1. html5基础：https://alex-ss.blog.csdn.net/article/details/88679657

2.移动端web开发技巧：https://blog.csdn.net/qq_42231156/article/details/84565595

3. *.vue文件的组成：由三种类型的顶层语法块组成<template>，<scripte>，<style>

每个*.vue文件最多存在一个<template>。
每个*.vue文件最多存在一个<scripte>（在vue3中，允许同时存在最多一个<script setup>和最多一个<scripte>）。
每个*.vue文件允许一个或多个<style>。

4. script标签中引入js/ts：

<script src='xx/xx.ts'/> // 不允许在xx.ts中使用import 
<script>
// 不允许使用import 
</script>

<script type='module' src='xx/xx.ts'/>  // 异步加载，允许在xx.ts中使用import 
<script type='module'>
// 异步加载，允许使用import 
</script>

<script defer src='xx/xx.ts'/>
<script async src='xx/xx.ts'/>

script设置defer属性：浏览器会异步下载该文件，且不会影响后续DOM渲染，如果设置多个defer的script，会按顺序执行所有script，defer脚本会在文本渲染完毕后，DOMContentLoaded事件执行前执行。
script设置async，使得script脚本异步加载并在允许条件下异步执行该脚本，但并不是按照script顺序执行，而且谁先加载完，执行谁，执行时页面停止渲染，执行完后才继续渲染，DOMContentLoaded事件的触发并不受到async加载影响。所有大部分用的时设置defer属性。

5. link标签的预加载资源：preload，prefetch，subresource，prerender。

preload：对当前页面所需的脚本，样式等资源预加载，不需要等到解析script，link标签时才加载，不易阻塞页面初步渲染，进而提升性能。需要as属性

<!--link标签中支持css，js预加载-->
<link rel='preload' href='xx.css' as='style'>
<link rel='preload' href='xx.js' as='script'>

prefetch：预加载其他页面的资源，利用页面浏览器空虚时加载，当页面进入其他页面时，直接从disk cache中获取，既不影响当前页面渲染，又提高了其他页面的加载渲染速度。不需要as属性。

<!--link标签中支持css，js预加载-->
<link rel='prefetch' href='xx.css'>
<link rel='prefetch' href='xx.js'>

subresource：可以用来指定要加载的资源时最高优先级。

<link rel='subresource' href='xx.css'>

prerender：让浏览器提前加载指定页面的所有资源。

<link rel='prerender' href='xx.html'>