用CSS开启硬件加快来拉长网站性能,移动端H5页面注意事项

举手投足端H5页面注意事项

2017/02/18 · HTML5 ·
移动端

原稿出处: Alexee   

1. 单个页面内容不可能过多

陈设常用尺寸:7501334 / 6401134,包蕴了手机顶部信号栏的可观。

移步端H5活动页面平常须求能够享用到各类社交App中,常用的有微信、QQ等。

使用移动装备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不停有顶部导航,尾部也有操作栏(safari浏览器也同等),这几个都会占用设计稿呈现区域,因而在 设计环节 就须要考虑内容的多少,页面底部要留住一定的空域,那样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部霸占150px,底部占用 110px,共占用了 260px,由此设计稿内容应控制在
1334-260=1074px 的万丈内。编写代码时,使用 Chrome
浏览器模拟设备大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

一经页面已经写好了,就只可以依据上面的尺码举办内容的调动了,裁减元素间距,缩放图片大小等。
分享下自己的战败尝试:

  1. 假诺对整个页面举行缩放(使用 meta
    标签),根据设计稿的百分比,在高度满足的图景下涨幅会偏小,两边会有白底;
  2. 即便使用 rem
    作为相关间距的单位,也从未章程找到一个适龄的比例在二种高度(微信/QQ)下切换,由此统一调成适配
    QQ
    的,那样固然在微信下有多余的空域,固定底部的教导降落箭头也能使其不会超负荷突兀。

美高梅开户网址 1

750*1334 页面示例

2017-11-25 更新:5. 行使 Gulp 拼合图片

1. 何为硬件加快

1. 单个页面内容不可以过多

布置常用尺寸:7501334 / 6401134,包罗了手机顶部信号栏的冲天。

移动端H5运动页面日常须求可以享用到各个社交App中,常用的有微信、QQ等。

应用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里穿梭有顶部导航,底部也有操作栏(safari浏览器也一如既往),那一个都会占有设计稿展现区域,因而在
布署环节
就须求考虑内容的多少,页面底部要留住一定的空域,这样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占据
150px,底部占用 110px,共占用了 260px,由此设计稿内容应控制在
1334-260=1074px 的可观内。编写代码时,使用 Chrome
浏览器模拟设施大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

若是页面已经写好了,就只好按照地方的尺码举办内容的调动了,裁减元素间距,缩放图片大小等。
分享下自己的破产尝试:

  1. 要是对任何页面进行缩放(使用 meta
    标签),依照设计稿的百分比,在中度满意的情形下涨幅会偏小,两边会有白底;
  2. 就是使用 rem
    作为相关间距的单位,也远非章程找到一个万分的比例在二种高度(微信/QQ)下切换,因此统一调成适配
    QQ
    的,那样尽管在微信下有多余的空域,固定尾部的辅导降落箭头也能使其不会超负荷突兀。

美高梅开户网址 2

750*1334 页面示例

2. 标题简短

移步端浏览器导航条宽度有限,简短的标题可以使其出示完整。

1. 单个页面内容不可以过多

设计常用尺寸:750 x 1334 / 640 x 1134,包罗了手机顶部信号栏的中度。

挪动端H5平移页面经常需要可以享用到各样社交App中,常用的有 微信、QQ
等。

利用移动装备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不断有
顶部导航,尾部也有
操作栏(safari浏览器也同等),那个都会占用设计稿呈现区域,因而在
安顿环节 就要求考虑内容的有些,页面尾部要
留下一定的空域,那样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 750 x 1334,顶部占有
150px,底部占用 110px,共占用了 260px,由此设计稿内容应控制在
1334-260=1074px 的莫大内。编写代码时,使用 Chrome
浏览器模拟设备大小,将该尺寸(*7501074\)存下来,用于实时查看移动端页面效果。

用CSS开启硬件加快来拉长网站性能,移动端H5页面注意事项。假诺页面已经写好了,就只能根据地方的尺寸进行内容的调动了,裁减元素间距,缩放图片大小等。

享受下自家的败北尝试:

  1. 一经对一切页面进行缩放(使用 meta
    标签),按照设计稿的百分比,在中度满意的事态下涨幅会偏小,两边会有白底;
  2. 哪怕使用 rem
    作为相关间距的单位,也并未艺术找到一个合适的百分比在三种中度(微信/QQ)下切换,因而统一调成适配
    QQ
    的,那样即使在微信下有多余的空白,固定底部的教导降落箭头也能使其不会超负荷突兀。

美高梅开户网址 3

750*1334 页面示例

不怕将浏览器的渲染进度交给GPU处理,而不是应用自带的比较慢的渲染器。那样就能够使得animation与transition尤其百步穿杨。

2. 标题简短

移步端浏览器导航条宽度有限,简短的标题可以使其出示完整。

3. 二维码图片应用 img 标签引入

二维码图片不要写为因素背景,不然长按没有艺术触发扫描功效。应利用 img 标签引入,如下:

![](images/qrcode.png)

2. 题名简短

运动端浏览器导航条宽度有限,简短的标题可以使其出示完整。

大家可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit)
发挥效应,从而提高性能

3. 二维码图片应用 img 标签引入

二维码图片不要写为因素背景,不然长按没有办法触发扫描成效。应选择 img
标签引入,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

4. 二维码图片记得扫描测试

偶尔扫描二维码之后,会跳转至某个地方,不幸的话QQ或者微信会对这一个地点举行友好提示,如下图所示:

美高梅开户网址 4

QQ内的和睦提醒

如此那般会阻拦部分用户继续访问,从而无法很好的将用户指导到活动想要推广的成品/品牌页面,如
App 的下载页面等。因而二维码的围观测试不可以少。

举个例证,要是二维码扫描结果是拔取的下载地址的话,可以行使应用宝的微下载地址来生成二维码,这是不会被“温馨提示”的。

3. 二维码图片采纳 img 标签引入

二维码图片不要写为元素背景,不然长按没有主意触发扫描功效。应采用 img
标签引入,如下:

美高梅开户网址 5

代码示例.png

现行多数电脑的显卡都协理硬件加快。鉴于此,我们得以表明GPU的能力,从而使大家的网站或应用表现的更是流畅。

4. 二维码图片记得扫描测试

偶然扫描二维码之后,会跳转至某个地点,不幸的话QQ或者微信会对那些地点进行自己提示,如下图所示:

美高梅开户网址 6

QQ内的自己提醒

如此会阻拦部分用户继续走访,从而无法很好的将用户率领到运动想要推广的成品/品牌页面,如
App 的下载页面等。因而二维码的扫视测试无法少。

举个例证,若是二维码扫描结果是运用的下载地址的话,可以动用应用宝的微下载地址来生成二维码,那是不会被“温馨提示”的。

5. 使用 Gulp 拼合图片

假若打算先布局,后拔取自动化工具将图纸拼起来,裁减请求数,须要小心:在编排
CSS
的时候,图片宽高应固定,图片拼合后才能通过定位和浮现区域的宽高来显示图片。

举个例子,假使布局时 width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(100%
的幅度)内会将其他图片显示出来,那不是大家想要看到的。

4. 二维码图片记得扫描测试

偶然扫描二维码之后,会跳转至某个地点,不幸的话QQ或者微信会对这么些地点举行和谐提示,如下图所示:

美高梅开户网址 7

QQ内的友爱提醒

这么会阻碍部分用户继续访问,从而不能很好的将用户指导到移动想要推广的产品/品牌页面,如
App 的下载页面等。由此二维码的扫描测试不可能少。

举个例证,倘若二维码扫描结果是拔取的下载地址的话,可以动用应用宝的微下载地址来生成二维码,那是不会被“温馨提醒”的。

2硬件加速原理

5. 行使 Gulp 拼合图片

假设打算先布局,后接纳自动化工具将图纸拼起来,减弱请求数,需求注意:在编辑
CSS
的时候,图片宽高应固定,图片拼合后才能透过一定和显示区域的宽高来展现图片。

举个例证,若是布局时
width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(100%
的肥瘦)内会将其余图片浮现出来,那不是大家想要看到的。

6. 关于链接的分享-QQ

若是将页面链接直接复制分享给其余人,在手机上接受链接新闻的用户可能会看到链接的有关音讯,如页面标题、描述和图片。相关音信设置方法如下:

<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">
<!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 -->
<meta itemprop="image" content="http://*.*.com/staticshare.png" />

