三个不常见的 HTML5 实用新特性简介

2024-12-17 18:19:02

一、DNS 预解析缓存

众所周知，解析 DNS 是网站性能优化的比较重要的一部分，虽然加载时间不太长，但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站，更不可忽视，每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。
如果采用 DNS 预加载，支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下，而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单：

代码如下:

淘宝网就应用了这项技术，你可以打开淘宝网，查看源代码，最顶端就把他们的一些 CDN 服务器进行了 DNS 解析缓存。

二、资源预加载

资源预加载有很多办法，例如常见的图片预加载，有采用 CSS 的背景图片来预加载，大部分还是用 JS。目前 HTML5 提供了专门的资源预加载方法，有两个属性：prefetch（预读取）和 prerender（预渲染），分别被 Firefox 和 Chrome 浏览器支持。

1).PREFETCH 预读取
预读取就是很常见的资源预加载，当前页面加载完成之后，就会在后面偷偷的下载你指定的资源，一般是 JS 、CSS 和图片这类的，也可以下载页面：

代码如下:

注意，目前 Firefox 浏览器支持这个功能。

2).PRERENDER 预渲染
这个更厉害了，不仅偷偷的提前下载，而且还给你渲染出来，当用户点击链接的时候，立刻给你展现出来。

代码如下:

注意，目前 Chrome 支持这个功能。

搜素引擎其实是最需要这种预读取的功能的，因为他们非常确定用户下一步要打开的页面（搜索结果页面），所以当用户输入搜索内容的时候，就可以提前把搜索结果页面的资源提前加载，而且应用之后，效果十分明显。

目前兼容性是个缺点，貌似只有 Chrome 和 Firefox 支持，而且用的 rel 属性是不同的，如果你想同时兼容两个浏览器，可以写成下面这样：

代码如下:

此外，当然为了安全没法跨域预加载资源，可能没法用在 CDN 了。

三、Download 属性

HTML5 的 Download 属性用来强制浏览器下载对应文件，而不是打开。Chrome 和 Firefox 等浏览器太过于强大，也许是为了增强用户体验，当用户点击的资源文件可以被它们识别的时候（例如 pdf 会直接在浏览器打开，mp3、mp4 等媒体直接用浏览器内置播放器播放）。但有时候，用户其实是希望直接下载而不是在浏览器上看看，这时就可以加上这个属性，属性值会对下载的文件重命名：

代码如下:

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>

如果你确定这个资源是用户肯定会下载的，就可以加上这个属性，还可以用 JS 或者手动改变想要保存的文件名。

HTML5 还有很多其他特性，但是看了很长时间书和各种资料，很少见到上面三个又比较实用的属性，拿出来分享一下。

三个不常见的 HTML5 实用新特性简介

一.DNS 预解析缓存众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来.特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换.如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析.而且这个功能应用实在是太简单: 复制代码代码如下: <link rel="dns-prefetch"
PHP 8新特性简介

PHP 8新特性新的主要PHP版本PHP 8预计将于2020年底发布.它现在处于非常活跃的开发阶段,所以在接下来的几个月里,事情可能会发生很大的变化. 在这篇文章中,我将持续更新预期的内容列表:新特性.性能改进和重大变化.因为PHP 8是一个新的主版本,所以您的代码被破坏的几率更高.如果你一直在更新最新的版本,升级应该不会太困难,因为大多数有破坏性的更改在7之前就已经废弃了.*版本. 除了中断更改之外,PHP 8还带来了一些不错的新特性,比如JIT编译器和union类型;还有更多! Union
C#9.0 新特性简介

CandidateFeaturesForCSharp9 看到标题,是不是认为我把标题写错了?是的,C# 8.0还未正式发布,在官网它的最新版本还是Preview 5,通往C#9的漫长道路却已经开始.前写天收到了活跃在C#一线的BASSAM ALUGILI给我分享C# 9.0新特性,我在他文章的基础上进行翻译,希望能对大家有所帮助. 这是世界上第一篇关于C#9候选功能的文章.阅读完本文后,你将会为未来可能遇到的C# 9.0新特性做好更充分的准备. 这篇文章基于, C# 9.0候选新特性原生大小的
Java8深入学习系列（三）你可能忽略了的新特性

