菜单

移步端品质优化(2)

2019年3月13日 - 皇家前端

AMP,来自 谷歌 的位移页面优化方案

2015/10/12 · HTML5 ·
AMP

最初的文章出处:
imququ(@屈光宇)   

Web 质量优化(Web Performance
Optimization,WPO)是八个老调重弹的话题,作者也写过许多关于「属性优化」的篇章。最近谷歌(Google) 有个别团体推出了一项名为 Accelerated Mobile
Pages(AMP)的技能,号称能大大加速移动端页面展现速度,进步总体体验。本文就带我们认识一下那项新技巧。

暧昧觉厉,接下去让大家一并来揭秘AMP神秘的面纱吧。

① 、网络加载类

1.首屏数据请求提前,制止JavaScript文件加载后才请求数据

为了更加提高页面加载速度,能够考虑将页面包车型大巴数量请求尽大概提前,防止在JavaScript加载成功后才去央浼数据。常常数据请求是页面内容渲染中首要性路径最长的片段,而且无法相互,所以假设能将数据请求提前,能够非常大程度上裁减页面内容的渲染达成时间。

2.首屏加载和按需加载,非首屏内容滚屏加载,保险首屏内容最小化

出于移动端网络速度相对较慢,网络资源有限,因而为了尽快完毕页面内容的加载,必要确定保障首屏加载能源最小化,非首屏内容使用滚动的点子异步加载。一般推荐活动端页面首屏数据展示延时最长不当先3秒。方今中国移动3G的网络速度为338KB/s(2.71Mb/s),所以推举首屏全数能源大小不超越1014KB,即大概不当先1MB。

3.模块化能源相互下载

在运动端能源加载中,尽量确认保障JavaScript财富互相加载,首要指的是模块化JavaScript能源的异步加载,例如英特尔的异步模块,使用并行的加载情势能够裁减七个公文财富的加载时间。

4.inline首屏必备的CSS和JavaScript

平常为了在HTML加载成功时能使浏览器中有宗旨的样式,须求将页面渲染时必备的CSS和JavaScript通过内联到页面中,幸免页面HTML载入实现到页面内容体现那段过程中页面现身空白。

