webapp优化

1. 优化前提: 业务架构与数据库设计

2.  单页web应用  : ExtJs  backbone  ng  avalon

     框架: React Native    , ionic  , Mui, metror,WeeX,device one

Meteor(版本: 1.0) 的另一个特点是它会通过手机内存中运行的 miniMongo 数据库在本地维护一个数据拷贝。另外,Meteor 会完成所有电话和服务器之间的数据通信及同步。(miniMongo 是 JavaScript 实现的 MongoDB API。) 

3.   优化:  a、网络传输优化 (降低请求,并行加载 数量与容量的临界值)  b、首屏加速 (fake页 ,懒加载,Dom优化(页面渲染,资源清理),减少使用fixed、absolute ) c、内存资源优化  d、用户体验

4,. 无后端的web应用  自己编页面  云平台定制服务端的API和云存储  集成这个平台提供的SDK 实现注册认证 社交 消息推送  实时通信 云存储

5.单页应用 : 1. SEO差  2. js渲染性能比较差,基于框架:phoneGap,Corona,Xamarin,Titanium 手机 SDK,jq Mobile

6.技能需求: JS,组件化,设计模式

7. 技术上: ios==>Objective-C , android ==> Java  ,  windows Phone   == > .net

static元素处于文档流中,其渲染速度是最快的,我们做过一个测试: 
100个absolute元素与100个static元素渲染时差在0.01-0.007ms 
100000个元素渲染差距便增至30ms左右,这个微小的时差在移动端变得尤为明显,比如: 
小米/三星手机(1000左右),便存在明显的渲染问题,具体表现为:

l)定位元素在手机上不能显示。 
2)定位元素动画效果失效。

8.
l)CSS选择器尽量使用id与class,避免过度层叠 
2)避免使用数值,比如:border: none不会引起渲染,而boder: 0会 
3)动画时候让元素脱离文档流,以免导致大量reflow 
4)避免逐条修改DOM样式,改以className实现同样功能 
5)操作DOM时将display设置为none,因为这种元素不会影响渲染,或者操作fragment对象取代操作显示在页面上的DOM 
6)避免将获取DOM样式属性的操作写在循环中,可能引起重复reflow
一个解决方案是使用settimeout,更好的方案是使用DOMNodeRemoved事件监控页面DOM改变,将我们的DOM操作回调放入以确保渲染结束。

l) 释放没有使用的闭包 
2)观察者需要得到清理 
3) 释放定时器 
4)view切换过程中,在destroy中释放view相关资源
1)webapp中view实例保存不超过5个,多了便释放dom结构以及内存引用(临界值自己判断最优) 
2)view隐藏时释放内部资源,解除DOM事件句柄 
3) UI组件与view相同,需要统一释放机制

1) 使用函数替换逻辑

让我们的函数产生一个返回值替换函数中的大段逻辑,这样的第一个好处便是逻辑清晰,第二个好处是这些函数在不同的函数中,这个函数被使用后便会自动得到释放。

2) 清理闭包引用

当一个闭包函数或者什么使用结束后,若不会再使用,便需要手动清理该变量,以便解除闭包之间的引用关系,从而释放资源。

3) 使用对象属性或者方法

一个对象可以引用其他对象的属性或者方法,比如obj.foo = thatObj;这种情况下,我们可以随时删除对象解除引用关系,然后便可以清理资源。

动画与假死

动画而言建议采用CSS3实现动画,CSS3中又推荐采用最新的接口,比如使用transform取代top/lelf操作,这样操作效率搞得多。

若是采用动画可以将对应元素设置为absolute以减少回流,另外最关键一点还是避免移动DOM树过多的节点,这个时候需要驳回产品无理需求,比如:

产品要求日期滚屏组件,显示半年的数据,这半年的数据便是180个DOM树

这个级别的DOM一旦移动整个手机会直接卡死,甚至构建DOM树,渲染页面也会出现假死现象,该问题需要规避。




转载于:https://www.cnblogs.com/moneyss/p/10709887.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364879.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高版本Sqlserver数据库导入低版本Sqlserver

今天想跑一个关于java网站的demo,结果在附加数据库项这一块出现问题,例程的数据库用的是sqlserver2014,而我的是2008,添加数据库出现错误。经过一番查找,也找到某人写的一些博客上的解决方案,不过不是很清楚…

mysql删除bin-log_删除MYSQl BIN-LOG 日志

1.查找当前有哪些二进制日志文件:mysql> show binary logs;-----------------------------| Log_name | File_size |-----------------------------| mysql-bin.000001 | 1357315 || mysql-bin.000002 | 117 || mysql-bin.000003 | 404002 ||…

WildFly 8与GlassFish 4 –选择哪个应用服务器

自从我上一个博客以来已经有一段时间了。 我显然忙于其他事情,包括我的主要工作。 在对应用服务器的正确选择提出更多疑问之后,是时候再次讨论这个话题并分享我的想法。 该博客上最常阅读的文章之一是有关选择哪种Java EE 6应用程序服务器的文章 。 我一…

Vue--- 一点车项目

一点车项目 cli脚手架 组件化 数据交互路由指向存入数据库 前端页面 cli脚手架的安装与搭建 创建对应包 页面组件化编辑 (共享组件:摘取出来一模一样的组件重用)(私有组件:在自己的组件写入 引入共享组件) 数据交…

