前端性能优化：从defer到preconnect，解锁资源加载的六大法宝
引言
最近在折腾前端性能优化，发现浏览器提供了不少资源加载的"小技巧"，用好了能让网站加载速度快一大截。今天就跟大家聊聊这些资源提示关键词，都是实战中总结的经验，保证你看得懂、用得上。
一、先搞明白渲染阻塞：为啥页面加载慢？
你肯定遇到过这种情况：打开一个网页，白屏半天才出来内容。这背后其实就是渲染阻塞在作怪。
- 浏览器是怎么渲染页面的？
浏览器拿到HTML后，会一边解析一边构建DOM树。遇到CSS，就停下来解析CSS，生成CSSOM树。遇到JS，更惨，直接停掉HTML解析，等JS下载和执行完再继续。
结果就是：DOM和CSSOM都没准备好，页面就渲染不出来，用户只能盯着白屏干等。
二、资源提示关键词：浏览器给你的"加速外挂"
为了解决渲染阻塞，浏览器提供了几个"外挂"关键词，用好了能让资源加载更聪明。
1. defer 和 async：给JS脚本开个"加速通道"
-
async：异步加载，执行不等人适合那种"独来独往"的脚本，比如第三方统计代码，不依赖页面其他内容。
html<script async src="stats.js"></script>效果：脚本一边下载一边解析HTML，下载完立马执行，不阻塞页面渲染。
-
defer：异步加载，执行按顺序适合需要等DOM加载完再执行的脚本，比如初始化页面交互的代码。
html<script defer src="init.js"></script>效果：脚本异步下载，但等到HTML解析完、DOM构建好后才按顺序执行。
2. preload：提前"预定"关键资源
有些资源是页面必须的，比如首屏的图片、字体，可以用preload告诉浏览器："嘿，这个资源很重要，赶紧加载！"
html
<link rel="preload" href="hero-image.jpg" as="image">效果：浏览器会优先加载这些资源，用的时候直接拿，不用再等。
3. prefetch：偷偷"缓存"未来资源
如果用户下一步很可能访问某个页面，可以用prefetch在后台偷偷加载它的资源。
html
<link rel="prefetch" href="/next-page.html">效果：用户点链接时，资源已经缓存好了，秒开不是梦。
4. preconnect：提前"握手"服务器
连接服务器要经过DNS查询、TCP握手、TLS协商，这些步骤挺耗时。preconnect可以提前做这些事。
html
<link rel="preconnect" href="https://cdn.example.com">效果：真正请求资源时，连接已经建好了，省下不少时间。
5. dns-prefetch：提前"查字典"
DNS查询就像查字典，dns-prefetch可以提前查好域名对应的IP。
html
<link rel="dns-prefetch" href="//fonts.googleapis.com">效果：后续请求这个域名的资源时，不用再查字典，直接用IP访问。
三、实战技巧：怎么用这些"外挂"？
-
JS脚本：能用async就别用defer，除非你的脚本真的依赖DOM。
比如统计代码用async，初始化代码用defer。 -
关键资源：首屏的图片、字体、CSS，一律用preload。
用户打开页面第一眼看到的东西，必须优先加载。 -
未来资源：用户可能点击的链接，偷偷用prefetch缓存。
比如电商网站的"立即购买"按钮，可以预加载订单页的资源。 -
第三方资源：提前preconnect和dns-prefetch。
比如用了Google字体，就提前连上Google的服务器。
结语
前端性能优化就是个"抠细节"的活，这些资源提示关键词就是浏览器给你的"作弊码"。用好了，网站加载速度能提升不少，用户体验杠杠的。当然，别忘了用Chrome的Performance面板看看效果，实践出真知！
最后吐槽一句：浏览器这些提示词，名字起得真够玄乎的，什么preload、prefetch，刚开始看文档都看懵了。希望这篇文章能帮你少走点弯路，咱们下期见！