彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > Web性能优化系列 – 通过提前获取DNS来提升网

Web性能优化系列 – 通过提前获取DNS来提升网

发布时间:2019-10-05 10:34编辑:学会党委浏览(183)

    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特征,它会被那些不辅助该技术的老旧浏览器简单忽略掉。若是你的网页内容是发源四个域名,那么那纯属是贰个聪明的,能加速页面加载速度的主意。

    打赏补助自身翻译越来越多好小说,多谢!

    打赏译者

    连年从ID选取器初阶持续
    在class前使用tag
    将jquery对象缓存起来
    调节强大的链式操作
    使用子查询
    对直接的DOM操作进行限定
    冒泡
    清除无效查询
    推迟到 $(window).load
    压缩js
    全盘调整jquery库

    打赏协理本人翻译更加多好小说,谢谢!

    任选一种支付办法

    图片 3 图片 4

    赞 1 收藏 评论

    1. 一连从ID选择器初始三番两次

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

    图片 5

    前端,在路上... 个人主页 · 笔者的小说 · 19 ·     

    图片 6

    在jquery中最快的选取器是ID选拔器. 因为它一贯来源于于Javascript的getElementById()方法.

    复制代码 代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    像那样选用按键是低效的:

    var traffic_button = $('#content .button');
    用ID直接选用开关功用越来越高:

    var traffic_button = $('#traffic_button');

    选料四个成分

    事关多成分选取实在是在说DOM遍历和巡回, 那么些都是极慢的东西.为了巩固性能, 最棒从就近的ID开首承继.

    var traffic_lights = $('#traffic_light input');

    2. 在class前使用tag

    第二快的选取器是tag选择器($('head')). 同理,因为它出自原生的getElementsByTagName() 方法.

    复制代码 代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    接连用多少个tag name来界定(修饰)class (並且耿耿于怀就近的ID):

    var active_light = $('#traffic_light input.on');

    只顾: 在jquery中Class是最慢的选料器. IE浏览器下它会遍历全部DOM节点不管它用在这里.

    毫不用用tag name来修饰ID. 上面包车型地铁事例将会遍历全部的div成分来寻找id为'content'的哪贰个节点:

    var content = $('div#content'); 用ID修饰ID也是大失所望:

    var traffic_light = $('#content #traffic_light');

    3.将jquery对象缓存起来

    要养成将jquery对象缓存进变量的习于旧贯.

    世世代代不要这么做:

    复制代码 代码如下:

    $('#traffic_light input.on).bind('click', function(){…});
    $('#traffic_light input.on).css('border', '3px dashed yellow');
    $('#traffic_light input.on).css('background-color', 'orange');
    $('#traffic_light input.on).fadeIn('slow');

    最棒先将对象缓存进三个变量然后再操作:

    复制代码 代码如下:

    var $active_light = $('#traffic_light input.on');
    $active_light.bind('click', function(){…});
    $active_light.css('border', '3px dashed yellow');
    $active_light.css('background-color', 'orange');
    $active_light.fadeIn('slow');

    为了铭记大家当地变量是jquery的卷入, 平日用八个$作为变量前缀. 记住,恒久不要让一样的采取器在您的代码里冒出多次.

    缓存jquery结果,备用
    比如您计划将jquery结果对象用在程序的别的一些,也许您的function会频仍推行, 那么就将她们缓存到叁个全局变量中.

    概念二个大局容器来寄放jquery结果, 大家就能够在别的函数援用它们:

    复制代码 代码如下:

    // 在大局范围定义一个目的 (比如: window对象)
    window.$my =
    {
    // 初阶化全数十分大概率会不仅仅三遍要利用的询问
    head : $('head'),
    traffic_light : $('#traffic_light'),
    traffic_button : $('#traffic_button')
    };
    function do_something()
    {
    // 今后你能够援用存款和储蓄的结果并操作它们
    var script = document.createElement('script');
    $my.head.append(script);
    // 当您在函数内部操作是, 能够延续将查询存入全局对象中去.
    $my.cool_results = $('#some_ul li');
    $my.other_results = $('#some_table td');
    // 将全局函数作为三个常备的jquery对象去使用.
    $my.other_results.css('border-color', 'red');
    $my.traffic_light.css('border-color', 'green');
    }

    4. 精晓庞大的链式操作

    地方的例证也足以写成那样:

    复制代码 代码如下:

    var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){…})
    .css('border', '3px dashed yellow')
    .css('background-color', 'orange')
    .fadeIn('slow');

    这般能够写更加少的代码, 让大家的js更轻量.

    5.使用子查询

    jQuery 允许大家对叁个已打包的对象使用附加的选择器操作. 因为我们早已在保留了三个父级对象在变量里, 那样大大提升对其子成分的操作:

    复制代码 代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    例如, 我们能够用子查询的措施来抓取到亮或不亮的灯, 并缓存起来以备后续操作.

    本文由彩世界平台发布于学会党委,转载请注明出处:Web性能优化系列 &#8211; 通过提前获取DNS来提升网

    关键词:

上一篇:Web性能优化:What? Why? How?

下一篇:没有了