您的位置:奥门新浦京网址 > Wed前段 > 如何运用最新的技术提升网页速度和性能,欢迎

如何运用最新的技术提升网页速度和性能,欢迎

发布时间:2019-12-15 01:51编辑:Wed前段浏览(92)

    如何运用最新的技术提升网页速度和性能

    2016/08/29 · 基础技术 · 性能

    原文出处: Declan   译文出处:众成翻译   

    最近更新了我们的网站,它是经过了设计上的全面验收的。但实际上,作为软件开发者,我们会注重很多技术相关的零碎的东西。我们的目标是控制性能,注重性能,未来可伸展,为网站增添内容是一种乐趣。接着就来告诉你,为什么我们的网站速度比你们的快吧(抱歉,确实是这样的)。

    欢迎来到HTML5.2时代!

    2016/10/10 · HTML5 · 4 评论 · HTML5.2

    原文出处: Annarita Tranfici   译文出处:众成翻译   

    图片 1

    21世纪,2016年6月,HTML 5.1从工作草案变为了候选标准。正如你了解的那样,这是将提案变为标准的第二步,Web的如此发展也将影响我们的日常生活。作为候选标准,W3C认为HTML 5.1已经通过了review并且能够满足工作组的技术需求了。

    几天前,HTML 5.1被提案进入第三阶段:推荐标准(PR)。这意味着这个规范只需要进行微量的修改就可以进入W3C标准的最后一阶段了。

    随着HTML 5.1接近最后阶段,工作组开始关注于未来。于是工作组正式开始研究HTML 5.2工作草案,因此,W3C在社区中发布了HTML 5.2规范来让W3C成员、公众以及其他组织进行review。

    HTML5凭借语义性、兼容性和不需要第三方依赖的API迅速席卷了整个互联网。这是一场革命性的技术变革。HTML 5.1保留了先前版本全部优良的特性又引入了一些语义元素的重大改进。想想HTML 5.1都带来了什么,可想而知HTML 5.2会更为惊艳。

    在本文中,我将做一个关于HTML发展的简短的概述,包括HTML 5,HTML 5.1,和HTML 5.2中引入和废除的特性。

    以下是本文的重点:

    • HTML 5引入的语义元素概述;
    • 关于HTML 5和HTML 5.1中新特性和未定案特性的变化;
    • HTML 5.2的介绍以及对于接下来可能发生的事的猜想;

    JSONProxy – 获取跨域json数据工具

    2015/07/10 · JavaScript · JSON, JSONProxy

    原文出处: 韩子迟   

    JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”。当你苦于无法跨域获取json数据时,不妨一试,说不定能事半功倍。

    比如这位朋友,想通过ajax获取必应的每日一图的url(是否可以通过ajax获取“Bing每日一图”?)很显然,这个ajax是跨域的,直接获取会因为跨域报错;服务端也肯定不会有对你本地localhost的“Access-Control-Allow-Origin”的设置,所以CORS策略也是不行的;因为是个json数据,没有方法名包裹,所以jsonp也是不行。楼主暂时还没接触过其他的跨域方法,如果要我去获取url,只能通过服务端的代码,服务端去获取json数据,然后index页面去ajax请求服务端获取的json数据(此时index页面和服务端同源),代码量增加,而要做的仅仅只是获取一个json数据啊!这时JSONProxy就帮你做好了服务端的工作,是不是很爽!

    性能设计

    在我们的项目中,我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站,这样做是很简单的。简言之,我们认为好的用户体验从快速的内容传输开始,也就意味着 性能 > 美观

    好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时,最小化对性能的影响。

    HTML 5 新的语义元素

    HTML 5.1最伟大的创新之一就是引入了新的语义元素。它们也许(很有可能)会成为你如今日常写码的一部分。就是因为有了标记性的结构和语义,才使我们的站点有了很大改善。

    我将主要提到的元素有:

    • <main> 定义主要内容;
    • <nav> 定义主体模块或者导航链接的集合;
    • <article> 包含独立于页面其他部分的内容;
    • <header> 包含介绍部分或者是导航链接的集合;
    • <footer> 定义了整个页面或其中一部分的页脚(并且通常包含原创作者,版权信息,联系方式和站点地图);
    • <aside>定义了所处内容的侧边栏,<section>定义了文档中特定的部分。

    将两个革命性的元素单独拿出来说,它们帮助我们解决了Flash等技术难题:

    • <audio>用来在文档中嵌入音频内容
    • <video>用来在文档中嵌入视频内容

    在上面提到的所有元素中,最有争议的无非是<main>元素。在W3C规范的描述中它是页面中的主要内容,然而万维网超文本应用技术工作组(WHATWG)却定义<main>元素为其他元素主要内容的容器。由于这个区别,WHATWA没有限制一个文档中<main>元素出现的次数。按WHATWA的定义,如果你在一个页面中定义了多个<article>元素,你就可以给每个<article>标记<main>元素。

    两种规范在其他方面也有一些不同,例如<hgroup>的存在(W3C标准中删除了此元素,但它仍旧存在于WHATWG中–译者注)。这篇文章中不会详细讲解这部分内容,如果你感兴趣可以阅读Aurelio De Rosa的这篇文章,W3C vs. WHATWG HTML5 规范 – 文档中的不同,你可以从中了解到很多。

    现在我们来看一下HTML 5和HTML 5.1中的不同。

    Easy: JSONP

    原生的JavaScript:

    XHTML

    <script> function myCallback(data){ console.log(data); } </script> <script src=";

    1
    2
    3
    4
    5
    6
    <script>
      function myCallback(data){
        console.log(data);
      }
    </script>
    <script src="https://jsonp.afeld.me/?callback=myCallback&url=http://jsonview.com/example.json"></script>

    myCallback函数里的data就是返回的json数据了。很显然,服务器会帮你去请求你需要的json数据,然后包裹在你设置的回调函数名中,这时要注意的代码中的红色两处要保持一致,url后跟的就是需要的json数据地址。

    当然JQuery封装好的方法更加简单:

    XHTML

    <script> $.getJSON('', function(data){ console.log(data); }); </script>

    1
    2
    3
    4
    5
    <script>
      $.getJSON('https://jsonp.afeld.me/?callback=?&url=http://jsonview.com/example.json', function(data){
        console.log(data);
      });
    </script>

    内容优先

    我们想要把核心内容尽快地呈现给用户,意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的:传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。

    HTML 5 和 HTML 5.1的不同之处

    这部分将主要介绍HTML 5.1中一些尚未确定的元素、方法和属性。我将就其概念和优点进行介绍,并且提供了一些其他资料,如果感兴趣可以进行扩展阅读。需要注意的是,这里提到的大部分新元素都在HTML5中被提出却因为某些原因没有通过提案,所以对你来说也许并不陌生。例如 <details><summary>就是从HTML 5转移至HTML 5.1规范中的。

    就像其他规范一样,HTML 5.1也引入了一些被移除不久的特性。其中之一就是inert属性,它在2014年被提出。正如Github上这个discussion中所提到的,这个属性自从被归入<dialog>元素后就被遗弃了。

    开始使用新的元素吧~

    Easier: Cross-domain AJAX (CORS)

    比jsonp更简单的方法是CORS(好吧,也没简单到哪去啊…)

    XHTML

    <script> $.get('', function(data){ console.log(data); }); </script>

    1
    2
    3
    4
    5
    <script>
      $.get('https://jsonp.afeld.me/?url=http://jsonview.com/example.json', function(data){
        console.log(data);
      });
    </script>

    这回是真正地发送了ajax请求了,为什么跨域了还能请求?因为服务端设置好了。

    图片 2

    而请求的json数据也是服务端帮你获取的。也就是说,客户端发送请求,服务端解析请求的url,然后服务器作为代理发送http请求去请求json数据(这时不存在客户端跨域),再返回给客户端作为回调的参数。

    可控性

    给理想网站定义了标准后,我们总结出:要想达到预期效果,就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器,包括资源传输,并且由我们自己操控。

    HTML 5.1引入的新元素

    第一个准备讲的就是<picture>元素。它的用处就是把source元素和srcset属性结合到一起,更方便的是当网页展示在小屏幕(例如移动设备)上时,它可以提供内存和尺寸较小的图片。

    <picture>元素的另一个功能就是当页面加载在高分辨率屏幕上的时候就提供高密度的图片。由于这个元素的存在,你可以更好的给用户展示图片并且很好的避免过大的高密度图片与网站不相称。如果你想更多的了解,可以阅读我的另外两篇文章:使用Picture元素提升响应式图片 和 响应式图片第一步:使用srcset。当然也有一些人主张picture元素的不必要的 (大多数时候)。不管怎样,这都取决于你的选择。

    接下来介绍<dialog>元素,当下有Chrome和Opera已经对其进行支持,微软Edge则仍在考虑中。这个元素可以用来作为对话框,确认框或者窗体。可以通过把<form>元素的method属性设置为dialog来把其合并到<dialog>元素中。这样这个form表单提交的时候,这个对话框就会关闭同时把提交按钮返回的值设置为returnValue。这里有一个在线的demo,代码来自MDN, 由JSFiddle展示。

    同时<details><summary>也是值得推荐的新增元素。<details>展示给用户 在这个组件上可以获取额外的信息或者控件。<summary>元素作为总结,标题,或是图例放在<details>的内容中,二者互相配合。目前有Chrome,Firefox(版本49+),Opera,Safari支持了<details>元素。我认为这两个元素未来会在折叠/展开组件上起很大作用。

    Easiest: jQuery Plugin

    最简单的,我怎么感觉越来越复杂了…

    略…

    总结,因为要用第三方的服务器,所以既耗时又有不确定因素(比如服务器挂了),不合适用在真正项目中,自己玩玩尚可。

    1 赞 收藏 评论

    图片 3

    静态站点生成器

    我们用 Node.js 实现了静态站点生成器。它是采用带有简短 JSON 页面描述标签的Markdown 文件来生成整个网站结构和它所有的资源。为了包括特殊的页面脚本,也可以附带一个 HTML 文件。以下是一个简单化的描述标签和 markdown 文件,用于博客的发布,用它来生成真正的 HTML

    JSON 描述标签:

    JavaScript

    { "keywords": ["performance", "critical rendering path", "static site", "..."], "publishDate": "2016-07-13", "authors": ["Declan"] }

    1
    2
    3
    4
    5
    {
      "keywords": ["performance", "critical rendering path", "static site", "..."],
      "publishDate": "2016-07-13",
      "authors": ["Declan"]
    }

    markdown 文件:

    # Why our website is faster than yours We've recently updated our site. Yes, it has a complete... ## Design for performance In our projects we have daily discussions...

    1
    2
    3
    4
    5
    # Why our website is faster than yours
    We've recently updated our site. Yes, it has a complete...
     
    ## Design for performance
    In our projects we have daily discussions...

    HTML 5.1其他新增

    除了这些元素,HTML 5.1还添加了如下新增:

    • <input>元素的type属性新增了monthweek两个值。正如它们名字所表示的那样,它们定义控件将元素的值设置为代表一个月或者一周的字符串。
    • forceSpellcheck()方法加入到HTMLElement接口中,并且允许开发者通过在元素上调用此函数强制用户执行拼写和语法检查,即使用户没有聚焦这个单词。其中一个用途就是inputElement.forceSpellcheck()。不幸的是还没有浏览器支持这个特性。
    • allowfullscreeniframe元素的一个布尔类型属性,它指定了当调用requestFullScreen()方法时,iframe是否接受全屏。当该属性未被指定时,默认元素不接受全屏模式。
    • reportValidity()方法被调用时,强制用户进行<form>元素的约束校验。比如当一个必填元素没有被填写或者一个字段涉及到它的pattern属性时。如果约束的校验返回正确的结果时,这个函数会返回true,反之则返回false。目前有Chrome和Opera支持了这个方法。

    图片传输

    平均一个 2406kb 的网页中 1535kb 是图片。就因为图片在网站中占据了这么大的一个比例,所以它也是性能优化的重点之一。

    图片 4

    未定案的特性

    HTML 5.1规范中也描述了一些当前被认为“at risk”的特性。

    我要提的第一个未定案的特性就是<menu>元素。它代表了菜单指令的集合,它原本是被设计用来创建工具栏和弹出菜单的。当下Chrome和Opeara只有在实验性网络平台(Experimental Web Platform features)打开后才能支持,并且只支持context menu,不支持button menu。Firefox的近期版本也是同样,目前的其他浏览器没有可以支持的。

    接下来要介绍的特性是<menuitem>元素,定义了用户可以从弹出菜单中调用的命令。在变种包含了context menu,同时menu可能关联了一个menu button。当下Chrome和Opeara只有在实验性网络平台(Experimental Web Platform features)打开后才能支持,并且只支持type=”command”。在Firefox中也只有当关闭tag后才能支持带有contextmenu属性的<menu>。IE和Edge都没有支持该元素。

    另一个未定案的特性则是<keygen>。这个元素会在控件的表单提交的时候生成一对密钥,私有密钥会存储在本地的keystore中,公有密钥则会被打包发送到服务器。 In addition to these elements, the following features are also considered at risk: 除了上面提到的这些元素,下面这些特性也同样没有确定:

    • <input>元素的typedatatimedatatime-local两个值。前者用来定义一个特定地区的日期和时间,候着则是代表本地日期和时间,没有时区偏移量信息。
    • context属性为<div>指定了一个context menu,并且当用户右键点击div时会显示菜单。所有的浏览器中,只有Firefox支持了这个属性。
    • inputmode属性。它指定了当用户在表格控件中输入内容时,输入机制会提供更多的帮助。

    好了,现在你已经知道了HTML 5.1做了哪些改变,可以进一步了解工作组现在在研究的规范内容了。

    WebP格式

    WebP是一种现代图片格式,为网页图片提供了出色的低损耗、有损压缩。WebP格式的图片实质上比其它格式的小,有时可以比同样的 JPEG 图片小 25%。 WebP被大多数人所忽略,也没被经常使用。截止到写这篇文章的时候,WebP 仅支持Chrome, Opera 和 Android (仍超过了我们50%的用户),但我们可以优雅降级为 JPG/PNG。

    使用 <picture> 元素我们可以把图片从 WebP 优雅地降级到其它被广泛支持的图片格式,如JPEG:

    XHTML

    <picture> <source type="image/webp" srcset="image-l.webp" media="(min-width: 640px)"> <source type="image/webp" srcset="image-m.webp" media="(min-width: 320px)"> <source type="image/webp" srcset="image-s.webp"> <source srcset="image-l.jpg" media="(min-width: 640px)"> <source srcset="image-m.jpg" media="(min-width: 320px)"> <source srcset="image-s.jpg"> <img alt="Description of the image" src="image-l.jpg"> </picture>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <picture>
      <source type="image/webp" srcset="image-l.webp" media="(min-width: 640px)">
      <source type="image/webp" srcset="image-m.webp" media="(min-width: 320px)">
      <source type="image/webp" srcset="image-s.webp">
      <source srcset="image-l.jpg" media="(min-width: 640px)">
      <source srcset="image-m.jpg" media="(min-width: 320px)">
      <source srcset="image-s.jpg">
      <img alt="Description of the image" src="image-l.jpg">
    </picture>

    我们使用Scott Jehl 的 picturefill 来使那些不支持 <picture> 元素的浏览器获得支持,在各个浏览器中达到一致的效果

    我们使用 <img> 作为那些不支持 <picture> 或者 JS 的浏览器的后备元素。使用图片的最大实例确保了它在后备方案中的可行性。

    HTML 5.2会带来什么

    HTML 5.2规范的制定工作才刚刚开始,所以此时此刻还没办法猜测出很多东西。

    最重要的特性之一就是<script type="module">和对于模块如何分解、获取和评估,这也是制定HTML 5.2将要讨论的一部分。这个特性加入了对于加载JavaScript模块的支持,以及分解、获取、解析、评估模块所必须的依赖。关于这个话题想了解更多的话,可以阅读WHATWG的为Web平台添加JavaScript模块这篇文章。

    另一个开发中的特性就是关于 <meta name="theme-color"> 的定义。它的值可以是包括HEX和RGB在内的任何你在CSS中使用的颜色。一旦页面中如此使用了,只要浏览器和操作系统定制了用户界面,这个新的meta标签就会建议它们使用这个颜色。你可以看到Android端的Chrome浏览器已经像下图这样做出这样的行为。

    图片 5

    对于autocapitalize属性的标准化也在讨论中。当前Safari在IOS上对它的支持由于版本的不同有两种不同的实现。老版本(IOS 5之前)是作为布尔型属性,而新版本则支持不同的值。已经有提案 发布建议以一种独特的方式让所有浏览器支持这个属性。

    最后我想提一下这个关于大纲算法概念的discussion。大纲算法是一种基于节段元素的结构而不是标题的level来提供Web页面大纲的机制。理论上,你可以在一个页面中所有的标题都使用h1,只要把标题放置于正确的节段元素中,就可以创建出结构化文档。然而实际上还没有任何代理实现它,因此在网站中依赖这个算法还是有风险的。

    除了开发新的特性之外,工作组同样致力于使浏览器实现已存在的特性。其中之一就是<input>元素与一个<datalist>元素关联时的行为。

    如果你想了解关于工作组工作重点的其他细节,可以关注这个GitHub issue。

    生成

    尽管图片传输方式已经确定了,我们仍需要思考该怎样有效地执行。我喜欢 <picture>元素的功能,但不喜欢写上面那些代码段,尤其是写内容时必须把它加进去。我们不想做这么费力的事情:每张图片都要写 6 个实例,所以优化这些图片并且把它们写在markdown文件的 <picture> 里面。所以:

    总结

    我希望我把HTML近些年的重大改变完整的呈现给你了。以上内容也说明了开发者想要紧随Web的发展是多么的不容易。

    1 赞 3 收藏 4 评论

    图片 6

    生成图片

    在构建过程中,原图片的多个实例,包括JPG, PNG和WebP格式,我们使用 gulp responsive 来生成。

    最小化图片

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:如何运用最新的技术提升网页速度和性能,欢迎

    关键词: