移动端优化 - CSDN
精华内容
参与话题
  • 移动端优化

    2018-11-20 22:23:00
    减少资源大小可以加快网页显示速度,所以要对 HTML 、 CSS 、 JavaScript 等进行代码压缩,并在服务器端设置 GZip GZip 2.3 无阻塞 写在 HTML 头部的 JavaScript (无异步),和写在 HTML 标签中...

    减少资源大小可以加快网页显示速度,所以要对 HTML 、 CSS 、 JavaScript 等进行代码压缩,并在服务器端设置 GZip

    GZip
    

    2.3 无阻塞

    写在 HTML 头部的 JavaScript (无异步),和写在 HTML 标签中的 Style 会阻塞页面的渲染,因此 CSS 放在页面头部并使用 Link 方式引入,避免在 HTML 标签中写 Style , JavaScript 放在页面尾部或使用异步方式加载

    2.4 使用首屏加载

    首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。

    2.5 按需加载

    将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。

    PS:按需加载会导致大量重绘,影响渲染性能

    LazyLoad
    Media Query
    

    2.6 预加载

    大型重资源页面(如游戏)可使用增加 Loading 的方法,资源加载完成后再显示页面。但 Loading 时间过长,会造成用户流失。

    对用户行为分析,可以在当前页加载下一页资源,提升速度。

    Loading
    Loading
    

    2.7 压缩图片

    图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用 Srcset 来按需显示

    PS:过度压缩图片大小影响图片显示效果

    • a)使用智图( http://zhitu.tencent.com/ )
    • b)使用其它方式代替图片(1. 使用 CSS3 2. 使用 SVG 3. 使用 IconFont )
    • c)使用 Srcset
    • d)选择合适的图片(1. webP 优于 JPG 2. PNG8 优于 GIF )
    • e)选择合适的大小(1. 首次加载不大于 1014KB 2. 不宽于 640 (基于手机屏幕一般宽度))

    2.8 减少Cookie

    Cookie 会影响加载速度,所以静态资源域名不使用 Cookie 。

    2.9 避免重定向

    重定向会影响加载速度,所以在服务器正确设置避免重定向。

    2.10 异步加载第三方资源

    第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源

    2.11 减少HTTP请求

    因为手机浏览器同时响应请求为4个请求( Android 支持4个, iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个

    • a)合并 CSS 、 JavaScript
    • b)合并小图片,使用雪碧图

    三、脚本执行优化

    脚本处理不当会阻塞页面加载、渲染,因此在使用时需当注意

    • CSS 写在头部, JavaScript 写在尾部或异步
    • 避免图片和 iFrame 等的空 Src ,空 Src 会重新加载当前页面,影响速度和效率。
    • 尽量避免重设图片大小
    • 重设图片大小是指在页面、 CSS 、J avaScript 等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能
    • 图片尽量避免使用 DataURL , DataURL 图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长

    四、CSS优化

    尽量避免写在HTML标签中写 Style 属性

    4.1 css3过渡动画开启硬件加速

    .translate3d{
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
     }
    

    4.2 避免CSS表达式

    CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。

    4.3 不滥用Float

    Float在渲染时计算量比较大,尽量减少使用

    4.4 值为0时不需要任何单位

    为了浏览器的兼容性和性能,值为 0 时不要带单位

    五、JavaScript执行优化

    5.1 减少重绘和回流

    • 避免不必要的Dom操作
    • 尽量改变 Class 而不是 Style ,使用 classList 代替 className
    • 避免使用 document.write
    • 减少 drawImage

    5.2 TOUCH事件优化

    使用 touchstart 、 touchend 代替 click ,因快影响速度快。但应注意 Touch 响应过快,易引发误操作

    六、渲染优化

    6.1 HTML使用Viewport

    Viewport可以加速页面的渲染,请使用以下代码

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    

    6.2 动画优化

    • 尽量使用 CSS3 动画
    • 合理使用 requestAnimationFrame 动画代替 setTimeout
    • 适当使用 Canvas 动画 5 个元素以内使用 css 动画, 5 个以上使用 Canvas 动画( iOS8可使用 webGL )

    6.4 高频事件优化

    Touchmove 、 Scroll 事件可导致多次渲染

    requestAnimationFrame
    

     

    本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
    对web开发技术感兴趣的同学,欢迎加入Q群:943129070,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
    最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    展开全文
  • 移动端性能优化

    2019-08-05 15:30:27
    一、移动网站加载速度缓慢的原因 1、网站服务器 网站服务器(比如软件),默认情况下运行缓慢,或者尚未针对加载速度最大化进行合适的配置 ...移动网站被托管于一个相对缓慢的虚拟主机解决方案(或硬件)中,...

     

    一、移动网站加载速度缓慢的原因

     

    1、网站服务器

     

    网站服务器(比如软件),默认情况下运行缓慢,或者尚未针对加载速度最大化进行合适的配置

     

    2、虚拟主机解决方案

     

    移动网站被托管于一个相对缓慢的虚拟主机解决方案(或硬件)中,或者这个网站流量非常高,经常超出虚拟主机可以处理的流量水平。

     

    3、网站浏览器缓存

     

    移动网站尚未被配置使用网站浏览器缓存

     

    4、文件大小

     

    移动网站页面要求下载资源,并且这些资源的文件大小加起来过大了。

     

    5、HTTP请求

     

    移动网站页面要求下载过多的资源,比如图片、音频、视频、js、css等文件,这会导致过多的http请求,每一次http请求都会执行三次握手,每次握手都会消耗较多的时间。

     

    6、DNS查询

     

    移动网站页面要求从过多的不同的主机名处下载各种资源,比如图片、音频、视频、js、css等文件,这会增加DNS查询次数,并且使网页加载速度变慢。

     

    7、总体连接速度缓慢

     

    一些有意或者无意的设置(过多的重定向、无效的请求等),会大大减慢页面加载速度

     

    8、CDN

     

    移动网站的用户大部分来自于面积极大的国家(或者横跨非常大的地理位置),但却没有使用CDN

     

    9、网络自身速度缓慢

     

    网站服务器与请求移动网站页面的用户(比如浏览器)之间的网络连接较慢。

     

     

     

    二、HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少。如何优化HTML5在移动设置上的性能表现,下面看一张图:

     

    总之PC端性能优化的方法都可以应用到移动端来,而且移动端的时间消耗大部分在资源下载过程。

     

    一:加载优化

     

    1、减少HTTP请求数目

     

    因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。下面介绍减少HTTP请求数目的方法:

     

    A、CSS Sprites:国内俗称 CSS 精灵,即雪碧图,这是将多张小图片合并成一张图片,达到减少 HTTP 请求的一种解决方案。可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数,节省命名词汇量(由命名多张图片文件变成一张)。

     

     B、合并 CSS 和 JS 文件:现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少 HTTP 请求数量,可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。

     

    C、采用 lazyLoad:俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

     

     

    2、缓存

    使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。

     

    A、缓存一切可缓存的资源

     

    B、使用长Cache(使用时间戳更新Cache)

     

    C、使用外联式引用CSS、JavaScript

     

    3、压缩HTML、CSS、JavaScript

    减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。

    A、压缩(例如,多余的空格、换行符和缩进、注释)

    B、启用GZip

     

    4、使用首屏加载(对一些重要内容优先加载显示,一些次要内容可延迟加载)

     

    首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。

     

     5、按需加载(按需加载可能会导致很多的重绘,影响渲染性能)

     

    将不影响首屏的资源和当前屏幕资源不用的资源,放到用户需要时在加载,可以大大提升重要资源的显示速度和降低总体流量。

     

    A、LazyLoad

    B、滚屏加载

    C、通过Media Query加载

     

    6、预加载

     

    大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面,但Loading时间过长,会造成用户流失。

    A、可感知Loading(如进入空间游戏的Loading)

    B、不可感知的Loading(如提前加载下一页)

    C、对用户行为分析,可以在当前页加载下一页资源,提升速度。

     

    7、避免重定向

    重定向会影响加载速度,所以在服务器正确设置,避免重定向。

     

    8、异步加载第三方资源

    第三方资源不可控,会影响页面的加载和显示,因此要异步加载第三方资源。

     

    9、控制资源文件加载优先级

    资源文件处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:

     

     

    A、CSS写在头部,JavaScript写在尾部或异步。

    B、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。

     

    C、尽量避免重设图片大小,重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。

     

    D、图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长。

     

     

     

    二、图片优化

     

     1、压缩图片

     

    图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。

    A、使用智图压缩(制图是基于window系统的一款压缩图片的软件,转化为合适的图片格式)

    B、使用其它方式代替图片(使用CSS3;使用SVG;使用IconFont)

    C、使用Srcset(设置响应式图片,根据不同的屏幕分辨率和设备像素比,尽可能选择高分辨率的图片)

    D、选择合适格式的图片(webP优于JPG;PNG8优于GIF)

    E、选择合适的大小(首次加载不大于1014KB;基于手机屏幕一般宽度不宽于640)

     

     

    注意:过度压缩图片大小会影响图片显示效果。

     

    三、CSS优化

     

    1、尽量避免在HTML标签中使用style属性。( 因为在HTML标签中的style会阻塞页面的渲染 )

     

    2、避免使用CSS表达式。(因为其执行频率很高,当页面滚动或者鼠标移动的时候,就会执行,这会带来很大的性能损耗)

    3、移除空的CSS规则。(空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则)。

    4、正确使用display的属性。(display属性会影响页面的渲染)。

        (a)、display:inline后不应该再使用width、height、margin、padding以及float

        (b)、display:inline-block后不应该再使用float

        (c)、display:block后不应该再使用vertical-align

        (d)、display:table-*后不应该再使用margin或者float

    5、不滥用float。(float在渲染时计算量比较大,尽量减少使用)。

    6、不滥用Web字体。(Web字体需要下载,解析,重绘当前页面,尽量减少使用)。

    7、不声明过多的font-size。(过多的font-size引发CSS树的效率)。

    8、值为0时不需要任何单位。(为了浏览器的兼容性和性能,值为0时不要带单位)。

    9、标准化各种浏览器前缀

     

        (a)、无前缀应放在最后。

        (b)、CSS动画只用(-webkit-,无前缀)两种即可。

        (c)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。

    10、避免让选择符看起来像正则表达式。

    11、高级选择器执行耗时长且不易读懂,避免使用。

     

    四、js优化

     

    1、用一个变量保存列表的length的值,避免每次执行的时候到要计算该值。

     

    2、缓存DOM的选择与计算,避免每次Dom选择都要重新计算。

     

    3、尽量使用ID选择器,ID选择器是最快的。(因为用id访问时,只要找到元素就停止在DOM上查找;而用其他选择器去查找元素则要对DOM所有节点都访问一遍。)

     

    4、减少重绘和回流

     

        (a)、避免不必要的DOM操作

        (b)、尽量改变Class而不是Style,使用classList代替className

        (c)、避免使用document.write

        (d)、减少drawImage

    5、尽量使用事件代理,避免批量绑定事件。(当网页中需要触发事件的对象比较多的时候,为了避免内存泄漏,我们把事件委托到其父对象上,借助事件冒泡机制,可以将事件委托到body,document等元素上,这样等于一个页面就只有一个事件触发,避免直接把事件添加到多个对象上)

    6、touch事件优化,使用touchstart、touchend代替click。(响应速度快,但应注意touch响应过快,易引发误操作)。

     

    减少DOM的操作

     

    DOM操作为什么会影响性能?

     

    在浏览器中,DOM的实现和ECMAScript的实现是分离的。例如,在IE中,ECMAScript的实现在jscript.dll中,而DOM的实现在mshtml.dll中;在chrome中使用webkit的WebCore处理DOM和渲染,但ECMAScript是在V8引擎中实现的,其他浏览器情况类似,所以通过Javascript调用dom接口,是相当于两个模块的交互。相比较在同一模块中的调用,这种跨模块的调用其性能损耗是很高的,但DOM操作对性能影响最大是因为它导致了浏览器的重绘和重排。

     

     浏览器渲染原理

     

    从下载文档到渲染页面的过程中,

     

    1)浏览器会通过解析HTML文档来构建DOM树

     

    2)解析CSS产生CSS render tree(不包括位置和大小属性)

     

    3)javascript在代码解析的过程中,可能会修改生成的dom树、和css render tree,之后根据dom树和css  render tree构建渲染树(包括位置和大小属性),在这个过程中css会根据选择器匹配HTML元素。渲染树包括了每个元素的大小,边距等样式属性渲染树中不包含隐藏元素及head元素等不可见元素。最后浏览器根据元素的坐标和大小来计算每个元素的位置,并绘制这些元素到页面上。

     

     五、渲染优化

     

    1、HTML使用viewport。(viewport可以加速页面的渲染),如以下代码:

    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    2、减少DOM节点

     

    3、动画优化

    (a)、尽量使用CSS3动画。

    (b)、合理使用requestAnimationFrame动画代替setTimeout。

    (c)、适当使用Canvas动画,5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。

     

    4、高频事件优化。( Touchmove、Scroll事件可导致多次渲染)

     

    (1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。

    (2)、增加响应变化的时间间隔,减少重绘次数。

     

    5、GPU加速

    CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。

    注意:过度使用这些属性,会引发手机过度耗电

     

    展开全文
  • web移动端页面性能优化方案

    万次阅读 2017-05-01 10:12:49
    这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑战,如何让我们所开发的页面能有更好的体验,就是我们今天讨论的话题:移动端页面性能优化。 Html5的出现对于移动端影响挺大,HTML5框架可以...
    众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端。比如淘宝双11,在移动端支付的接近7成。这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑战,如何让我们所开发的页面能有更好的体验,就是我们今天讨论的话题:移动端页面性能优化。


    Html5的出现对于移动端影响挺大,HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求、执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技术,是HTML5核 心,需要通过JavaScript有许多方法可以用来检测HTML5的支持能力。


    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面马海祥就带大家来看看移动手机平台的HTML5前端优化,或许对你有帮助和启发。


    如何优化HTML5在移动设置上的性能表现,首先我们需要明确以下几个原则:


    1、PC优化手段在Mobile侧同样适用。
    2、在Mobile侧我们提出三秒种渲染完成首屏指标。
    3、基于第二点,首屏加载3秒完成或使用Loading。
    4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
    5、Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。
    6、基于第五点,要合理处理代码减少渲染损耗。
    7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
    8、加载完成后用户交互使用时也需注意性能。


    我们可以先看下面的一张图片:


    从上图可以看出,上面基本涵盖所有的优化方案了。在这里,只是针对其中几个代表性方案出来探讨。



    加载优化
    对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。


    1、减少HTTP请求
     因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,马海祥建议的优化要点为以下2点:


    1、合并CSS、JavaScript
    2、合并小图片,使用雪碧图


    2、缓存
     使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。


    1、缓存一切可缓存的资源

    2、使用长Cache(使用时间戳更新Cache)

    3、使用外联式引用CSS、JavaScript


    3、压缩HTML、CSS、JavaScript
    减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。


    1、压缩(例如,多余的空格、换行符和缩进)
    2、启用GZip


    4、无阻塞
    写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载


    5、使用首屏加载
    首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化。


    6、按需加载
    将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量。

    1、LazyLoad
    2、滚屏加载
    3、通过Media Query加载


    另外,马海祥提醒大家一点:按需加载会导致大量重绘,影响渲染性能。


    7、预加载
    大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面,但Loading时间过长,会造成用户流失。


    1、可感知Loading(如进入空间游戏的Loading)
    2、不可感知的Loading(如提前加载下一页)


    3、对用户行为分析,可以在当前页加载下一页资源,提升速度。


    8、压缩图片
    图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。


    1、使用智图
    2、使用其它方式代替图片(使用CSS3;使用SVG;使用IconFont)
    3、使用Srcset
    4、选择选择合适的图片(webP优于JPG;PNG8优于GIF)
    5、选择合适的大小(首次加载不大于1014KB;基于手机屏幕一般宽度不宽于640)


    另外,马海祥提醒大家一点:过度压缩图片大小影响图片显示效果。


    9、减少Cookie
    Cookie会影响加载速度,所以静态资源域名不使用Cookie。


    10、避免重定向
    重定向会影响加载速度,所以在服务器正确设置避免重定向。


    11、异步加载第三方资源
    第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。


    脚本执行优化
    脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:


    1、CSS写在头部,JavaScript写在尾部或异步。
    2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
    3、尽量避免重设图片大小,重设图片大小是指在页面、CSS、Java

    Script等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。
    4、图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。

    CSS优化

    1、尽量避免写在HTML标签中写Style属性。
    2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
    3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。
    4、正确使用Display的属性,Display属性会影响页面的渲染,因此马海祥建议各位站长要合理使用。
        (1)、display:inline后不应该再使用width、height、margin、padding以及float
        (2)、display:inline-block后不应该再使用float
        (3)、display:block后不应该再使用vertical-align
        (4)、display:table-*后不应该再使用margin或者float
    5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。
    6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用。
    7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。
    8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位。
    9、标准化各种浏览器前缀

    (1)、无前缀应放在最后。
        (2)、CSS动画只用(-webkit- 无前缀)两种即可。
        (3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。
    10、避免让选择符看起来像正则表达式。


    高级选择器执行耗时长且不易读懂,避免使用。


    JavaScript执行优化
    1、减少重绘和回流
        (1)、避免不必要的Dom操作
        (2)、尽量改变Class而不是Style,使用classList代替className
        (3)、避免使用document.write
        (4)、减少drawImage
    2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。
    3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。
    4、尽量使用事件代理,避免批量绑定事件。
    5、尽量使用ID选择器,ID选择器是最快的。
    6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。


    渲染优化
    HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览 器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的javascript代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。


    1、HTML使用Viewport
    Viewport可以加速页面的渲染,请使用以下代码:


    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    2、减少Dom节点
    Dom节点太多影响页面的渲染,应尽量减少Dom节点。


    3、动画优化
    (1)、尽量使用CSS3动画。
    (2)、合理使用requestAnimationFrame动画代替setTimeout。
    (3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。


    4、高频事件优化
     Touchmove、Scroll事件可导致多次渲染。


    (1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。
    (2)、增加响应变化的时间间隔,减少重绘次数。


    5、GPU加速
    CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。


    另外,过渡使用会引发手机过耗电增加。


    HTML5只是一种方法和手段,并不是万能的,思考怎么符合移动端设备特别是没错,但前提务必要基于PC站框架结构和内容,保证内容的一致性是解决 HTML5痛点的唯一办法,这个时候大家再去理解“凡是适合在移动端展现的网站”就不是站在高点去理解了,就应该站在最低点,怎么展示符合移动界面,同时 满足一部分移动用户的使用体验和需求。


    总结
    一款好的产品不是只看表面,“内在的东西”也非常重要,内外兼优的产品才是最好的,你说呢?


    展开全文
  • 那么如何做好移动端优化呢?数科软文平台结合自身经验简要总结如下:  一、页面与定位设计 无论是在移动端还是在PC端,网站定位是每个企业都需要考虑的,针对不同的用户人群,需要进行不同的定位与分析。虽然现在...

    随着智能手机的不断普及,移动端的互联网使用越来越高,90%的智能手机用户都会通过移动搜索来搜寻自己想要的信息,这就意味移动端的网站优化尤为重要,如何在移动端占据一席之地很重要。那么如何做好移动端优化呢?数科软文平台结合自身经验简要总结如下:
     一、页面与定位设计   无论是在移动端还是在PC端,网站定位是每个企业都需要考虑的,针对不同的用户人群,需要进行不同的定位与分析。虽然现在使用智能手机的人很多,但是每个人使用的浏览设备都是不一样的,因此,在设计页面时,必须考虑用户打开页面的时间长度,针对不同的用户终端设计出兼容性强的页面,想要提升手机网站打开速度,这里也需要注意不要使用Flash或JS之类的插件,虽然是移动端,但是依旧会影响用户体验,一定程度上减少百度索引的抓取。导致蜘蛛爬行困难。   二、网站简洁度   一般来说,移动站点的页面下载速度要比PC网站慢得多,因此在优化移动网站时,需要将页面大小和体积控制在较低的水平。考虑到现在用户时间都是碎片化,用户浏览网页的时间基本上是零散的,若是没有足够吸引力,大多数人是没有足够的耐心点击过多页面。因此,我们必须尽量简化手机网站的设计,这也是优化网站必须考虑的问题。   三、网站功能制作   在网站引导页面和购买过程中应进行优化精简,在用户浏览网站并进行交易之前,为其提供简单的操作步骤,精简内容,不要在注册浏览过程中让用户操作更多的注册项目,繁琐的操作很容易丧失用户,所以这也是企业需要注意的事项。   总之,就是网站要做的简洁大方,一目了然,操作使用方便。符合手机端使用习惯即可!

    展开全文
  • 浅谈移动端页面性能优化方案

    千次阅读 2019-06-11 12:04:29
    这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑战,如何让我们所开发的页面能有更好的体验,就是我们今天讨论的话题:移动端页面性能优化。 Html5的出现对于移动端影响挺大,HTML5框架可以提升...
  • 移动端性能优化的方法

    千次阅读 2018-07-21 19:39:15
    移动网站加载速度缓慢的原因 1、网站服务器 网站服务器(比如软件),默认情况下运行缓慢,或者尚未针对加载速度最大化进行合适的配置 2、虚拟主机解决方案 移动网站被托管于一个相对缓慢的虚拟主机解决方案(或...
  • 性能优化的几个重要指标 页面加载 图片优化 CSS优化 脚本优化 H5性能考量 浏览器性能 传统网站性能检测的几种方式 借助传统的开发者工具查看网络请求,也就是说使用浏览器的开发者工具 使用侵入式的JavaScript...
  • 正文: 百度要求移动端落地页打开速度2秒以内! 首先百度要求,移动端的网页打开...移动端优化布局排版,必须利于用户体验! 第二点,就是移动端的页面布局和排名,必须要符合用户体验,这一点非常重要,如果你的页面.
  • 移动端图片模糊问题的解决办法

    千次阅读 2017-12-25 17:45:46
    最近在优化移动端的时候,发现好多图片、背景图都很模糊,在pc端没有问题,但是在移动端,就会出现很模糊的现象 解决办法:图片不要用1:1比例的图,用2X的图,这样的话看起来就很清晰了。
  • Unity3D在移动端优化处理

    千次阅读 2012-07-25 21:10:16
    猴子原创,欢迎转载。...今天去CGDC听了刘钢先生的Unity在移动端优化处理,记录刘钢先生的优化建议。   一、关于性能优化的几大误区   误区1:性能优化只是程序员的责任,与美术和策划无关。 -技
  • Unity3D移动端实战经验分享

    万人学习 2018-10-22 21:38:02
    主要是围绕资源加载效率的优化,文本文件加载,比如xml序列化读取,protobuf文件序列化,以及消息事件封装及应用,shader的优化及运用,移动端实时阴影的绘制。
  • 很多无线端都使用前端模板进行数据渲染,在糟糕的网速情况下,一进去页面,看到的不是白屏就是 loading,这就是白屏问题。 此问题发生的原因基本可以归结为网速、静态资源。 1、css文件加载需要一些时间,在加载...
  • Vue移动端左右滑动组件

    千次阅读 2020-07-04 15:38:02
    自己根据网上的代码再自己优化下写了个组件, 能够监听用户左右滑动的事件. 自己再通过按需加载,减少数据一次加载过多 <template> <div class="slide" ref='slide' @touchstart='touchStart' ...
  • 从零开始学习移动端Web开发

    万次阅读 多人点赞 2017-05-11 14:28:20
    背景 近年来,随着智能手机的普及,移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧。本文旨在让读者以...
  • 首先讲简单的Shader Cheap Shader,轻量级Shader主要是内存占用量,贴图使用量,还有数据使用量来优化。 下面详细讲讲那些优化 1.改变变量类型(降低内存) 首先讲一下几种变量类型: float:32位浮点数据,...
  • 记录:Vue移动端项目优化过程

    千次阅读 多人点赞 2020-06-12 11:00:39
    最近在做项目时,测试提出了在App端的H5项目入口加载时间过长,白屏等待过久,需要优化的问题,于是着手开始分析: 项目技术栈:基于Vue全家桶做的一个移动端类似WebApp的项目,使用到的第三方库有:mint-ui, ...
  • 前端:移动端和PC端的区别

    千次阅读 2018-08-06 14:48:29
    在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同,但是还是很不系统,所以这里做一个总结。   第一: PC考虑的是浏览器的兼容性...
  • echarts 移动端画面失真等使用心得 这次的项目移动端电脑端都有用到echarts这个插件。在此记录一些使用心得,方便日后查看。如果能帮到看文章的你,我很高兴。 移动端 一、柱状图,画面失真,柱状图发虚 解决...
  • 移动端深度学习框架小结

    千次阅读 2019-05-30 13:59:38
    看到它有几个特点:异构加速、汇编级优化、支持各种框架的模型转换。 整体来看,料很足,特别是异构的支持,非常有诚意。 有了异构,就可以在CPU、GPU和DSP上跑不同的模型,实现真正的生产部署,比如人脸检测、...
  • 网站在移动端的打开速度慢怎么办

    千次阅读 2013-10-28 23:41:22
    大部分人对移动端的浏览体验感到失望,同时当体验提升时,他们会在智能手机上花费更多的时间。因为64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二倍以上的时间,达到了9秒。下面简单介绍一些...
1 2 3 4 5 ... 20
收藏数 48,465
精华内容 19,386
热门标签
关键字:

移动端优化