可参考 手机QQ接口文档:setShareInfo。

题材:就算选择了上述的 image 设置方法,仍旧没能展现预期图片?
杀鸡取蛋:确定下您发送的链接格式,会不会有所省略,如:somedomain/ 或者 somedomain/index,正确的应为 somedomain/index.html,才能正确分析到图片。

万一是开辟链接后,在QQ内置浏览器里挑选将页面分享出来,那一般不会出错。

5. 行使 Gulp 拼合图片

如果打算先布局,后选取自动化工具(如:gulp-sprite-generator2)将图片拼起来(即因此css 生成天使图),收缩请求数,须要注意:在编辑 CSS
的时候,图片宽高应固定,图片拼合后才能经过定位和显示区域的宽高来突显图片。

举个例证,如果布局时
width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(100%
的宽窄)内会将别的图片浮现出来,那不是我们想要看到的。

指出先将图纸拼起来再布局,可以行使:gulp.spritesmith,一步获取合并的天使图和呼应的
css 文件。

2017-11-25 更新:推荐一个自制的 Electron 客户端工具
Splice(集合了常用的
gulp 插件,包罗上述的二种天使图变化插件)。

增补五个有关利用天使图的难题:

  1. 将多张图片通过工具生成天使图和 css 文件
    设若你转移天使图时不小心使用了重复的图形(文件夹里存在重复的图样不一致的名字),在表哥大上会出现图片大小地方都出错的景色,就算电脑浏览器(Chrome)里健康。
    解决:去掉那张重复的图片重新生成四回天使图和 css 就好了。
  2. 一向通过 css 文件生成精灵图
    创制手机端的活动页面时,常常索要翻页的机能,可以的话最好每个页面的图形拼成一张天使图(工具提供正则筛选图片路径的功效)。尽量不要将有着页面的图片统一拼成一张,如若您拼完没难题也即便了,可是我这边遇见过同地点第一点同样的题材,手机上页面效果出错。
    解决:最终排查不出难题,通过将多少个页面的图样分成三张精灵图才勉强度过难关。

浏览器接收到页面文档后,会将文档中的标记语言分析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中带有了汪洋的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理,而图层在GPU中transform 是不会触发
repaint
的,最后那一个使用 transform 的图层都会由单独的合成器进程展开处理。

6. 关于链接的享用-QQ

假使将页面链接直接复制分享给其余人,在手机上收到链接音讯的用户可能会看到链接的连锁音讯,如页面标题、描述和图纸。相关音信设置格局如下:

XHTML

<title>QQ中链接的标题由此处获取</title> <meta
name=”description” content=”QQ中链接的叙述因此处获取”> <!–
QQ默许获取的图样有可能出现缩放难题,效果不好,能够透过如下方法进行设置
–> <meta itemprop=”image”
content=”” />

1
2
3
4
<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">
<!– QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 –>
<meta itemprop="image" content="http://*.*.com/static/images/share.png" />

可参考
手机QQ接口文档:setShareInfo。

问题:即使使用了以上的 image 设置格局,如故没能突显预期图片?
解决:确定下您发送的链接格式,会不会拥有省略,如:somedomain/ 或者
somedomain/index,正确的应为
somedomain/index.html,才能科学解析到图片。

假设是开辟链接后,在QQ内置浏览器里甄选将页面分享出来,那一般不会出错。

7. 图片压缩

行使自动化工具 gulp-imagemin(教程)
来压缩图片,效果举例:101 KB => 80.7
KB。后来自我使用了在线工具 Tinypng 又举办了五回缩减,效果举例:(下面运用
gulp-imagemin 压缩过的图片)80.7 KB => 38.1
KB,可知光使用自动化工具来减弱是不够的,一大半图纸仍存在较大的减少空间,可以再扔到 Tinypng 里压缩一下看望。

6. 有关链接的分享-QQ

假诺将页面链接直接复制分享给其余人,在表弟大上收取链接音讯的用户可能会看出链接的有关信息,如页面标题、描述和图表。相关音信设置方法如下:

<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">
<!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 -->
<meta itemprop="image" content="http://*.*.com/staticshare.png" />

可参考
手机QQ接口文档:setShareInfo。

