angularJs项目实战!04:angularjs的性能问题
上一篇文章中我花了很多口舌去介绍angularjs是一个中型框架,面对大型应用时少不了第三方类库的配合。而我的核心议题是:如何以angularjs的思路使用其他类库,这里jquery是最好的例子了,谁让它争议最大。许多人一看到jquery就火冒三丈冲过来觉得这货是影响代码结构、打破angular way的纯洁的罪魁祸首,但事实是好的木匠总是会允许烂木头的存在,何况jquery并非烂木头。只要配合得当jquery完全可以做你项目中的小伙伴,而如果不改变传统的思路,就算用了angularjs你的代码也不容易维护。
不过对于angularjs本身来说,以上这个问题纯粹是使用者的理念和设计方法的问题,并不重要。重要的问题是,angularjs是个中型框架,做一个大型应用,往大了讲功能略显不足(比如缺少好用的UI插件和异步模块载入机制),往小了说又不够灵活(例如不能无缝与第三方路由整合)。但这些都不是最要命的。功能不足用第三方类库补嘛,不够灵活就学会适应吧,但最要命的问题是,性能效率问题。
怎么个性能效率问题呢?你可以自己测试一下:在一个页面上搞500+个不同的ng-model,然后看看页面的渲染效率会低到什么程度就知道了。
有人会说,谁没事干在一个页面上搞那么多ng-model啊!这肯定是写页面的人模块没有划分好!但事实是,这种情况很容易出现,例如,在显示一个angularjs实现的长列表的时候。
我大半年前曾经欢喜于angularjs的特性,而苦于没有一个好的基于angularjs的grid(表格)插件,于是自己动手瞎写了一个,叫anGrid. 代码已经很久没有维护了。但是还能用。 各位大爷轻喷。https://github.com/zhangdiwaa/anGrid
这个程序一开始运行无误,在显示20行X11列的列表(约造成了250个ng-model)毫无问题,反应也很快。配合angularjs的过滤器,排序、替换图标什么的就是手到擒来啊!
但问题很快发生了,我用了一个测试数据,造成了大约250行X11列的大列表(约造成了2900个ng-model),结果这个列表在chrome浏览器下居然渲染了20秒才出来,我还以为电脑死机了。测试了很多次都是如此。我认为是自己代码写的太烂。直到我做了1000+的ng-model测试,和看了同学侯振宇的博客以及angularjs源码才觉悟过来,其实angularjs也不是十全十美的。
Talk is cheap,我们直接来看内部实现吧。
angularjs双向绑定的核心是$digest方法。这个函数会直接检测“所有的数据模型”是否改动,有改动就去更新相应的视图元素。但事实上,看了源码我们就会发现这个$digest方法执行效率不会高。3重大循环吓死人,还要监听同步。连大神自己都在代码注释里吐槽说:yes,this code is a bit crazy.
$digest方法,请注意注释部分,中间有删截(感谢侯振宇的截图)
对于这个性能问题,只有换个框架才能改变。
我的同学侯振宇他们所在的团队,为此专门搞了个全新的MVVM框架avalon,性能超过angularjs 10倍——ng-model超过1万都很快。原理是将数据模型中的属性用get 和set 方法重写。在set方法中去更新所有和当前数据模型有关的视图元素,这就是为什么avalon一更新数据就能马上反映到视图上、并且性能更出众的原因。直接翻到avalon源码的“modelFactory”函数,在这个函数中avalon收集和当前模型有关的视图元素、其他相关联的数据,最后注册到属性中。其中更详细的原理可以直接参考作者 司徒正美 的github https://github.com/RubyLouvre/avalon
那如果不想换掉angularjs怎么办?那就努力把每页的ng-model控制在500以下吧。就上面那个angularjs实现gird表格插件的问题,其实用点“hack”方法也能搞定。假设要显示250行X11列的gird表格,那么就显示20行的元素和滚动条,让其他的元素不渲染不显示。只有当滚动条向下滑的时候才渲染新的元素,同时消除旧的元素。更进一步的还可以检测滚动条滚动的速度,滚动得慢就一行一行得预渲染,滚动得快就在停下的时候预渲染。如此就能始终把ng-model的数量控制在一个可以接受的范围内了。(嘛,这不就跟angular ui 里的ng-grid一样了吗!)
angularJs项目实战!04:angularjs的性能问题相关推荐
- 拉钩网前端项目实战04
拉钩网前端项目实战 拉钩网前端项目实战04 banner和content设计 一.banner部分设计 1.html部分 <div class="banner">< ...
- Python项目实战 —— 04. 淘宝用户行为分析
Python项目实战 Python项目实战--目录 Python项目实战 -- 04. 淘宝用户行为分析 一.背景 二.解题思路 三.数据分析 3.1 数据清洗 3.2 数据分析 3.2.1 用户整体 ...
- Vue项目实战04 : Vue 轮询接口的实现
项目中我们经常需要实现轮询-每隔几秒请求一次接口刷新数据 一般都会使用setInterval,但要注意单纯使用它会导致页面卡死,所以一定要清除定时器 setInterval不会清除定时器队列,每重复执 ...
- React Native商城项目实战04 - 封装TabNavigator.Item的创建
1.Main.js /*** 主页面*/ import React, { Component } from 'react'; import {StyleSheet,Text,View,Image,Pl ...
- 黑马就业班(02.JavaWeb+项目实战\04.XML)——XML
1.XML概念 XML:Extensible Markup Language 可扩展标记语言.(基本介绍见视频2) * 可扩展:标签都是自定义的. <user> <student ...
- 视频教程-Angular+Django前后端分离实战项目开发教程-AngularJS
Angular+Django前后端分离实战项目开发教程 胜蓝博创(韬略课堂)创始人,IT培训讲师,先后在蓝港在线,热酷,乐元素等大型游戏公司任职,参与过多款大型网游.手游的设计和开发,精通页游.手游前 ...
- 从vue迁移到react_从AngularJS迁移到React-您如何衡量性能提升?
从vue迁移到react by Gupta Garuda 通过古普塔·歌鲁达(Gupta Garuda) 从AngularJS迁移到React-您如何衡量性能提升? (Migrating from A ...
- Android性能优化——腾讯、字节、阿里、百度、网易等互联网公司项目实战+案例分析(附PDF)
前言 当我们还在用按键.滑盖.翻盖手机的时候,全触屏手机来了; 当我们觉得二维码这项发明没有意义的时候,支付宝和微信等狠狠地给了我们响亮的耳光; 当我们以为扫码支付只有支付宝的时候,微信支付来了; 当 ...
- springboot项目实战_2019学习进阶之路:高并发+性能优化+Spring boot等大型项目实战...
Java架构师主要需要做哪些工作呢? 负责设计和搭建软件系统架构(平台.数据库.接口和应用架构等),解决开发中各种系统架构问题. 优化现有系统的性能,解决软件系统平台关键技术问题攻关.核心功能模块设计 ...
最新文章
- 贝叶斯定理核心在后验概率是对先验概率的修正,即后验概率是描述来自先验概率的概率
- mysql循环load data_TP5框架下MySQL通过LOAD DATA INFILE批量导入数据详细操作
- 77岁“核弹老人”,前后半生都令人动容!
- (计算机组成原理)第六章总线-第二节:总线仲裁(链式查询,计数器查询、独立请求)
- pip 查看要安装的包所有版本(所有包版本)
- 软工实践(二)——构建之法读后感
- JS二维数组排序组合
- 微星刀锋 无法进入bios_微星MPG X570 GAMING EDGE WIFI刀锋板主板BIOS设置u盘启动教程...
- 伍德里奇计量经济学导论之计算机操作题的R语言实现(虚拟变量)
- 人性的弱点 - 把握人际交往的关键
- 【AI视野·今日CV 计算机视觉论文速览 第192期】Thu, 6 May 2021
- vs2010英文版变中文版
- 中国最好的产品经理100人
- 百度脑图DesktopNaotu
- 河南省周口市谷歌高清卫星地图下载
- 2021年安全员-A证考试技巧及安全员-A证
- python需要cpu还是显卡问题_如果研究深度学习方向,是CPU更重要还是显卡更重要?...
- 四天搞懂生成对抗网络(一)——通俗理解经典GAN
- catti二级笔译综合能力真题_CATTI二级笔译综合能力试题及答案.doc
- 解决:为保证帐号安全,您在这里的注册受到限制。 建议您下载网易官方手机客户端邮箱大师进行注册 原文信息: 解决:为保证帐号安全,您在这里的注册受到限制。 建议您下载网易官方手机客户端邮箱大师进行注册
热门文章
- opencv 图像雾检测_OpenCV图像处理-基于OpenPose的关键点检测
- Netty入门系列(1) --使用Netty搭建服务端和客户端
- 架构设计文章读后感7
- JAVA----------------------华为机试--------------------------删除字符串中出现次数最少的字符...
- 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇:(八)RTP音视频传输解析层之MPA传输格式...
- Request.From,Request.QueryString转对象
- linux下ntp服务器搭建方法
- Can't connect to MySQL server on 'localhost' (10061)的解决办法!
- Postman for Linux(x86)
- 低秩矩阵的应用--背景建模