JavaScript

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>样例</title> <meta
name=”viewport” content=”width=device-width,minimum-scale=1.0,
maximum-scale=1.0,user-scalable=no”> <style> /* 必备的首屏CSS
*/ html, body{ margin: 0; padding: 0; background-color: #ccc; }
</style> </head> <body> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样例</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <style>
    /* 必备的首屏CSS */
    html, body{
        margin: 0;
        padding: 0;
        background-color: #ccc;
    }
    </style>
</head>
<body>
</body>

5.meta dns prefetch设置DNS预解析

安装文件财富的DNS预解析,让浏览器提前解析获取静态能源的主机IP,幸免等到请求时才发起DNS解析请求。常常在运动端HTML中得以应用如下方式成就。

<!– cdn域名预解析 –> <meta
http-equiv=”x-dns-prefetch-control” content=”on”> <link
rel=”dns-prefetch” href=”//cdn.domain.com”>

1
2
3
<!– cdn域名预解析 –>
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.domain.com">

6.财富预加载

对于活动端首屏加载后大概会被选拔的资源,供给在首屏完毕加载后尽快开始展览加载,保障在用户需求浏览时曾经加载成功,那时候如若再去异步请求就彰显非常的慢。

7.理所当然采纳MTU策略

普通状态下,大家以为TCP互连网传输的最大传输单元(马克西姆um Transmission
Unit,MTU)为1500B,即互连网一个奥迪Q3TT(Round-Trip
Time,网络请求往返时间)时间内能够传输的数据量最大为1500字节。因而,在前后端分离的付出形式中,尽量保险页面包车型地铁HTML内容在1KB以内,那样全部HTML的内容请求就可以在五个宝马X3TT时间内乞求完结,最大限度地增加HTML载入速度。

缓存类

AMP 介绍

Accelerated Mobile
Pages(官网、GitHub),直译成人中学文是「加速的移位页面」的意思。依据官方证实,AMP
在 Speed
Index(首屏呈现时间平均值)测试中,品质有
15% ~ 85% 的提高,测试是在模拟 3G 互联网环境并模拟 Nexus 5
的口径下做到(详情)。

AMP
怎样让页面性能小幅升级一时半刻搁置一边,先来探望它是怎么。遵照官网文档得知,AMP
首要由 AMP HTML、AMP Runtime 以及 AMP Components 三有个别构成。

肆 、计算与思想

AMP亮点:

  1. AMP有利于网站SEO,在网站内容大多的境况下,使用AMP的网站在 谷歌(Google)搜索中能够收获更靠前的排行。

  2. 推迟加载、按需加载使得首屏展现更快。

  3. 更进一步对内容型页面品质优化明显。

AMP限制:

网络范围,如AMP JS、AMP Components 必须从 cdn.ampproject.org 加载;Web
Font 必须从 fonts.googleapis.com
加载,那些源网站在国内访问速度非常慢甚至直接被墙。

引入第贰方财富受限。

亟需遵照严峻的代码规范指点。

AMP设计的初衷正是对准静态内容,用来加快音讯类网站,所以对别的交互较多的网站大概并不适用。不过,AMP
控制财富加载、处理响应式元素制止页面抖动、主动释放能源等方针能够当做我们对活动
Web 优化的参阅。

参考资料:
1.
2.
3.
4.

⑥ 、架构协议类

1.品尝接纳SPDY和HTTP 2

在口径允许的情景下得以考虑选拔SPDY协议来拓展文件能源传输,利用延续复用加速传输进程,减弱能源加载时间。HTTP
2在以后也是足以考虑尝试的。

2.选拔后端数据渲染

选取后端数据渲染的法门能够加速页面内容的渲染展示,幸免空白页面包车型地铁出现,同时能够消除移动端页面SEO的标题。假设条件允许,后端数据渲染是三个很正确的推行思路。后边的章节会详细介绍后端数据渲染的相关内容。

3.利用Native View代替DOM的性质劣势

能够尝尝采纳Native View的MNV付出情势来幸免HTML
DOM质量慢的题材,如今应用MNV
的开支形式已经能够将页面内容渲染体验做到类似客户端Native应用的经验了。

关于页面优化的常用技术手段和笔触主要归纳上述那个,固然列举出无数,但仍或然有些漏掉,可知前端质量优化不是一件简不难单的作业,其涉及的情节很多。大家能够根据实际景况将这个主意应用到自身的品种个中,要想任何形成大致是相当小概的,但实现用户可接受的尺度依然很简单落成的。

于此同时大家要清楚的是,在我们成功了最为优化的同时也付出了十分的大的代价,那也是前者优化的3个题材。理论上这个优化都以能够达成的,可是作为工程师我们也要了然理解权衡。优化进步了用户体验,使数码加载更快,可是项目代码却大概打乱,异步内容要拆分出来,首屏的二个Pepsi-Cola图可能要分成几个,页面项目代码维护资金财产成倍扩大,项目协会也大概变得杂乱无章。所以最初在规划塑造、组件的化解方案时要化解好异步的自动处理难点。任何一片段优化都足以做得很深入,但不肯定都值得,在优化的还要也要尽量考虑性价比,那才是我们作为一名前端工程师处理前端优化时应有具有的科学思想。

1 赞 收藏
评论

图片 1

理所当然选用浏览器缓存

除此之外上边说到的使用Cache-Control、Expires、Etag和Last-Modified来设置HTTP缓存外,在活动端还足以应用localStorage等来保存AJAX重返的数量,或许利用localStorage保存CSS或JavaScript静态能源内容,完毕活动端的离线应用,尽大概减少网络请求,保障静态能源内容的全速加载。

AMP Components

AMP Components 是使用浏览器自定义成分(Custom
Elements)达成的组件,用来替换 HTML
中默许的 <img> 和 <video> 等标签,用来促成对财富的自定义加载策略;它也用于落到实处部分繁杂的互相效能,如图片轮播。AMP
Components 分为两类:

1)内置组件,包蕴:amp-img、amp-audio、amp-anim、amp-ad、amp-pixel、amp-video,在
AMP HTML 引入了 AMP Runtime 之后,那一个内置组件就足以直接行使。

2)扩大组件,包含:amp-carousel、amp-lightbox、amp-iframe、amp-instagram、amp-twitter、amp-youtube。要运用扩充组件,必要在
AMP HTML 中引入该器件对应的文本。例如要采纳 amp-carousel
就必须引入以下文件(必供给有 async 和 custom-element 属性):

JavaScript

<script async custom-element=”amp-carousel”
src=”;

1
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