问题:固然使用了以上的 image 设置格局,仍然没能呈现预期图片?
解决:确定下您发送的链接格式,会不会有所省略,如:somedomain/ 或者
somedomain/index,正确的应为
somedomain/index.html,才能科学分析到图片。

假使是打开链接后,在QQ内置浏览器里挑选将页面分享出去,那一般不会出错。

CSS transform 会创设了一个新的复合图层,可以被GPU直接用来施行 transform 操作。

7. 图纸压缩

动用自动化工具
gulp-imagemin(教程)
来裁减图片,效果举例:美高梅开户网址,101 KB => 80.7 KB。后来本人利用了在线工具
Tinypng 又开展了一次缩减,效果举例:(上面使用
gulp-imagemin 压缩过的图片)80.7 KB => 38.1
KB
,可知光使用自动化工具来裁减是不够的,一大半图形仍存在较大的缩减空间,可以再扔到
Tinypng 里压缩一下看看。

在线的 Tinypng 可以无限次利用,假设想要使用其
API 来展开压缩自动化的话,可以利用
gulp-tinypng
等插件,不过有每月裁减图片数量限制,每月前500张图纸免费,其余收费情状参考官网表明。使用其
API 还必要取得 API
Key,这里可以收获。
民用觉得想要免费的话使用 API
会有数量限制,时刻牵记着数量有点心累,不如直接利用在线工具,也不费事~

8. Loading

代码段分享,拿走即用~

function loading(){

    function Load(){}

    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i<urls.length;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };

    var loader = new Load();

    loader.loadImgs([
        // 将所有需要加载的图片地址写于此处
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){
        // 假设显示百分比的元素为 $(".percent")
        $(".percent").text(percent+'%');

        // 加载结束后,隐藏相应的 loading 或遮罩 
        if(percent==100) {
            $(".mask").css('display','none');
        }
    });
}

// 执行 loading 方法
loading();

7. 图形压缩

应用自动化工具
gulp-imagemin(教程)
来压缩图片,效果举例:101 KB => 80.7 KB。后来我动用了在线工具
Tinypng
又举办了三回缩减,效果举例:(上边运用 gulp-imagemin
压缩过的图样)80.7 KB => 38.1
KB
,可知光使用自动化工具来裁减是不够的,半数以上图片仍存在较大的缩减空间,可以再扔到
Tinypng
里压缩一下探视。

在线的 Tinypng
可以无限次选用,若是想要使用其 API 来举办压缩自动化的话,可以行使
gulp-tinypng
等插件,不过有每月收缩图片数量限制,每月前500张图纸免费,其余收费情状参考官网证实。使用其
API 还亟需得到 API
Key,这里可以拿走。
民用觉得想要免费的话使用 API
会有多少限制,时刻怀想着数量有点心累,不如直接动用在线工具,也不费事~

浏览器哪一天会创立一个独门的复合图层呢?事实上一般是在以下二种景况下:

8. Loading

代码段分享,拿走即用~

JavaScript

function loading(){ function Load(){} Load.prototype.loadImgs =
function(urls,callback) { this.urls = urls; this.imgNumbers =
urls.length; this.loadImgNumbers = 0; var that =this; for(var
i=0;i<urls.length;i++){ var obj = new Image(); obj.src = urls[i];
obj.onload = function(){ that.loadImgNumbers++;
callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100)); } } };
var loader = new Load(); loader.loadImgs([ //
将具有需求加载的图片地址写于此处 “”,
“”,
“”,
“”,
“”,
“”,
“” ],function(percent){ //
若是突显百分比的要素为 $(“.percent”) $(“.percent”).text(percent+’%’); //
加载甘休后,隐藏相应的 loading 或遮罩 if(percent==100) {
$(“.mask”).css(‘display’,’none’); } }); } // 执行 loading 方法
loading();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function loading(){
 
    function Load(){}
 
    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i<urls.length;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };
 
    var loader = new Load();
 
    loader.loadImgs([
        // 将所有需要加载的图片地址写于此处
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){
        // 假设显示百分比的元素为 $(".percent")
        $(".percent").text(percent+’%’);
 
        // 加载结束后,隐藏相应的 loading 或遮罩
        if(percent==100) {
            $(".mask").css(‘display’,’none’);
        }
    });
}
 
