你应该知道的,如何运用最新的技术提升网页速

2019-12-08 01:56栏目:人才招聘
TAG:

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

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

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

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

你应该知道的 setTimeout 秘密

2017/01/11 · JavaScript · 4 评论 · Javascript, settimeout

本文作者: 伯乐在线 - TGCode 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

计时器setTimeout是我们经常会用到的,它用于在指定的毫秒数后调用函数或计算表达式。

语法:

setTimeout(code, millisec, args);

1
setTimeout(code, millisec, args);

注意:如果code为字符串,相当于执行eval()方法来执行code。

当然,这一篇文章并不仅仅告诉你怎么用setTimeout,而且理解其是如何执行的。

1、setTimeout原理

先来看一段代码:

var start = new Date();   var end = 0;   setTimeout(function() {      console.log(new Date() - start);   },  500);   while (new Date() - start <= 1000) {}

1
2
3
4
5
6
7
8
9
10
11
var start = new Date();  
 
var end = 0;  
 
setTimeout(function() {   
 
  console.log(new Date() - start);  
 
},  500);  
 
while (new Date() - start <= 1000) {}

在上面的代码中,定义了一个setTimeout定时器,延时时间是500毫秒。

你是不是觉得打印结果是: 500

可事实却是出乎你的意料,打印结果是这样的(也许你打印出来会不一样,但肯定会大于1000毫秒):

图片 1

这是为毛呢?

究其原因,这是因为 JavaScript是单线程执行的。也就是说,在任何时间点,有且只有一个线程在运行JavaScript程序,无法同一时候运行多段代码。

再来看看浏览器下的JavaScript。

浏览器的内核是多线程的,它们在内核控制下相互配合以保持同步,一个浏览器至少实现三个常驻线程:JavaScript引擎线程GUI渲染线程浏览器事件触发线程

  • JavaScript引擎是基于事件驱动单线程执行的,JavaScript引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。
  • GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(Reflow)时,该线程就会执行。但需要注意,GUI渲染线程与JavaScript引擎是互斥的,当JavaScript引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。
  • 事件触发线程,当一个事件被触发时,该线程会把事件添加到待处理队列的队尾,等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等,但由于JavaScript的单线程关系,所有这些事件都得排队等待JavaScript引擎处理(当线程中没有执行任何同步代码的前提下才会执行异步代码)。

到这里,我们再来回顾一下最初的例子:

var start = new Date();   var end = 0;   setTimeout(function() {      console.log(new Date() - start);   },  500);   while (new Date() - start <= 1000) {}

1
2
3
4
5
6
7
8
9
10
11
var start = new Date();  
 
var end = 0;  
 
setTimeout(function() {   
 
  console.log(new Date() - start);  
 
},  500);  
 
while (new Date() - start <= 1000) {}

虽然setTimeout的延时时间是500毫秒,可是由于while循环的存在,只有当间隔时间大于1000毫秒时,才会跳出while循环,也就是说,在1000毫秒之前,while循环都在占据着JavaScript线程。也就是说,只有等待跳出while后,线程才会空闲下来,才会去执行之前定义的setTimeout

最后 ,我们可以总结出,setTimeout只能保证在指定的时间后将任务(需要执行的函数)插入任务队列中等候,但是不保证这个任务在什么时候执行。一旦执行javascript的线程空闲出来,自行从队列中取出任务然后执行它。

因为javascript线程并没有因为什么耗时操作而阻塞,所以可以很快地取出排队队列中的任务然后执行它,也是这种队列机制,给我们制造一个异步执行的假象。

2、setTimeout的好搭档“0”

也许你见过下面这一段代码:

setTimeout(function(){   // statement }, 0);

1
2
3
4
5
setTimeout(function(){
 
  // statement
 
}, 0);

上面的代码表示立即执行。

本意是立刻执行调用函数,但事实上,上面的代码并不是立即执行的,这是因为setTimeout有一个最小执行时间,当指定的时间小于该时间时,浏览器会用最小允许的时间作为setTimeout的时间间隔,也就是说即使我们把setTimeout的延迟时间设置为0,被调用的程序也没有马上启动。

不同的浏览器实际情况不同,IE8和更早的IE的时间精确度是15.6ms。不过,随着HTML5的出现,在高级版本的浏览器(Chrome、ie9+等),定义的最小时间间隔是不得低于4毫秒,如果低于这个值,就会自动增加,并且在2010年及之后发布的浏览器中采取一致。

所以说,当我们写为 setTimeout(fn,0) 的时候,实际是实现插队操作,要求浏览器“尽可能快”的进行回调,但是实际能多快就完全取决于浏览器了。

setTimeout(fn, 0)有什么用处呢?其实用处就在于我们可以改变任务的执行顺序!因为浏览器会在执行完当前任务队列中的任务,再执行setTimeout队列中积累的的任务。

通过设置任务在延迟到0s后执行,就能改变任务执行的先后顺序,延迟该任务发生,使之异步执行。

来看一个网上很流行的例子:

document.querySelector('#one input').onkeydown = function() {      document.querySelector('#one span').innerHTML = this.value;    };    document.querySelector('#second input').onkeydown = function() {      setTimeout(function() {        document.querySelector('#second span').innerHTML = document.querySelector('#second input').value;   }, 0); };

1
2
3
4
5
6
7
8
9
10
11
12
13
document.querySelector('#one input').onkeydown = function() {   
 
  document.querySelector('#one span').innerHTML = this.value;   
 
};   
 
document.querySelector('#second input').onkeydown = function() {   
 
  setTimeout(function() {   
 
    document.querySelector('#second span').innerHTML = document.querySelector('#second input').value;   }, 0);
 
};

实例:实例

当你往两个表单输入内容时,你会发现未使用setTimeout函数的只会获取到输入前的内容,而使用setTimeout函数的则会获取到输入的内容。

这是为什么呢?

因为当按下按键的时候,JavaScript 引擎需要执行 keydown 的事件处理程序,然后更新文本框的 value 值,这两个任务也需要按顺序来,事件处理程序执行时,更新 value值(是在keypress后)的任务则进入队列等待,所以我们在 keydown 的事件处理程序里是无法得到更新后的value的,而利用 setTimeout(fn, 0),我们把取 value 的操作放入队列,放在更新 value 值以后,这样便可获取出文本框的值。

未使用setTimeout函数,执行顺序是:onkeydown => onkeypress => onkeyup

使用setTimeout函数,执行顺序是:onkeydown => onkeypress => function => onkeyup

虽然我们可以使用keyup来替代keydown,不过有一些问题,那就是长按时,keyup并不会触发。

长按时,keydown、keypress、keyup的调用顺序:

keydown keypress keydown keypress ... keyup

1
2
3
4
5
6
7
8
9
10
11
keydown
 
keypress
 
keydown
 
keypress
 
...
 
keyup

也就是说keyup只会触发一次,所以你无法用keyup来实时获取值。

我们还可以用setImmediate()来替代setTimeout(fn,0)

if (!window.setImmediate) {      window.setImmediate = function(func, args){        return window.setTimeout(func, 0, args);      };      window.clearImmediate = window.clearTimeout;   }

1
2
3
4
5
6
7
8
9
10
11
if (!window.setImmediate) {   
 
  window.setImmediate = function(func, args){   
 
    return window.setTimeout(func, 0, args);   
 
  };   
 
  window.clearImmediate = window.clearTimeout;  
 
}

setImmediate()方法用来把一些需要长时间运行的操作放在一个回调函数里,在浏览器完成后面的其他语句后,就立刻执行这个回调函数,必选的第一个参数func,表示将要执行的回调函数,它并不需要时间参数。

注意:目前只有IE10支持此方法,当然,在Nodejs中也可以调用此方法。

3、setTimeout的一些秘密

3.1 setTimeout中回调函数的this

由于setTimeout()方法是浏览器 window 对象提供的,因此第一个参数函数中的this其实是指向window对象,这跟变量的作用域有关。

看个例子:

var a = 1;    var obj = {      a: 2,      test: function() {        setTimeout(function(){          console.log(this.a);        }, 0);      }    };    obj.test();  //  1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = 1;   
 
var obj = {   
 
  a: 2,   
 
  test: function() {   
 
    setTimeout(function(){   
 
      console.log(this.a);   
 
    }, 0);   
 
  }   
 
};   
 
obj.test();  //  1

不过我们可以通过使用bind()方法来改变setTimeout回调函数里的this

var a = 1;    var obj = {      a: 2,      test: function() {        setTimeout(function(){          console.log(this.a);        }.bind(this), 0);      }    };    obj.test();  //  2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = 1;   
 
var obj = {   
 
  a: 2,   
 
  test: function() {   
 
    setTimeout(function(){   
 
      console.log(this.a);   
 
    }.bind(this), 0);   
 
  }   
 
};   
 
obj.test();  //  2

相关文章:JS中的call、apply、bind方法

3.2 setTimeout不止两个参数

我们都知道,setTimeout的第一个参数是要执行的回调函数,第二个参数是延迟时间(如果省略,会由浏览器自动设置。在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。)

其实,setTimeout可以传入第三个参数、第四个参数….,它们表示神马呢?其实是用来表示第一个参数(回调函数)传入的参数。

setTimeout(function(a, b){      console.log(a);   // 3   console.log(b);   // 4 },0, 3, 4);

1
2
3
4
5
6
7
setTimeout(function(a, b){   
 
  console.log(a);   // 3
 
  console.log(b);   // 4
 
},0, 3, 4);

如果你有疑问或建议,欢迎在下面的评论区评论!

打赏支持我写出更多好文章,谢谢!

打赏作者

2017前端性能优化清单

2017/04/10 · 基础技术 · 性能

原文出处: Xsu Edwan   

你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shakingcode-splitting两个工具?有没有用过Brotli、Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?了解IPv6,HTTP/2和Service Worker这些协议吗?

回想那些年,大家往往在完成了产品之后才会去考虑性能。常常把与性能相关的事情拖到项目的最后来做,所做的也不过是对服务器上的config文件进行一些微调、串联、优化以及部分特别小的调整。而现在,技术已经有了翻天覆地的变化。

一个项目的性能是非常重要的,除了要在技术层面上注意,更要在项目的设计之初就开始考虑,这样才可以使性能的各种隐形需求完美的整合到项目中,随着项目一起推进。性能最好具有可量化、可监测以及可改动的特性。网络越来越复杂,对网络的监控也变得越来越难,因为监测的过程会受到包括设备、浏览器、协议、网络类型以及其他技术(CDN,ISP,缓存,代理服务器,防火墙,负载均衡器和服务器对性能的影响都很大)的很大影响。

下文是一份2017年的前端性能优化清单,阐述了作为前端开发人员,为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。

(你也可以下载checklist PDF或者check in Apple Pages。优化万岁!)

性能设计

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

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

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 2 图片 3

3 赞 14 收藏 4 评论

正文

微优化是保持性能最好的办法,但是又不能有太过明确的优化目标,因为过于明确的目标会影响在项目中做的每一个决定。以下是一些不同的模型,请按照自己舒服的顺序阅读。

内容优先

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

关于作者:TGCode

图片 4

路途虽远,无所畏 个人主页 · 我的文章 · 9 ·    

图片 5

请准备好然后定下目标!

可控性

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

1. 比你最强的竞争对手快20%

根据一个心理学研究,你的网站最少在速度上比别人快20%,才能让用户感觉到你的网站比别人的更快。这个速度说的不是整个页面的加载时间,而是开始加载渲染的时间,首次有效渲染时间(例如页面需要加载主要内容的时间),或者交互时间(指的是页面或者应用中主要的页面加载完成,并主备好与用户进行交互的时间)。

在Moto G(或中端三星设备)和Nexus 4(比较主流的设备)上衡量开始渲染时间(用WebPagetest)以及首页有效渲染时间(用Lighthouse),最好是在一个开放的实验室中,使用规范的3G,4G和Wi-Fi链接。

图片 6
Lighthouse,一个Google开发的新的性能审查工具

你可以通过你的分析报告看看你的用户处在哪个阶段,选取其中前90%的用户体验来做测试。接着收集数据,建一个表格,筛去20%的数据并预设一个目标(如:性能预算)。现在你可以将上述两个值进行对比检测。如果你始终维持着你的目标并且通过一点一点改变脚本去加快交互时间,那么上述方法就是合理可行的。

图片 7
由Brad Frost创建的性能分析

和你的同事分享这份清单。首先要确保团队中的每个人都熟悉这份清单。项目中每一个决定都会影响性能,如果前端工程师们都在积极的参与项目概念,UX以及视觉设计的决定,这将会给整个项目带来巨大收益。地图设计的决定违背了性能理念,所以他在这份清单内的顺序有待考虑。

静态站点生成器

我们用 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...

2. 反应时间为100毫秒,帧数是每秒60帧

RAIL性能模型会为你提供一个优秀的目标,既尽最大的努力在用户初始操作后的100毫秒内提供反馈。为了达到这个目标,页面需要放弃权限,并将权限在50毫秒内交回给主线程。对于像动画一样的高压点,最好的方法就是什么都不做,因为你永远无法达到最小绝对值。
同理,动画的每一帧都需要在16毫秒内完成,这样才能保证每秒60帧(一秒/60=16.6毫秒),如果可以的话最好能在10毫秒内完成。因为浏览器需要一定的时间去在屏幕上渲染新的帧,而且你的代码需要在16.6毫秒内完成执行。要注意,上述目标应用于衡量项目的运行性能,而非加载性能。

图片传输

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

图片 8

3. 首次有效渲染时间要低于1.25秒,速度指数要低于1000

纵使这个目标实现起来非常困难,你的最终目标也应该是让开始渲染时间低于1秒且速度指数低于1000(在网速快的地方)。对于首次有效渲染时间,上限最好是1250毫秒。对于移动端,3G下移动设备首次渲染时间低于3秒都是可以接受的。稍微高一点也没关系,但千万别高太多。

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 的浏览器的后备元素。使用图片的最大实例确保了它在后备方案中的可行性。

定义你所需要的环境

生成

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

4. 选择和安装你的开发环境

不要过多的关注当下最流行的工具,坚持选择适合自己开发环境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者组合起来的工具。只要这个工具运行的速度够快,而且没有给你的维护带来太大问题,这就够了。

生成图片

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

5. 渐进增强(progressive enhancement)

在构建前端结构的时候,应始终将渐进增强作为你的指导原则。首先设计并且构建核心体验,随后再完善那些为高性能浏览器设计的高级特性的相关体验,创建弹性体验。如果你的网页可以在使用低速网络、老旧显示器的很慢的电脑上运行飞快,那么在光纤高配电脑上它只会运行的更快。

最小化图片

6. Angular,React,Ember等

最好使用那些支持服务器端渲染的框架。在使用某个框架钱,先记录服务器和客户端的引导时间,记得要在移动设备上测试,最终才能使用某个框架(因为面对的是性能问题,如果在使用某个框架后,再做修改是非常困难的)。如果你使用JavaScript框架,要保证你的选择是被广泛使用并且经过考验的。不同框架对性能有着不同程度的影响,同时对应着不同的优化策略,所以最好可以清楚的了解你要用的框架的每个方面。在写网页应用时可以先看看PRPL pattern和application shell architecture。

图片 9
本图描述了PRPL pattern

图片 10
上图是application shell,是一个小型的、由HTML,CSS和JavaScript构成的用户界面

在markdown文件中写[图片描述](image.jpg).

在构建过程中使用自定义Markdown渲染器来为已经完全成熟的 <picture> 元素编译传统的markdown图片声明。

7. AMP还是Instant Articles?

根据你整体组织结构的优先顺序和策略,你可以考虑使用Google的AMP或Facebook的Instant Articles。要知道没有这些你也可以达到不错的性能,但是AMP可以提供一个性能不错的免费的内容分发网络框架(CDN),Instant Articles可以在Facebook上促进你的性能。你也可以建立progressive web AMP。

SVG动画

我们为自己的网站选择了特定的图标类型,其中SVG插图占了主要地位。这样做有以下几个原因:

  • 首先,SVG的图片比位图更小;
  • 其二,SVG图片本身就是响应式的,有很棒的伸缩性, 所以不需要图片生成及<picture> 元素;
  • 最后也是很重要的一点,就是我们可以通过CSS来不断改变它,赋予它新的活力!我们所有的组合页面都有一个自定义的动态SVG图, 可以被概述页面所复用。这张图片作为我们所有组合页面的一种循环风格,使得页面设计一体化,同时又几乎不会对性能造成影响。请看这张动画,看看我们是如何用CSS来改变它的。

图片 11

8. 选择适合你的CDN

根据你的动态数据量,可以将一部分内容外包给静态网站生成工具,将它置于CDN上,从中生成一个静态版本,从而避免那些数据库的请求。也可以选择基于CDN的静态主机平台,通过交互组件丰富你的页面(JAMStack)。

注意CDN是否可以很好的处理(或分流)动态内容。没必要单纯的将你的CDN限制为静态。反复检查CDN是否执行了内容的压缩和转化,检查智能HTTP/2传输和缓存服务器(ESI),注意哪些静态或动态的部分处在CDN的边缘(最接近用户的服务器)。

自定义网页字体

在深入之前,这里有一个关于在浏览器设置自定义字体的简短介绍。当浏览器发现CSS里面有@font-face 的定义,但是用户的电脑并不支持该字体时,它会尝试下载该字体文件。在下载时,多数浏览器根本不会用这种字体来展示文本。这种现象称为“不可见文本的闪现” 或者 FOIT。如果你有留意,你会发现网页上都有这种情况存在。如果你问我,我会告诉你这会影响用户体验。它延迟了用户读取他们所需内容的时间。我们可以迫使浏览器改变这种行为,变成 “无样式内容闪现” 或者称为 FOUT。我们告诉浏览器先使用普通字体,像 Arial 或者 Georgia。当自定义的字体下载完成后,再代替标准字体并且重新渲染。这样,即使自定义字体下载失败,仍然不会影响内容的可读性。然而,有人会认为这是一种妥协的做法,但我们认为自定义字体只是一种优化。尽管没有自定义字体,网页看起来也完好,也能百分百的正常运行。勾选/不勾选复选框来切换我们的网页字体,来自己体验一下:

切换下载的字体类 使用自定义网页字体可以改善我们的用户体验,只要你能够优化他们,并且负责任地为之服务。

开始优化

字型子集设定

到目前为止,子集设定是改善网页字体性能最快的方式。我将会向每个使用自定义字体的网页开发者推荐它。如果你能完全控制网页内容,并且知道它将要展示哪些特性的话,你可以完全使用子集设定。但是,即使是仅仅把字体设为西方语言,也会对文件大小造成很大的影响。例如,我们的 Noto Regular WOFF 字体,默认是246KB,将其设为西方语言后,大小下降到31KB。我们使用 Font squirrel webfont, 这种字体真的很易用。

9. 直接确定优化顺序

首先应该弄清楚你想解决的问题是什么。检查一遍你所有的文件(JavaScript,图片,字体,第三方script文件以及页面中重要的模块,例如轮播,复杂信息图标和多媒体内容),并将他们分类。
列一个表格。明确浏览器上应该有的基础核心内容,哪些部分属于为高性能浏览器设计的升级体验,哪些是附加内容(那些不必要或者可以被延时加载的部分,例如字体,不必要的样式,轮播组件,播放器,社交网站入口,很大的图片)。更详细的细节请参考文章”Improving Smashing Magazine’s Performance‘’。

版权声明:本文由ag真人发布于人才招聘,转载请注明出处:你应该知道的,如何运用最新的技术提升网页速