此处有2个鲁人持竿 AMP HTML
规范编写的页面,大家能够直接用浏览器打开查看:AMP
示例(注:为了确认保证国内打开速度,笔者把
AMP JS 托管在了本地,实际上那样做并不符合规范)。

7.减小样式重总结

修改成分样式时,会触发样式重新总括,那是相当高的性质消耗,因为浏览器要求再行布局整个页面。AMP页面在开始展览DOM写操作此前会先读取DOM,那样能确定保障样式重总结时贰遍最纯正到每一帧的体制。

五、渲染类

1.行使Viewport固定显示屏渲染,可以加快页面渲染内容

一般认为,在活动端设置Viewport可以加快页面包车型客车渲染,同时能够防止缩放导致页面重排重绘。在运动端固定Viewport设置的章程如下。

<!– 设置viewport不缩放 –> <meta name=”viewport”
content=”width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no”/>

1
2
<!– 设置viewport不缩放 –>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

2.制止各个花样重排重绘

页面包车型客车重排重绘很耗品质,所以毫无疑问要尽也许减弱页面包车型客车重排重绘,例如页面图片大小变化、成分地方变动等这几个景况都会导致重排重绘。

3.使用CSS3动画,开启GPU加速

使用CSS3动画时能够设置transform:
translateZ(0)来开启移动设备浏览器的GPU图形处理加快,让动画进度越是流畅。

-webkit-transform: translateZ(0); -ms-transform: translateZ(0);
-o-transform: translateZ(0); transform: translateZ(0);

1
2
3
4
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

4.靠边利用Canvas和requestAnimationFrame

选取Canvas或requestAnimationFrame等更高速的动画实现格局,尽量防止使用set提姆eout、setInterval等办法来平昔处理一连动画。

5.SVG代替图片

部分情况下能够设想选择SVG代替图片完成动画,因为运用SVG格式内容更小,而且SVG
DOM结构有利于调整。

6.不滥用float

在DOM渲染树生成后的布局渲染阶段,使用float的因素布局计算比较耗品质,所以尽量收缩float的接纳,推荐应用一定布局或flex-box弹性布局的法门来落到实处页面成分布局。

7.不滥用web字体或过多font-size评释

过多的font-size表明会大增字体的轻重总括,而且也没有须要的。

品尝运用AMP HTML

AMP HTML能够当作优化前端页面质量的多个解决方案,使用AMP
Component中的成分来取代本来的页面成分举行直接渲染。

!– 不推荐 —
<video width=”400″ height=”300″
src=””
poster=”path/poster.jpg”>
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
<source type=”video/mp4″ src=”foo.mp4″>
<source type=”video/webm” src=”foo.webm”>
</video>
!– 推荐 —
<amp-video width=”400″ height=”300″
src=”http://www.domain.com/videos/myvideo.mp4″
poster= “path/poster.jpg”>
<div fallback>
<p>Your browser doesn’t support HTML5 video</p>
</div>
<source type=”video/mp4″ src=”foo.mp4″>
<source type=”video/webm” src=”foo.webm”>
</amp-video>

AMP 剖析

据AMP官网总结近日已有好多音信类网站和科技(science and technology)类网站初叶应用AMP,包涵Wordpress、YouTube、Facebook、LinkedIn、BBC等。

四、脚本类

1.尽量利用id选用器

选取页面DOM成分时尽量选用id选拔器,因为id采用器速度最快。

2.靠边缓存DOM对象

对于供给重复使用的DOM对象,要先行设置缓存变量,防止每便使用时都要从全方位DOM树中再一次寻找。

// 不推荐 $(‘#mod .active’).remove(‘active’); $(‘#mod
.not-active’).addClass(‘active’); // 推荐 let $mod = $(‘#mod’);
$mod.find(‘.active’).remove(‘active’);
$mod.find(‘.not-active’).addClass(‘active’);