前言我们之前已经介绍了关于java8中lambda和函数式编程的相关内容,虽然我们开始了Java8的旅程,但是很多人直接从java6上手了java8, 也许有一些JDK7的特性你还不知道,在本章节中带你回顾一下我们忘记了的那些特性. 尽管我们不能讲所有特性都讲一遍,挑出常用的核心特性拎出来一起学习. 异常改进 try-with-resources 这个特性是在JDK7种出现的,我们在之前操作一个流对象的时候大概是这样的: try { // 使用流对象 stream.read(); stream
ES6中非常实用的新特性介绍

ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设"深入浅出ES6"专栏,来看一下ES6将给我们带来哪些新内容. 写在前面 ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖.ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下. 1. for-of循环这个东西用来循环数组很爽,原因呢,是因为它弥补了目前
ES6新特性三： Generator(生成器)函数详解

本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改变. ② 写法: function* f() {} ③ 作用:就是可以完全控制函数的内部状态的变化,依次遍历这些状态. ④ 运行过程:当调用Generator函数的时候,该函数并不执行,而是返回一个遍历器(可以理解成暂停执行).通过调用next()开始执行,遇到yield停止执行,返回一个value
Android新特性页面之ViewPager拖拽到最后一页再拖拽打开其他Activity(三种方法)

android新特性页面,ViewPager拖拽到最后一页再拖拽打开其他Activity.实现的方式有很多,效果比较好的就是到了最后一页再拖拽出现禁止蓝色条时再跳转activity 方式一:拿到ViewPager的边界条EdgeEffectCompat,判断是否到了边界(获取EdgeEffectCompat通过反射,方法来自网络最后边会给出原文) /** * 初始化view */ private void initView(){ pager = (ViewPager) findViewById(
Go1.18新特性之泛型使用三步曲(小结)

目录 01 Go中的泛型是什么 1.1 传统的函数编写方式 1.2 泛型函数编写方式 02 从泛型被加入之前说起 2.1 针对每一种类型编写一套重复的代码 2.2 使用空接口并通过类型断言来判定具体的类型 2.3 传递空接口并使用反射解析具体类型 2.4 通过自定义接口类型实现 03 深入理解泛型--泛型使用“三步曲” 3.1 第一步:类型参数化 3.2 第二步:给类型添加约束 3.3 第三步:类型参数实例化 04 泛型类型约束和普通接口的区别总结 01 Go中的泛型是什么众所周知,Go是一
5个实用的JavaScript新特性

目录前言 1.# 使用"Object.hasOwn"替代“in”操作符 2.# 使用"#"声明私有属性 3.# 超有用的"数字分隔符" 4.# 使用"?."简化"&&"和三元运算符 5.# 使用"BigInt"支持大数计算最后前言 JavaScript在不断地升级迭代,越来越多的新特性让我们的代码写起来变得简洁有趣,这篇文章会介绍5个新特性,一起研究一下把. 1.#
ASP.NET2.0新特性概述

ASP.NET技术从1.0版本升级到1.1变化不是很大.然而,从ASP.NET 1.x升级到2.0,却不是件轻而易举的事情.ASP.NET 2.0技术增加了大量方便.实用的新特性.ASP.NET 2.0主要提供控件.页面框架.服务与APIs等3个方面的技术特性. 控件在ASP.NET 1.x时代,由于内置服务器控件数量有限.功能覆盖面窄,因此,开发人员怨声载道.为了消除这个技术软肋,ASP.NET 2.0做出了突破性改进.在ASP.NET 2.0中,新增数十个服务器控件.根据控件功能特征,可分

三个不常见的 HTML5 实用新特性简介

相关推荐

随机推荐