金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 通过提前获取DNS来提升网页加载速度,开发者才

通过提前获取DNS来提升网页加载速度,开发者才

发布时间:2019-10-25 15:32编辑:web前端浏览(54)

    Twitter的”fave”动画

    2015/05/12 · HTML5 · Twitter, 动画

    本文由 伯乐在线 - 刘健超-J.c 翻译,胡屹 校稿。未经许可,禁止转载!
    英文出处:cssanimation.rocks。欢迎加入翻译组。

    Web性能优化系列 – 通过提前获取DNS来提升网页加载速度

    2015/04/23 · HTML5 · DNS, 性能优化

    本文由 伯乐在线 - 刘健超-J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
    英文出处:www.deanhume.com。欢迎加入翻译组。

    我时常寻找方法改善网站性能,为的就是能提供更佳的用户体验。也许你经常会发现你的网站运行高效且性能优异。你也可能曾让你的应用程序在Google PageSpeed或Yahoo! YSlow进行测试,并得到高分。然而,有一样东西一直影响页面加载时间。它在一个页面上,花费很多时间去查找不同组件的DNS。例如,下面这幅图片展示了我的博客首页所需资源的加载瀑布图。

    图片 1

    请注意条形图的灰蓝色部分,它出现在瀑布图中的大部分组件前。这灰蓝色代表下载资源前查找DNS所需时间。这竟然占了组件下载时间的很大部分!即使组件进行了优化,并已经最小化/合并/压缩处理,你仍然需要等待查找DNS时间。我利用webpagetest.org做了一个关于该网站DNS查找时间的表格。

    图片 2

    从上图可看到,DNS查找时间都很高, 如果能减少该时间并提速,便会让资源加载变得更加高效。幸运的是,有个很棒的技巧能让网站的加载时间变得更快。它被称为DNS预取,并且很容易实现。你所需做的是,在网页顶部添加以下属性作为链接(link)。

    <link rel="dns-prefetch" href="//host_name_to_prefetch.com">

    DNS预取是在用户尝试点击链接前试图解析域名。一旦域名被解析,且用户导航到该域名,则不会因DNS查找而导致加载时间变长。在这个博客主页里,有很多跳转到不同帖子的链接。如果能在用户导航到下一个页面前,预取一些外部链接的DNS,这将会大大减少下一个页面的DNS查找时间。根据Chromium documentation所说,如果用户能将域名解析成IP地址并且缓存之,则DNS查找时间能低至0-1毫秒(千分之一秒)。这是相当令人印象深刻的!

    我在网站添加DNS预取功能后,确实能显著改善页面加载时间。目前,这项技术被大多数主流浏览器所支持(除了IE),所以,当前没有任何理由不在你的web应用上使用这项技术!DNS预取是一个安全的HTML5特性,它会被那些不支持该技术的老旧浏览器简单忽略掉。如果你的网页内容是来自多个域名,那么这绝对是一个聪明的,能加快页面加载速度的方法。

    打赏支持我翻译更多好文章,谢谢!

    打赏译者

    只有 90 年代的 Web 开发者才记得这些

    2016/04/26 · 基础技术 · 2 评论 · WEB

    本文由 伯乐在线 - dcscodelife 翻译,艾凌风 校稿。未经许可,禁止转载!
    英文出处:holman。欢迎加入翻译组。

    你曾经强行把 <blink> 标签放入 <marquee> 标签吗?如今皮克斯动画工作室获得了所有荣誉,但是在 90 年代这个做法则是电脑动画的伟大创举。通过组合两种标签,你成为了一个先驱者。一个创意无限的人。一个令所有人都崇拜的人。

    在 90 年代,你曾经是一个网页开发者。

    在当时,你知道自己是一个出色的人物。伴随你而来的是极其大量的技术创新,从那时候开始,我们还没来得及做出喜好,技术就已经开始复制开来了。

    让我们先放下 jQuery,抛开非关系型数据库不谈:我们有更重要的事情要讨论。

    Twitter的“fave” 动画

    最近 Twitter 通过引入一段新的动画重新设计了“fave”按钮(也叫“fav”)。这段动画并不依赖 CSS transition,而是由一系列图片组成的。下面展示如何用 CSS 的 animation-timing-function 属性中的 steps 时序函数(timing function)重新制作这段动画。

    打赏支持我翻译更多好文章,谢谢!

    任选一种支付方式

    图片 3 图片 4

    赞 1 收藏 评论

    1×1.gif

    1×1.gif 应该获得伟大的格莱美大奖。或者普利策新闻奖。或者类似三年级体育课上颁发的最佳进步奖。除了链式链表,它是计算机科学史上最重要的成就。它不是我们应得的未来,而是我们需要的未来(直到盒子模型彻底取代了它)。

    如果你还没不熟悉我们的 1×1.gif 小把戏,请看下面:

    图片 5

    你能看到它吗,让我们放大一些:

    图片 6

    The 1×1.gif

    这个 1×1.gif – 或者 spacer.gif,或者 transparent.gif – 仅仅是一个长宽都是一个像素的透明 GIF 图像。

    JavaScript

    <IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

    1
    <IMG SRC="/1x1.gif" WIDTH=150 HEIGHT=250>

    通过上面的代码,你可以把元素放置在页面的任何位置上。

    JavaScript

    <TABLE> <TR> <TD><IMG SRC="1x1.gif" WIDTH=300> <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT> </TR> <TR> <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi"> </TR> </TABLE>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <TABLE>
      <TR>
        <TD><IMG SRC="1x1.gif" WIDTH=300>
        <TD><FONT SIZE=42>Hello welcome to my <MARQUEE>Internet Web Home</MARQUEE></FONT>
      </TR>
      <TR>
        <TD BGCOLOR=RED><IMG SRC="/cgi/webcounter.cgi">
      </TR>
    </TABLE>

    1×1.gif 让你毫不费力地在页面的任何位放置元素。直到今天为止,它仍然是唯一的垂直居中元素的方法。

    JavaScript

              

    1
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    图片对于你而言是不是太高级了?《HTML For Dummies》是不是直到第四章才介绍 <IMG> 标签?现在好了,你是幸运的:&nbsp; 标签来了!

    你可以对自己说,“我知道所有 HTML 实体编码。这个弱不禁风的帅哥来这里干嘛的?”

    听着,我亲爱的聪明的迷人的读者朋友,这是一个如今的年轻人没有给予足够尊重的创新:不断重复 &nbsp;。很像 1×1.gif 的小把戏,你能任意地扩展 &nbsp; 并用在任何你需要的地方:

    JavaScript

    PLEASE SIGN <BR>       MY GUESTBOOK BELOW: <HR><HR>

    1
    2
    3
    PLEASE SIGN  <BR>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MY GUESTBOOK BELOW:
    <HR><HR>

    在 90 年代,如果我每写下一个 &nbsp; 就得到五美分,我就会有足够的钱支付来自美国在线的每月超支账单了。

    运动产生的错觉

    这段动画的效果类似于观看古老的西洋镜,该装置呈现的是一系列连续的围绕着圆筒的插画。在下面的示例中,我们不使用圆筒,而是在某个元素内部呈现一系列图片。

    关于作者:刘健超-J.c

    图片 7

    前端,在路上... 个人主页 · 我的文章 · 19 ·     

    图片 8

    点下划线,边界效应

    在 HTML 快走到他的黄金时代的尾巴时,CSS 登场了,它带来了一个内容和样式分离的世界,从此我们也开始不停地处理灾难。

    首当其冲地当然是用 CSS 来删除链接的下划线效果。一夜之间,整个因特网都陷入了这个方法所带来的泥泞之中,文本看起来像链接,链接看起来像文本。你不知道点哪里,但是黑暗并没有持续多久,因为我们发明了光标效果(你还没有活到你的鼠标有十二个火球尾巴的时候)。

    高级技术的应用是如此引人注目,以至于几乎我们所有人都从一开始就使用 CSS。我甚至在 2000 年的一份 index.shtml(对,就是 SSI)文档中发现了证据:

    JavaScript

    <style type="text/css"> <!-- a:hover {text-decoration: none; color: #000000} --> </style>

    1
    2
    3
    4
    5
    <style type="text/css">
    <!--
    a:hover {text-decoration: none; color: #000000}
    -->
    </style>

    就是它了!当然,这是 CSS 的内嵌样式。这个样式使你的鼠标滑过链接时,删除链接的下划线并且链接的文字变黑。从此,交互式网站诞生了。

    示例

    把鼠标悬停在星星上就可以看到动画效果(请到原文查看动画效果——译者注)。

    在本示例中,我们将从制作一系列能组成动画的图片开始。在这里,我们使用来自 Twitter 的“fave”图标动画的部分图片集:

    图片 9

    为了能让这些帧动起来,我们需要把它们放置在一排上。在这个文件中,这些帧已经排列在一排上了,这意味着我们可以通过设置背景位置(background-position)属性使背景从第一帧过渡到最后一帧。

    图片 10

    DHTML 动态超文本标记语言

    就在我们拥有了删除链接下划线的技术后,我们决定把它和一个强大功能结合起来,这个功能就是在页面加载的时候弹出一个消息框 alert("Welcome to my website!")。组合 CSS 和 JavaScript 的二者力量,我们得到了一个技术怪兽:DHTML。

    DHTML,表示“分布式 HTML”,这是网页开发工具的最高成就。它将经受住时间的考验,它可以使我们实现很多效果,比如雪花从页面顶部飘落下来,或者创建可折叠的菜单,动态的图片地图,又或者除了使用语义标签 <div>,我们还可以自定义 <marquee> 标签。

    DHTML 帮助 Web 开发从业余爱好发展到一个成熟的专业领域。类似 Dynamic Drive 这样的网站使你可以仅仅通过复制粘贴一个 50 行的代码块,就可以解决任何问题,而不需要自己再思考创新的解决方法。实际上, DHTML 就是那个年代的 Twitter Bootstrap 框架。

    本文由金沙国际官网发布于web前端,转载请注明出处:通过提前获取DNS来提升网页加载速度,开发者才

    关键词:

上一篇:踩坑小计,Web开发的各种性能工具

下一篇:没有了