1
2
3
4
5
6
7
8
// 不推荐
$(‘#mod .active’).remove(‘active’);
$(‘#mod .not-active’).addClass(‘active’);
 
// 推荐
let $mod = $(‘#mod’);
$mod.find(‘.active’).remove(‘active’);
$mod.find(‘.not-active’).addClass(‘active’);

3.页面元素尽量采取事件代理,制止直接事件绑定

利用事件代理能够幸免对每一个元素都开始展览绑定,并且能够幸免出现内部存款和储蓄器走漏及索要动态添日币素的事件绑定难点,所以尽量不要直接行使事件绑定。

// 不推荐 $(‘.btn’).on(‘click’, function(e){ console.log(this); }); //
推荐 $(‘body’).on(‘click’, ‘.btn’, function(e){ console.log(this); });

1
2
3
4
5
6
7
8
9
// 不推荐
$(‘.btn’).on(‘click’, function(e){
    console.log(this);
});
 
// 推荐
$(‘body’).on(‘click’, ‘.btn’, function(e){
    console.log(this);
});

4.使用touchstart代替click

由于移动端荧屏的统一筹划,touchstart事件和click事件触发时间之内部存款和储蓄器在300皮秒的延时,所以在页面中一贯不兑现touchmove滚动处理的图景下,能够选拔touchstart事件来顶替成分的click事件,加速页面点击的响应速度,提升用户体验。但与此同时大家也要注意页面重叠成分touch动作的点击穿透难点。

// 不推荐 $(‘body’).on(‘click’, ‘.btn’, function(e){ console.log(this);
}); // 推荐 $(‘body’).on(‘touchstart’, ‘.btn’, function(e){
console.log(this); });

1
2
3
4
5
6
7
8
9
// 不推荐
$(‘body’).on(‘click’, ‘.btn’, function(e){
    console.log(this);
});
 
// 推荐
$(‘body’).on(‘touchstart’, ‘.btn’, function(e){
    console.log(this);
});

5.制止touchmove、scroll连续事件处理

亟需对touchmove、scroll那类也许一而再触发回调的风云设置事件节流,例如设置每隔16ms(60帧的帧间隔为16.7ms,因而得以合理地安装为16ms)才开始展览三遍事件处理,制止频仍的风云调用导致移动端页面卡顿。

// 不推荐 $(‘.scroller’).on(‘touchmove’, ‘.btn’, function(e){
console.log(this); }); // 推荐 $(‘.scroller’).on(‘touchmove’, ‘.btn’,
function(e){ let self = this; setTimeout(function(){ console.log(self);
}, 16); });

1
2
3
4
5
6
7
8
9
10
11
12
// 不推荐
$(‘.scroller’).on(‘touchmove’, ‘.btn’, function(e){
    console.log(this);
});
 
// 推荐
$(‘.scroller’).on(‘touchmove’, ‘.btn’, function(e){
    let self = this;
    setTimeout(function(){
        console.log(self);
    }, 16);
});

6.制止使用eval、with,使用join代替连接符+,推荐使用ECMAScript
6的字符串模板

那么些都是有的基础的广元脚本编辑撰写难题,尽大概接纳较高作用的性状来成功这么些操作,防止不正规或不安全的写法。

7.尽量运用ECMAScript 6+的风味来编制程序

ECMAScript
6+一定水准上尤其安全急迅,而且部分天性执行进程更快,也是前景正式的须求,所以推举使用ECMAScript
6+的新特色来形成前边的开销。

静态财富离线方案

对于移动端或Hybrid应用,能够设置离线文件或离线包机制让静态能源请求从地面读取,加快财富载入速度,并促成离线更新。关于那块内容,大家会在前边的章节中关键教学。

意见:很有借鉴意义

本文到那边,大概快要收场了。经过地点的介绍,大家对 AMP
项目应当有了肯定的认识。最终谈谈自身的看法:

AMP 项目对书写代码设置了汪洋范围,例如全部能源只可以托管给 AMP Runtime
加载;不允许利用 AMP Runtime、AMP Components 之外的 JS;不容许行使
inline JS;只好动用简单的 inline CSS 样式;JS 和 Web Font 必须选取钦赐的
CDN
等等,那都以为前边的优化策略做准备。全部原理并不复杂,难题是配套设施的确立,以及怎么着说服网站主改造代码。可是,Google后续很可能对使用了 AMP 的页面提权,那样一来我们就有引力了。

适合 AMP 规范的页面不会比由 WPO
专家优化后的页面更快,它是五个通用化的技巧,肯定包蕴众多事务用不上的代码逻辑,也有比比皆是优化手段它不可能提供。但对此不明了什么
WPO 的网站的话,使用 AMP 则是一个万分不易的选项。

然则,小编认为 AMP 很难直接用在境内项目中。首先,前面说过,AMP
Runtime、Components 必须从 cdn.ampproject.org 加载;Web Font
必须从 fonts.googleapis.com 加载。那样做的出发点是为着更可控,以及更好的在各网站之间共享缓存,不过这几个域名在境内很难访问如故直接被墙。其次,从最近AMP 近来已有个别扩张组件来看,instagram、twitter、youtube
那类外国媒体常用的劳动在境内都无法儿选用,内置的 ad 组件也不符合国情。

