Tagged

webapp

A collection of 2 posts

webapp

关于webapp中的文字单位的一些捣腾

写完之后发现,这篇破文章用的图片比较多,假如流量不多的童鞋,看到这段文字马上按返回键,回家开电脑再看,高帅富者直接忽略。 前言 文字是网页内容的一枚大将,我们无时无刻都在看着它,只要是你盯屏幕上的任何一个地方都会有文字。地铁上无时无刻都在盯着屏幕上的人对于文字更为敏感,太大不行,太小TN又看不清上面到底在说什么,有时候车一晃完全是蛋疼的货。下面一篇文字就是针对webapp的文字做了一些小捣腾,肯定有很多不足的地方,欢迎补充。 有必要了解一下我们所常见的数值。 关于单位 对于webapp上文字用什么单位的问题,一直以来都是让我们csser头疼的问题,公说公有理,婆说婆有理。有人说px好,有人说em自适应,有的说百分比牛逼,rem文字出来就跟风说目前最好的就是rem单位。不管是什么说,我们还是要实地捣腾一下。 相对PC端,我们基本要做的就是根据设计图设计出来的文字大小,PS上是什么字体大小我们就直接在css控制文字的大小,基本都是以px像素为单位的,当然除了自适应页面的文字需要特别使用em或者rem外。所以对于pc端只要不涉及到自适应页面,我们通常的做法就是px通吃,一个字“爽”。 pc端中的px像素单位是针对电脑屏幕来说的一个单位,对于桌面上来说,衡量屏幕尺寸的就是分辨率了,1920*1280的分辨率屏幕,横向就是1920像素,纵向1280个像素点(高清屏没研究过),那我们设置一个字体样式 font-size:12px 计算得出来的应该是相对于电脑屏幕分辨率的12个单位长度,

datauri

手机端DataURI比外链资源慢6倍

一直在找这方面的数据,只是之前在鬼哥那边看到,网页中使用DataURI会**多消耗53%左右的CPU资源,内存多出4倍左右,耗时平均高出24.6倍。猜测手机端也会有类似的情况,但一直没有合适的方法来测试实际数据。** mobify最近做了一系列的测试,测试结果表明平均下来,DataURI要比简单的外链资源要慢6倍。 DataURI的方法最初被设计用于在email中嵌入资源,但是后来被介绍可以用于减少HTTP请求,从而提升网站性能。但是其实事实上却有些鸡肋: 图片等资源转换为DataURI所用的Base64编码之后,文件大小增加了好多(通常50%-300%),如果服务器端启用Gzip压缩,图片实际大小则基本可以达到转码之前的大小; 浏览器需要将Base 64解码以后才能渲染,而解码过程需要消耗不少的内存和CPU; 无论你是否将使用了这些Base64的文件(HTML,CSS等)缓存到本地,浏览器在渲染相关页面的时候,都要重新解码,消耗CPU和内存。 从上图可以看出,Android低端手机的性能差的惊人,iOS 6和Android 4.2的高端机看起来还可以但是DataURI也要慢好几倍。所以其实总体来说,DataURI的方法要慎用,对于Webapp,更推荐更有效的利用各种缓存技术。 文中数据来自于Mobify,更多测试细节也可以前往访问了解