// 执行 loading 方法
loading();

9. CSS 动画属性前缀 webkit

行使 CSS3
来制作动画效果的话,webkit 前缀一定记得加,要不然在少数手机下动画效能是未曾的。
如下:

-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;

@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

引进应用自动化工具来拍卖未加前缀的 CSS
文件,如 gulp-autoprefixer。

8. Loading

首屏 Loading,代码段分享,拿走即用~

function loading(){

    function Load(){}

    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i<urls.length;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };

    var loader = new Load();

    loader.loadImgs([
        // 将所有需要加载的图片地址写于此处
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){
        // 假设显示百分比的元素为 $(".percent")
        $(".percent").text(percent+'%');

        // 加载结束后,隐藏相应的 loading 或遮罩 
        if(percent==100) {
            $(".mask").css('display','none');
        }
    });
}

// 执行 loading 方法
loading();
  • 3D 或者 CSS transform
  • <video> 和 <canvas> 标签
  • CSS filters
  • 要素覆盖时,比如选用了 z-index 属性

9. CSS 动画属性前缀 webkit

运用 CSS3 来制作动画效果的话,webkit
前缀一定记得加,要不然在某些手机下动画作用是没有的。
如下:

CSS

-webkit-animation: f .8s 2s forwards ease-in-out; animation: f .8s 2s
forwards ease-in-out; @-webkit-keyframes f { 0% { opacity: 0;
-webkit-transform: translate3d(750px,0,0); transform:
translate3d(750px,0,0) } to { opacity: 1; -webkit-transform:
translateZ(0); transform: translateZ(0) } } @keyframes f { 0% { opacity:
0; -webkit-transform: translate3d(750px,0,0); transform:
translate3d(750px,0,0) } to { opacity: 1; -webkit-transform:
translateZ(0); transform: translateZ(0) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;
 
@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }
 
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
 
@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }
 
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

引进使用自动化工具来处理未加前缀的 CSS 文件,如
gulp-autoprefixer。

9. CSS 动画属性前缀 webkit

选取 CSS3 来创造动画效果的话,webkit
前缀一定记得加,要不然在好几手机下动画效率是不曾的。
如下:

-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;

@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

推介应用自动化工具来处理未加前缀的 CSS 文件,如
gulp-autoprefixer。

 

参考

途牛Q2财报
2017子弟花花花钱大告诉

1 赞 8 收藏
评论

美高梅开户网址 8

10. Swiper.js & Animate.css

你只须求 Swiper.js 和 Animate.css 即可打造(不难的)移动端 H5
活动页面~
Swiper 是纯
javascript 打造的滑动特效插件,面向手机、三星平板等运动终端。
Animate.css
是纯 CSS 编写而成的动画库,包涵多种科普的 CSS 动画。
引用 Swiper.js,同时在 Animate.css 中找寻须要的卡通片效果复制粘贴进 css
文件即可,完全不必引用 Animate.css。

3 为什么硬件加速会使页面流畅

11. 运用 Meta 标签举办页面缩放

<!-- 以下代码默认设计稿尺寸为 640 x 1134 -->
<meta id="viewport" content="width=device-width, user-scalable=yes,initial-scale=1" name="viewport" />
<script>
    var detectBrowser = function(name) {
        if(navigator.userAgent.toLowerCase().indexOf(name) > -1) {
            return true;
        } else {
            return false;
        }
    };
    var width = parseInt(window.screen.width);
    var scale = width/640;  // 根据设计稿尺寸进行相应修改:640=>?
    var userScalable = 'no';
    if(detectBrowser("qq/")) userScalable = 'yes';
    document.getElementById('viewport').setAttribute(
            'content', 'target-densitydpi=device-dpi,width=640,user-scalable='+userScalable+',initial-scale=' + scale); // 这里也别忘了改:640=>?
</script>

利用 meta
标签对页面进行缩放,使得大家得以一直依据规划稿来开展页面的编撰,不用再展开单位的折算等等,省却了过多麻烦。

因为 transform 属性不会触发浏览器的
repaint(重绘),而相对定位absolute中的 left 和 top 则会直接触发
repaint(重绘)。

12. 微信二维码难题

