网页性能管理详解

Author image 阮一峰 on 前端 , Web
转自:http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html作者: 阮一峰 你遇到过性能很差的网页吗?这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅。你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站。作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢?本文将详细介绍性能问题的出现原因,以及解决方法。一、网页生成的过程要理解网页性能为什么不好,就要了解网页是怎么生成的。网页的生成过程,大致可以分

Sketch来做护士排班表原型图

Author image Cloud on UI , UX , 产品
公司护士App改版了,名字也从微诊-护士版更改为独立的品牌:『点滴』先上设计师吉男童鞋新出的App图标: 我们现在就靠这个图标来活了幸亏当时跟BOSS理据力争,否则现在ICON就变成那个有点像自来水管的图标了。。。。前段时间『护士笔记』的创始人小麦来公司,算是半合作半合伙的方式,一块对了下,他比较想专心做护士圈子那块,他之前做护士笔记确实运营的很好,内容和用户活跃度都不错~排班表这个事也是他提的,护士的刚需。新加入的排班表功能,大家一直讨论说这就是护士界的大姨妈。。。app市场有一个收费的排版表,做的很烂,但是还是有很多人在下载使用~A1 排班表-月视图

JS做简单地资源预加载

Author image Cloud on 前端 , Web
做h5/web app经常需要做资源预加载,一种是利用H5的manifest的离线存储实现缓存功能,是非定向的,一种是利用js/css来做定向的资源预加载~JS的话,经常会用img的src来做文章,写一个简单地图片资源预加载:首先定义一个资源组件的格式,这样有N多组件的时候,方便统一维护: component1 = {    'source': {        'type': 'img',        'url': ['/static/img/common/loader.gif']    }}现在我们简单设置type为img来做为资源类型,然后url

Pjax 无刷新开发web,更好用户体验

Author image Cloud on 前端 , Web , html5
什么Ajax、Pjax、Njax。。。神马玩意? 有Njax吗? 木有。。。不过真有Pjax!!其实pjax就是用到了html5的新history api: pushState和replaceState。如果浏览器不支持,会自动降级为普通http访问,跟正常a链接一样具体啥区别?先视觉通感感受下!!上图:1、普通的http切换页面的请求方式,闪烁、白屏、卡顿、加载等,就是完整加载一坨页面嘛,又慢又挫的,就像如花姑娘:2、通过Ajax来开发页面,只加在部分数据,没有切换和闪烁,清新宜人哦,就像街上MM、邻家小妹如果只是ajax的话,不能保存页面状态!一刷新

JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

Author image Cloud on 前端 , Web , ES7
JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题。以往在浏览器中,因为与服务器通讯是一种比较昂贵的操作,因此比较复杂的业务逻辑往往都放在服务器端,前端 JavaScript 只需要少数几次 AJAX 请求就可拿到全部数据。但是到了 webapp 风行的时代,前端业务逻辑越来越复杂,往往几个 AJAX 请求之间互有依赖,有些请求依赖前面请求的数据,有些请求需要并行进行。还有在类似 node.js 的后端 JavaScript 环境中,因为需要进行大量 IO 操作,问题更加明显。这个时候使用回调函数来组织代码往往会导致代码难以阅读。现在比较流行的解

ES7两个亮点Async和Object.observe

Author image Cloud on 前端 , Web , ES7
Javacript 6规范将在2015年6月完成,现在谈ES7是否太早了呢?其实不是,因为ES7的一些特性已经开始进入浏览器,比如Chrome,ES7和ES6在时间进度上不会像ES5和ES6那样相差很大。  Javascript 7主要亮点是在事件机制和异步编程,这两点主要体现在:  1. Object.observe使得模型和视图之间很容易同步。  2. async函数更易于异步编程,能够实现拉Pull或推Push。  这两点提高基础是因为JS6中引入了使用 => 代表函数,箭头函数如下例:////ES5function(x, y) { return

干货!移动互联网产品设计原则

Author image Cloud on UI , UX , 产品
以下是借鉴各大互联网公司的设计原则而整理的一份产品设计原则,绝对干货哦!  情感  1、基于本源——产品情感需要基于产品本源,符合产品定位的方向。  2、精准定位——设计对受众定位清晰,符合该设计目标用户群的使用体验。  3、亲和力——所有交互元素的设计上,用户对信息沟通顺畅,保持体验统一。  4、留恋度——给人超出想象的空间,让人留恋往返,对产品期待更多,得到二次访问。  易用  5、反馈及时——在交互过程中,用户的操作能够在屏幕上及时得到反馈效果,帮助用户提高效率。  6、方位清晰——清晰的知道自己在那里,退路在那里,能够去那里。  7、路径简短——