而是,AMP 项目对大家实行运动 Web
优化照旧很有借鉴意义。实际上,控制财富加载、处理响应式成分防止页面抖动、主动释放财富等政策,大家在类型中都有自个儿的品味与经验,但大家的方案只怕过分信赖服务端,要么没有抽象成通用形式,导致不可能松开到越多产品,那一个都以继承能够全力以赴的可行性,而
AMP 规范和代码达成,将会是最好的参考资料。

1 赞 3 收藏
评论

图片 2

9.优化财富加载次序

AMP控制全数的能源加载,优先加载供给的能源(如首屏必要出示的财富),预加载能够延缓加载的财富。

AMP加载财富时,最根本的财富起始被加载,images 和 ads
在他们或许被用户看到的情事下才加载,可能在用户快捷轮转到她们的职位时加载。

二、缓存类

1.靠边施用浏览器缓存

而外下边说到的应用Cache-Control、Expires、Etag和Last-Modified来安装HTTP缓存外,在活动端还是能够利用localStorage等来保存AJAX返回的数目,或然使用localStorage保存CSS或JavaScript静态能源内容,达成活动端的离线应用,尽恐怕减少网络请求,保障静态能源内容的即刻加载。

2.静态财富离线方案

对此活动端或Hybrid应用,能够安装离线文件或离线包机制让静态能源请求从本土读取,加速财富载入速度,并贯彻离线更新。关于那块内容,大家会在背后的章节中任重(英文名:rèn zhòng)而道远距离医学。

3.品尝使用AMP HTML

AMP HTML能够作为优化前端页面质量的二个缓解方案,使用AMP
Component中的成分来顶替本来的页面元素举办直接渲染。

JavaScript

<!– 不推荐 –> <video width=”400″ height=”300″
src=””
poster=”path/poster.jpg”> <div fallback> <p>Your browser
doesn’t support HTML5 video</p> </div> <source
type=”video/mp4″ src=”foo.mp4″> <source type=”video/webm”
src=”foo.webm”> </video> <!– 推荐 –> <amp-video
width=”400″ height=”300″ src=””
poster= “path/poster.jpg”> <div fallback> <p>Your browser
doesn’t support HTML5 video</p> </div> <source
type=”video/mp4″ src=”foo.mp4″> <source type=”video/webm”
src=”foo.webm”> </amp-video>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!– 不推荐 –>
<video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster="path/poster.jpg">
    <div fallback>
        <p>Your browser doesn’t support HTML5 video</p>
    </div>
    <source type="video/mp4" src="foo.mp4">
    <source type="video/webm" src="foo.webm">
</video>
 
 
<!– 推荐 –>
<amp-video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster= "path/poster.jpg">
    <div fallback>
        <p>Your browser doesn’t support HTML5 video</p>
    </div>
    <source type="video/mp4" src="foo.mp4">
    <source type="video/webm" src="foo.webm">
</amp-video>

三、图片类

1.图片压缩处理

在移动端,经常要力保页面中整整应用的图形都以通过压缩优化处理的,而不是以原图的样式直接利用的,因为那样很开支流量,而且加载时间更长。

2.运用较小的图纸,合理使用base64内嵌图片

在页面使用的背景图片不多且较小的意况下,能够将图纸转化成base64编码嵌入到HTML页面或CSS文件中,那样能够减掉页面包车型大巴HTTP请求数。要求小心的是,要力保图片较小,一般图片大小当先2KB就不引进应用base64嵌入显示了。

.class-name { background-image:
url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC’);
}

1
2
3
.class-name {
       background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC’);
}

3.施用更高压缩比格式的图形

动用全体较高压缩比格式的图纸,如webp等。在相同图片画质的气象下,高压缩比格式的图片体量更小,能够更快实现文件传输,节省网络流量。

<img src=”//cdn.domain.com/path/photo.webp” alt=”webp格式图片”/>

1
  <img src="//cdn.domain.com/path/photo.webp" alt="webp格式图片"/>

4.图纸懒加载

为了保障页面内容的最小化,加快页面包车型大巴渲染,尽大概节约移动端互联网流量,页面中的图片能源引进应用懒加载实现,在页面滚动时动态载入图片。