设计模式:模式或反模式,这就是问题

我最近遇到了Wiki页面“ Anti-pattern” ,其中包含详尽的反模式列表。 其中一些对我来说很明显。 他们中的一些让我想了一下,其他的让我想了更多。 然后,我开始在页面上查找反模式“ singleton”,但找不到。 (文本搜索…

Redis的散列类型

Redis是采用字典结构以key-value的形式存储数据的,在散列类型(所谓的hash)中的value也是一种字典结构。如果用关系表结构去理解,就是key为对象,value是属性和属性值。如下图: 所以使用散列(hash…

python configparser 注释_使用configpar添加注释

如果您想去掉尾随的,可以按照atomopter的建议将ConfigParser.ConfigParser子类化,并实现自己的write方法来替换原来的方法:import sysimport ConfigParserclass ConfigParserWithComments(ConfigParser.ConfigParser):def add_comment(self, …

easy html css tree 简单的HTML css导航树

code: show: 更多专业前端知识,请上 【猿2048】www.mk2048.com

使用Maven和WebLogic 12c开发Java EE应用程序

WebLogic Server 12c现在对Maven提供了很好的支持。 不过,此文档有点被隐藏,因此这里是直接链接http://docs.oracle.com/middleware/1212/core/MAVEN 总而言之,Oracle没有为其服务器工件提供公共的Maven存储库管理器托管。 但是,…

Java实现并发线程中线程范围内共享数据

---恢复内容开始--- 利用Map,HashMap键值对的数据结构,实现并发线程中线程范围内数据共享。 package cn.qy.heima2;import java.util.HashMap; import java.util.Map; import java.util.Random;public class ThreadScopeShareData {private static int …

Aspose 插件

百度:Aspose Aspose.Cells.dll Aspose.Slides.dll Aspose.Words.dll 转载于:https://www.cnblogs.com/Tpf386/p/10001814.html

mysql数据库version版本控制_MySQL数据库版本控制

你用什么方法来控制你的数据库?我已经将所有数据库表作为单独的.sql脚本提交到我们的respository(mercurial)。这样,如果团队中的任何成员对employee表进行了更改,比如说,当我更新我的存储库时,我会立即知道哪个表被修…

js生成二维码

1.引入js文件 https://blog-static.cnblogs.com/files/cengjingdeshuige/jquery.qrcode.js https://blog-static.cnblogs.com/files/cengjingdeshuige/qrcode.js 2.页面加入元素 <div id"qrcodeCanvas"></div>3.js里面生成二维码$(#qrcodeCanvas).qrc…

Java 8将默认使用传输级别安全性(TLS)1.2

传输级别安全性&#xff08;TLS&#xff09;1.2将默认设置为3月18日发布的标准Java的下一版本。TLS将提供加密的Internet通信&#xff0c;但不能完全解决Java的安全问题&#xff0c;因为Java的加密通信没有灵丹妙药有关安全问题的解释。 TLS版本1.2将在Java开发工具包&#xf…

18.11.16-高等数学-曲率计算

11.16 转载于:https://www.cnblogs.com/coder211/p/10005502.html

springboot干什么的_Spring Boot 项目的这些文件都是干啥用的?

上一讲我们用官网包或者 IDE 工具&#xff0c;快速构建了 Spring Boot 应用&#xff0c;并且看到了第一个程序的运行结果&#xff1a;Hello World&#xff01;本文我们了解下 Spring Boot 的目录结构&#xff0c;了解一个事物&#xff0c;清楚了它的结构&#xff0c;明白了内部…

微信小程序开发——点击按钮退出小程序的实现

微信小程序官方是没有提供退出的API的&#xff0c;但是在navigator这个组件中&#xff0c;是有退出这个功能的&#xff1a; 详情参考官方文档&#xff1a;navigator。 示例代码&#xff1a; 1 <navigator open-type"exit" target"miniProgram">关闭小…

使用RequestHandlerRetryAdvice重试Web服务操作

1.引言 有时在调用Web服务时&#xff0c;我们可能有兴趣在发生错误的情况下重试该操作。 使用Spring Integration时&#xff0c;我们可以使用RequestHandlerRetryAdvice类实现此功能。 此类将使我们在放弃并引发异常之前重试指定次数的操作。 这篇文章将向您展示如何完成此任务…

ASP.NET MVC如何做一个简单的非法登录拦截

摘要&#xff1a;做网站的时候&#xff0c;经常碰到这种问题&#xff0c;一个没登录的用户&#xff0c;却可以通过localhost:23244/Main/Index的方式进入到网站的内部&#xff0c;查看网站的信息。我们知道&#xff0c;这是极不安全的&#xff0c;那么如何对这样的操作进行拦截…

无法创建java虚拟机_创建java虚拟机失败的解决方法

创建java虚拟机失败的解决方法解决问题的步骤&#xff1a;1、从eclipse文件夹中打开eclipse.ini文件2、修改–launcher.XXMaxPermSize属性3、将值改为512m即可配置文件格式&#xff1a;-startupplugins/org.eclipse.equinox.launcher_1.3.0.v20120522-1813.jar--launcher.libra…