大家都明白，我们在浏览器里输个网站名，比方说淘宝网，其实就是先让DNS帮忙找IP地址，然后我们就能上去。这个速度还挺快，但是，每次上新网站都得这么干一次。尤其是那种用好几个CDN域名加载资源的大网站，每次加载前都得先查一下DNS，这就拖慢了加载速度。
明白吗？DNS 解析就是找到你目的地的那张地图。如果每到新地点就要东翻西找，就可能浪费不少时间！但是，如果知道自己要去哪，提前研究下路径并牢记心中，出行时自然能节省许多时间。DNS 预加载就有这样的效果，它在我们真正需要访问网站或文件时，先去把 DNS 解析弄好并留存查询结果，然后等你需要的时候就立刻用上这些事先准备的答案，这样就能大大缩短等待的时间。
DNS 预加载的实际应用
要举个简单的例子的话,淘宝网就挺不错的。你只要用它访问一下，看下网页的原始码，就能发现在头几行里，他们就已经提前弄明白一堆CDN服务器的IP地址，然后存起来了。这么做最大的优点是，当你看东西需要下载图片什么的时候，浏览器就可以直接利用当初存下来的信息，再也不用去花时间搞DNS解析了，这样可以大幅度提高传输速度。
这种技术可不是说只有淘宝才用，其他各种大大小小的网站也都在用，目的就是让大家上网更快更爽！你们想想，等个网页半天，多影响心情。对网站来说，加载快了，用户留得住，转化率也会提高。
资源预加载的其他方法
除了DNS预加载，还能做？比如先把图片准备好。你可以用CSS把它们弄成背景图，也能用JavaScript帮你把它们加载出来。它们就是帮我们事先把可能要用到的资源下载下来，这样以后用起来就不用等了，直接从缓存中取就行了。
现在，HTML5新出了个特殊功能，叫预加载。Firefox和Chrome都能用！预加载就是在网页加载完后，自动帮你下好需要的东西，像JS、CSS和图片这些。而预渲染就更牛了，它不只是下载，还能提前把东西显示出来，等你点开链接时，立马就能看到内容。
预读取和预渲染的实际应用
预读取和预渲染的用处可多！举个例子，像是搜素引擎这种，他们知道你马上要看什么（就是那个搜索结果页嘛）。那等您开始打字询问后，它就赶紧先把搜索结果页的东西给准备好。等你一点搜索结果，页面一下子就跳出来了，感觉是不是特别爽？
现在这个俩功能暂时还不太兼容，就Chrome和Firefox能用。如果你想要在这两个浏览器上都能跑起来，就这么写：
html不论你用Chrome还是Firefox，都是可以享受提前加载网页的好处！
HTML5 的 Download 属性
HTML5多了个超级有用的新玩意儿——Download属性。以前我们点开PDF文件，浏览器一般都是直接显示出来，现在借助这个属性，它会直接让浏览器把这份文件给下载下来。
这个属性，挺实用的，像那些长点心就会下载的东西就得加它；还能用JavaScript或手动手换想留下来的文件名！这样子用户体验好了，又好操作了。
总结
总的来说，搞个 DNS 解析和资源预加载能让你的网站速度更快。用上 DNS 预加载，别让大家干等着下载东西；做个资源预加载，先把大家可能要用到的东西给他们加上去，这样大家用着也顺手。还有 HTML5 的那些预读取、预渲染和 Download 属性，这可都是提高网站速度的好帮手！
那就来聊聊，你看，平常我们上哪些网站会最需要这些优化方法？在评论里告诉我你的想法，别忘了顺便点个赞和分享！
点击直接下载并保存成 download.pdf 文件原文链接：https://www.icz.com/technicalinformation/web/2024/06/18562.html，转载请注明出处~~~
评论0