<img data-src=”//cdn.domain.com/path/photo.jpg” alt=”懒加载图片”
/>

1
  <img data-src="//cdn.domain.com/path/photo.jpg" alt="懒加载图片" />

5.选取Media Query或srcset依据分歧荧屏加载不相同尺寸图片

在介绍响应式的章节中大家询问到,针对分化的活动端显示器尺寸和分辨率,输出不相同尺寸的图形或背景图能保证在用户体验不下落的前提下节省互联网流量,加速局地机型的图纸加载速度,那在活动端相当值得推荐。

6.接纳iconfont代替图片图标

在页面中尽量选取iconfont来顶替图片图标,那样做的便宜有以下多少个:使用iconfont体量较小,而且是矢量图,因而缩放时不会失真;能够方便地修改图片大小尺寸和展现颜色。不过须求留意的是,iconfont引用区别webfont格式时的包容性写法,依照经验推荐尽量遵从以下顺序书写,不然不便于包容到具有的浏览器上。

@font-face { font-family: iconfont; src: url(“./iconfont.eot”); src:
url(“./iconfont.eot?#iefix”) format(“eot”), url(“./iconfont.woff”)
format(“woff”), url(“./iconfont.ttf”) format(“truetype”); }

1
2
3
4
5
6
7
@font-face {
    font-family: iconfont;
    src: url("./iconfont.eot");
    src: url("./iconfont.eot?#iefix") format("eot"),
         url("./iconfont.woff") format("woff"),
         url("./iconfont.ttf") format("truetype");
}

7.定义图片大小限制

加载的单张图片一般提议不超越30KB,防止大图片加载时间长而堵塞页面其余能源的下载,由此推荐在10KB以内。要是用户上传的图片过大,提出设置告警系统,协助大家观看询问全数网站的图形流量情形,做出进一步的改良。

一定:消除单一难题

经过后边对 AMP 的介绍,你一定会倍感奇怪,为啥 AMP HTML
有那么多限制和平条约束,那样阉割后的 HTML 还有如何适用场景。实际上,AMP
只关怀于一件事 —— 升高静态页面包车型地铁特性。

其一「静态」并不是指没有服务端参预的页面,而是指没有复杂交互、以内容彰显为主的财富页,典型事例正是信息详情页。未来的网站类型很多,游戏类、录像类、电商类等等,每一类网站都拥有本人的特征,优化策略也各差异,用一种方案去化解所反常不切实际。所以
AMP 项目将关切点放在了更易于优化且效果最强烈的内容型页面。

2)AMP HTML 组件

自定义组件

AMP HTML 自定义5个组件:
amp-ad、amp-embed、amp-img、amp-pixel、amp-video

组件直接以标签的款式开始展览应用,如页面中须求加载video、img
使用相应的组件即可,如下:

图片 3

图片 4

amp-video amp-img
组件实际是运用HTML原生<video> <img> 标签来实现,所以在页面上的显得效果和原生HTML一致。

图片 5

amp-ad、amp-embed 组件首要用以引入广告类消息,使用iframe的点子来贯彻。

壮大组件

AMP HTML的1个最首要特色正是可扩充性,它提供扩张组件来落到实处增进的效益。

官网如今提供的壮大有youtube录像组件、twitter组件、轮播、滚动、instagramd等等。

接纳扩大组件必要在页面尾部引入依赖的JS文件,如利用twitter组件:

图片 6

twitter组件的来得效果如图:

图片 7

扩展组件使用iframe来贯彻,定义增加组件必须从严遵从AMP的3p contribution
guidelines(为了保证质量,定义扩大组件的供给愈来愈多)。

前者质量优化 —— 移动端浏览器优化策略

2018/01/14 · 基本功技术 ·
移动端

原来的书文出处: ouven   

  相对于桌面端浏览器,移动端Web浏览器上有一些相比强烈的特色:设备荧屏较小、新天性包容性较好、支持部分较新的HTML5和CSS3天性、须要与Native应用交互等。但活动端浏览器可用的CPU总括能源和网络财富极为有限,由此要办好活动端Web上的优化往往要求做更加多的业务。首先,在移动端Web的前端页面渲染中,桌面浏览器端上的优化规则平等适用,其余针对移动端也要做一些最好的优化来完结更好的功力。需求专注的是,并不是活动端的优化原则在桌面浏览器端就不适用,而是由于包容性和差距性的原因,一些优化原则在运动端更具代表性。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图