移动端的性能陷阱和加速

1.减少或避免repaint, reflow; repaint即重绘页面如改变文字颜色,reflow即改变结构,整体可以理解为减少DOM操作。

2.尽量缓存数据。

3.使用CSS3 transform代替dom操作。

4.不要给非position:static添加css3动画。(会成倍增加浏览器开销)

5.适当的硬件加速。可以设置transform:translata3d(0,0,0); 。

时间: 2024-11-03 22:15:10

移动端的性能陷阱和加速的相关文章

C# 类型转换is和as 以及性能陷阱

   1.在C#2.0之前,as只能用于引用类型.而在C#2.0之后,它也可以用于可空类型.其结果为可空类型的某个值---空值或者一个有意义的值.示例: 1 static void Main(string[] args) 2 { 3 PrintValueInt32(5); 4 PrintValueInt32("some thing!"); 5 } 6 7 static void PrintValueInt32(object o) 8 { 9 int? nullable = o as i

警惕 MySql 更新 sql 的 WHERE 从句中的 IN() 子查询时出现的性能陷阱

警惕 MySql 更新 sql 的 WHERE 从句中的 IN() 子查询时出现的性能陷阱 以下文章来源:https://blog.csdn.net/defonds/article/details/46745143 mer_stage 表有 216423 条记录,DDL:CREATE TABLE `mer_stage` ( `STAGE_ID` int(11) NOT NULL AUTO_INCREMENT, `MER_ID` int(11) NOT NULL, `MER_CODE` varch

移动端性能陷阱和硬件加速

1.减少或避免repaint/页面重绘,reflow/页面回流 repaint:样式的变化,如颜色 reflow:变化的成本比repaint大 也可以理解为对dom元素的操作 2.尽量缓存所有可以缓存的数据 3.使用css3transform代替dom操作,animate.css 非主流性能优化原则 1.不要给非static定位元素(如absolute,relative)增加css动画 2.适当的使用硬件加速 一个简单的例子,就是把图片画到canvas上,就会触发硬件加速 或是  ,给图层加tr

移动端页面性能探究

一.背景: 智能终端的普及改变了人们对互联网的使用习惯,终端环境对页面性能有更高的要求,接下来以一张图来分析:1s内渲染一个移动页面 网络整体消耗来分析: 1.服务器响应应该小于200ms 2.尽量少的重定向 3.尽量少的第一次渲染的请求 4.避免过多堵塞的js和css堵塞 js执行效率和渲染效率: 1.给浏览器留的200ms渲染时间 2.优化我们的js执行效率和渲染时间 二.主要的web性能优化 页面请求:DNS Lookup.减少重定向.并行请求.压缩.缓存.按需加载.前端模块化 运行环境:

移动端HTML5性能优化

[导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长. 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 2%,在网购总交易额中的占比首次超越PC端达到55%. 技术上,HTML5大行其道: 1:有数据显示,截至2015,有80%的App全部或部分基于HTML5. 2:谷歌浏览器于9月1日起不在支持自动播放Flash. 3:亚马逊旗下网站(包括Amazon.com门户在内)的所有广告将不再使用flash.在可预见的未来,flas

转: app端数据库(性能高) realm (ios, android 均支持)

转:  http://ios.jobbole.com/85041/ 移动端数据库新王者:realm 2016/05/14 · iOS开发 · 数据库 分享到:0 原文出处: 没故事的卓同学(@没故事的卓同学) realm 介绍 realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective?C和Swift)以及Android.2014年7月发布.由YCombinator孵化的创业团队历时几年打造,是第一个专门针对移动平台设计的数据库.目标是取代SQLite.为了彻底解决性能问题,

服务端常见性能隐患分享

中午午休时,正好收到公司的培训邮件,由公司性能测试组的一名年轻的同事为我们带来压测相关的分享,这部分对俺这个以应用开发为主的程序员来说,感觉帮助很大.课上内容非常的通熟易懂,涉及了一般应用接口开发中主要的性能问题(不属于分布式大并发),实用性非常的强,本文将选取个人认为其中相对常见部分进行介绍,不足之处望大家指出,再次感谢那名牛X同事,嘿嘿. 压力测试(Stress Test)指模拟实际应用中的软硬件环境和相应系统负载情况,在此条件下,对被测系统进行长时间或超大负荷的运行,来测试系统的性能.可靠

用CSS开启硬件加速来提高网站性能(转)

用CSS开启硬件加速来提高网站性能(转) 翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css. 你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅. 在桌

用CSS开启硬件加速来提高网站性能

你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗? 现在大多数电脑的显卡都支持硬件加速.鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅. 在桌面端和移动端用CSS开启硬件加速 CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行.那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CS