在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一、DNS 预解析缓存 众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。 复制代码 代码如下: <link rel="dns-prefetch" href="http://cdn.staticfile.org/"> <link rel="dns-prefetch" href="//www.google-analytics.com"> 淘宝网就应用了这项技术,你可以打开淘宝网,查看源代码,最顶端就把他们的一些 CDN 服务器进行了 DNS 解析缓存。
资源预加载有很多办法,例如常见的图片预加载,有采用 CSS 的背景图片来预加载,大部分还是用 JS。目前 HTML5 提供了专门的资源预加载方法,有两个属性:prefetch(预读取)和 prerender(预渲染),分别被 Firefox 和 Chrome 浏览器支持。 1).PREFETCH 预读取 复制代码 代码如下: <link rel="prefetch" href="http://blog.wpjam.com/" /> <link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" /> <link rel="prefetch alternate stylesheet" href="mozspecific.css" /> 注意,目前 Firefox 浏览器支持这个功能。 2).PRERENDER 预渲染 复制代码 代码如下: <link rel="prerender" href="http://blog.wpjam.com/" />
注意,目前 Chrome 支持这个功能。 搜素引擎其实是最需要这种预读取的功能的,因为他们非常确定用户下一步要打开的页面(搜索结果页面),所以当用户输入搜索内容的时候,就可以提前把搜索结果页面的资源提前加载,而且应用之后,效果十分明显。 目前兼容性是个缺点,貌似只有 Chrome 和 Firefox 支持,而且用的 rel 属性是不同的,如果你想同时兼容两个浏览器,可以写成下面这样: 复制代码 代码如下: <link rel="prefetch prerender" href="http://blog.wpjam.com" />
此外,当然为了安全没法跨域预加载资源,可能没法用在 CDN 了。 三、Download 属性 HTML5 的 Download 属性用来强制浏览器下载对应文件,而不是打开。Chrome 和 Firefox 等浏览器太过于强大,也许是为了增强用户体验,当用户点击的资源文件可以被它们识别的时候(例如 pdf 会直接在浏览器打开,mp3、mp4 等媒体直接用浏览器内置播放器播放)。但有时候,用户其实是希望直接下载而不是在浏览器上看看,这时就可以加上这个属性,属性值会对下载的文件重命名: 复制代码 代码如下: <a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a> 如果你确定这个资源是用户肯定会下载的,就可以加上这个属性,还可以用 JS 或者手动改变想要保存的文件名。
|
请发表评论