为什么手机浏览器上webglandroid webgl 效果差那么差

您的访问出错了(404错误)
很抱歉,您要访问的页面不存在。
1、请检查您输入的地址是否正确。
进行查找。
3、感谢您使用本站,1秒后自动跳转手机浏览器潜规则重重 跑分注水成诡异
10:25&&来源:IT商业新闻网综合&
  【IT商业新闻网综合报道】(记者 王淇)今年上半年,国内手机浏览器活跃用户已跨越了2亿门槛。然而,近日,不止一家知名浏览器厂商内部人士证实称,用户数量注水在业内早非新鲜事。
  据悉,为进一步忽悠用户,甚至连国际HTML5测试也有多家厂商涉嫌造假,通过种种技术手段钻漏洞刷分,某些排名靠前的业内领头羊同样“刷得欢”。
  IT商业新闻网了解到,作为全球主流的浏览器标准,HTML5基本上已成为国内外各大浏览器的试金石。通常测试中获得的分数越高,便代表浏览器对HTML5的支持性能越出色。为了博眼球增加宣传卖点,某些厂商便开始走起了歪路。将这一猫腻曝露于公众视线的,源于今年3月的一起“乌龙事件”。
  当时,遨游3浏览器在HTML5test能力测试超越谷歌Chrome,以467分的高分排名世界第一。但不久后,名为 Vygantas的用户在国外论坛Favbrowser上连发两帖,质疑这一成绩实质上名不副实。他在实际测试中发现,遨游其实并不支持WebGL、 getUserMedia等接口功能,却离奇在测试中拿到了上述分数,疑似为评测准备了一个“特别版本”来蒙混过关。
  此事并未在国内引发太大反响。傲游浏览器产品内核主管曾维宏才出面解释称,这其实是一桩乌龙。“只能说是内部把关上出了问题,当时那个版本质量并不高,存在一些瑕疵,因此很快就撤回并升级了。”
  引发争议而“升级”后的版本在HTML5test虽然仍排名第一,却只拿到422分,不进反退令人费解。曾维宏对此解释称,当前评测并无法将真正效果检测到位,原本有一些开发中的功能被记了分,后来出于用户体验考虑取消了,所以得分倒退。
  根据遨游公关部提供的截图,目前Vygantas已在Twitter上取消了对其“欺诈”的指控。
  一位不愿具名的业者坦言,其实刷分事件在国内并不罕见。曾维宏证实了上述说法,虽未透露具体厂商姓名,但笑称:“好像不止二三线厂商吧?”
  据悉,除了跑分注水外,各家手机浏览器厂商对外公布的活跃用户数量,也成为不少业者眼中一道诡异的风景线。
版权说明:&转载须经版权人授权并注明来源。联系电话:010-
编辑:邵波涛谈谈移动端页面性能优化方案
谈谈移动端页面性能优化方案
作者:admin来源:Web前端之家浏览:14996评论:0
众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端。比如淘宝双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、JavaScript3、压缩HTML、CSS、JavaScript减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。1、压缩(例如,多余的空格、换行符和缩进)2、启用GZip4、无阻塞写在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、减少CookieCookie会影响加载速度,所以静态资源域名不使用Cookie。10、避免重定向重定向会影响加载速度,所以在服务器正确设置避免重定向。11、异步加载第三方资源第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。脚本执行优化脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:1、CSS写在头部,JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。3、尽量避免重设图片大小,重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。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使用ViewportViewport可以加速页面的渲染,请使用以下代码:&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痛点的唯一办法,这个时候大家再去理解“凡是适合在移动端展现的网站”就不是站在高点去理解了,就应该站在最低点,怎么展示符合移动界面,同时
满足一部分移动用户的使用体验和需求。总结一款好的产品不是只看表面,“内在的东西”也非常重要,内外兼优的产品才是最好的,你说呢?
温馨提示本文作者系,经编辑修改或补充,转载请注明出处和本文链接
03-26&&12-03&&12-16&&02-18&&12-30&&03-05&&10-17&&12-09&&01-27&&08-22&&
||||||||||||||
Copyright (C)
,、+,页面等开发技术交流 All Rights Reserved. Web前端交流群:(新)粤ICP备号-1}

我要回帖

更多关于 360浏览器开启webgl 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信