【澳门葡京】举手投足端H5页面注意事项,用CSS开启硬件加快来进步网站性能

运动端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
浏览器模拟设施大小,将该尺寸(【澳门葡京】举手投足端H5页面注意事项,用CSS开启硬件加快来进步网站性能。*7501074\)存下来,用于实时查看移动端页面效果。

设若页面已经写好了,就不得不依据上面的尺码进行内容的调动了,减少元素间距,缩放图片大小等。

享受下自己的败诉尝试:

  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财报
前年青人花花花钱大报告

1 赞 8 收藏
评论

澳门葡京 8

10. Swiper.js & Animate.css

您只必要 Swiper.js 和 Animate.css 即可打造(简单的)移动端 H5
活动页面~
Swiper 是纯
javascript 打造的滑动特效插件,面向手机、GALAXY Tab等运动终端。
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, Fire福克斯, 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可能会招致惨重的性质问题,因为它增添了内存的接纳,而且它会减小活动端设备的电池组寿命。

 

相关文章

发表评论

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

*
*
Website