01:同一个页面里如果有四个二维码,长按扫描总是只好扫出 右侧/第一个二维码。
涸泽而渔:可视区域内只可以出现一个二维码。

02:使用 meta 标签缩放页面后长按二维码图片无反应。
化解:使用了以下代码之后,就能长按识别二维码了~

<!--同一张二维码图片-->
<!--下面这张 opacity 为 0,隐藏起来,但是实际存在,并且宽为 100%,屏幕有多大就多大-->
< img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二维码图片地址">
<!--下面这张是呈现给用户看的-->
< img src="二维码图片地址" title="qrcode" alt="qrcode">
<!--PS: img 标签前面的空格记得去掉,这里加上空格是因为简书有 bug,针对 img 标签代码渲染会出错-->

何以 transform 没有触发 repaint 呢?一句话来说,transform
动画由GPU控制,扶助硬件加快,并不要求软件下边的渲染。

参考

途牛Q2财报
2017青年花花花钱大报告

 

浏览器何时会创设一个独门的复合图层呢?事实上一般是在偏下三种情状下:

3D 或者 CSS transform

<video> 和 <canvas> 标签

CSS filters

要素覆盖时,比如动用了 z-index 属性

 

4并不是所有的CSS属性都能触发GPU的硬件加快,实际上唯有少数属性可以,比如下边的那些:

transform

opacity

filter

 

 

5.怎么在桌面端和移动端用CSS开启硬件加速

CSS animations, transforms 以及 transitions
不会活动开启GPU加快,而是由浏览器的急性的软件渲染引擎来推行。这大家什么才方可切换来GPU格局呢,很多浏览器提供了几许触发的CSS规则。

现今,像Chrome, FireFox, Safari,
IE9+和新星版本的Opera都支持硬件加快,当它们检测到页面中某个DOM元素选用了一点CSS规则时就会张开,最强烈的风味的元素的3D变换。

例如:

.cube {

   -webkit-transform: translate3d(250px,250px,250px)

   rotate3d(250px,250px,250px,-120deg)

   scale3d(0.5, 0.5, 0.5);

}

只是在部分状态下,大家并不须要对元素运用3D转移的效应,那咋做呢?那时候大家可以行使个小技巧“欺骗”浏览器来拉开硬件加快。

虽说大家恐怕不想对元素接纳3D转换,可大家一致可以开启3D引擎。例如大家可以用transform:
translateZ(0); 来开启硬件加快 。

.cube {

   -webkit-transform: translateZ(0);

   -moz-transform: translateZ(0);

   -ms-transform: translateZ(0);

   -o-transform: translateZ(0);

   transform: translateZ(0);

   /* Other transform properties here */

}

在 Chrome and Safari中,当大家拔取CSS transforms 或者
animations时或许会有页面闪烁的功效,上面的代码可以修复此情景:

.cube {

   -webkit-backface-visibility: hidden;

   -moz-backface-visibility: hidden;

   -ms-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   -ms-perspective: 1000;

   perspective: 1000;

   /* Other transform properties here */

}

在webkit内核的浏览器中,另一个可行的不二法门是

.cube {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

  /* Other transform properties here */

}

原生的移动端应用(Native mobile
applications)总是可以很好的选拔GPU,那是干什么它比网页应用(Web
apps)表现更好的原由。硬件加速在移动端尤其有用,因为它可以有效的滑坡资源的行使(移动端本身资源有限)。

 

6.选取硬件加快的标题

采纳硬件加快并不是十全十美的工作,比如:

1内存。如若GPU加载了汪洋的纹路,那么很简单就会时有爆发内容难题,这点在移动端浏览器上尤为分明,所以,一定要切记不要让页面的每个元素都选拔硬件加快。

2选取GPU渲染会影响字体的抗锯齿效果。那是因为GPU和CPU具有差别的渲染机制。尽管最后硬件加速截止了,文本依旧会在动画时期显得得很模糊。

 

总结

只对大家需求达成动画效果的元素运用以上措施,如果一味为了打开硬件加速而不论乱用,那是不明智的。

小心使用那个措施,要是由此你的测试,结果确是增强了性能,你才方可采纳这么些形式。使用GPU可能会导致严重的属性难点,因为它增加了内存的应用,而且它会压缩运动端设备的电池寿命。

 

发表评论

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

网站地图xml地图