三个不常见的HTML5 网站开发实用技巧分享

2021-12-01 04:46:14

阅读 11874次标签：网站开发作者： chenliwen666

    现在我们可以选择浏览器非常多，所以浏览器的环境也是种类繁多，同一个浏览器也是包含各种不同的版本，不同的版本之间的渲染方法也存在差异，它们支持的 HTML5特性恐怕也不尽相同，相信这是很多综合性网站会遇到的问题。都已经到了 2014 年了，再来说 HTML5 的新特性，实在是够晚了，不过这几个在介绍 HTML5 的书上很少见到，但又可以方便的应用在自己的网站上，所以一品威客网特地来介绍一下。
    一、Download 属性
    HTML5 的 Download 属性用来强制浏览器下载对应文件，而不是打开。Chrome 和 Firefox 等浏览器太过于强大，也许是为了增强用户体验，当用户点击的资源文件可以被它们识别的时候（例如 pdf 会直接在浏览器打开，mp3、mp4 等媒体直接用浏览器内置播放器播放）。但有时候，用户其实是希望直接下载而不是在浏览器上看看，这时就可以加上这个属性，属性值会对下载的文件重命名：
    代码如下:
     如果你确定这个资源是用户肯定会下载的，就可以加上这个属性，还可以用 JS 或者手动改变想要保存的文件名。HTML5 还有很多其他特性，但是看了很长时间书和各种资料，很少见到上面三个又比较实用的属性，拿出来分享一下。

三个不常见的HTML5

     二、DNS 预解析缓存
    众所周知，解析 DNS 是网站性能优化的比较重要的一部分，虽然加载时间不太长，但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站，更不可忽视，每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。
如果采用 DNS 预加载，支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下，而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单：
    代码如下:
    http://www.epwk.com/">
    淘宝网就应用了这项技术，你可以打开淘宝网，查看源代码，最顶端就把他们的一些 CDN 服务器进行了 DNS 解析缓存。
    三、资源预加载
    门户网站开发中资源预加载有很多办法，例如常见的图片预加载，有采用 CSS 的背景图片来预加载，大部分还是用 JS。目前 HTML5 提供了专门的资源预加载方法，有两个属性：prefetch（预读取）和 prerender（预渲染），分别被 Firefox 和 Chrome 浏览器支持。
    1).PREFETCH 预读取
    预读取就是很常见的资源预加载，当前页面加载完成之后，就会在后面偷偷的下载你指定的资源，一般是 JS 、CSS 和图片这类的，也可以下载页面：
     代码如下:
    http://www.epwk.com/" />
    http://www.epwk.com/" />

    2).PRERENDER 预渲染
    这个更厉害了，不仅偷偷的提前下载，而且还给你渲染出来，当用户点击链接的时候，立刻给你展现出来。
    代码如下:http://www.epwk.com/" />
    搜素引擎其实是最需要这种预读取的功能的，因为他们非常确定用户下一步要打开的页面（搜索结果页面），所以当用户输入搜索内容的时候，就可以提前把搜索结果页面的资源提前加载，而且应用之后，效果十分明显。
    目前兼容性是个缺点，貌似只有 Chrome 和 Firefox 支持，而且用的 rel 属性是不同的，如果你想同时兼容两个浏览器，可以写成下面这样：
    代码如下:http://www.epwk.com/" />
    此外，当然为了安全没法跨域预加载资源，可能没法用在 CDN 了。
    以上几点就是html5的开发实用技巧，希望在你的网站开发中能起到作用。当然如果你有网站开发的需求，可以到一品威客网，一品威客网提供综合性网站,门户网站开发,大型门户网站建设等服务。挑选服务商进行专业的商业门户网站,门户网站模板,综合性网站开发,综合型门户网站开发等服务就上一品威客网,中国领先的文化创意交易平台。