移动端web思考

问题

做移动端也已经快两个月了,东西不能算是学得很多,而且也没有着手项目,主要负责的是活动的开发,我们主要是在微信开发,然后app中植入h5页面。所以,期间对webapp最大的感受就是页面内容比较少,但是设计到兼容性的比较多。

这当中有几个问题。

1.图片大小,太大如何解决

一走来,便是切图。各种jpng->png(为了消除背景,说实话,自己也挺笨的,开发了几个后才知道如何做!不知道之前是怎么搞的),然后便是使用压缩软件,(虽然gulp有压缩图片的功能)。但是公司使用的是cdn,需要上传。这个便是让我蛋疼的地方。但凡每次运营改了东西,都要经过好多个步骤才能shut down。(现在也没想到好的办法!)

另外一个就是图片大小的问题了,图片太大,对于移动端来说下载时间久,渲染通过cpu时间也长。 不过webp格式的图片,压缩率也挺不错(目前还在活动中使用),它在chrome上完美支持,但是还有其他的缺点。

=======update=====
目前的一些方式

图片格式 浏览器支持 使用场景 优点
webp Chrome9+、Opera11.5、Android4+ 复杂颜色及形状 相比png缩减了文件大小
svg 所有(IE8以上-不包括IE8) 复杂颜色及形状 简单图形,需要良好的放缩体验,需要动态控制图片特效,矢量图片,不受像素支持
bgp 不支持,需要js解码 jpeg上需要极限优化的场景 高压缩比,相同画质比webp更小

看来svg+canvas是一种良好的解决方案

2.页面如何自适应

目前手机款式太多,使用相应式不太现实。那么多数应该喝网上taobao移动端的解决方式应该差不多,都是通过rem来进行自适应,并监听viewport大小改变重现设置html的font-size。

3.开发类似活动等‘简单’页面,你打算采用什么?框架太重!原生?react?没必要

reactjs在前端如日中天,这款UI组件库,确实比较牛逼。相对于之前的重量级ng学习成本低一点,但是我感觉一点也不简单。而且在开发活动中,我并没有体会到它的亮点。一个页面,几张图片,一两个按钮,确实有点大材小用。

之前使用react代码的行数差不多19000+,(惊呆了)所以,最近,我们打算不使用这个来开发活动页面。还是重归zepto的怀抱,目前就(3000+行,大瘦身)。

======update 2016/3/3=======
最近在看新人文档中,看到了天猫开发活动(同事是阿里的)的相关流程。

每个公司在发展到一定阶段,随着工作的重复和需求量增加,我们伟大的技术童鞋都会有解决方式。

TMS --》基于php的模块搭建系统 --》快速活动搭建平台 和 数据投放系统

这个肯定也是我们前端的发展趋势,毕竟切图很累(切身感受)

4.如何在项目中提高web的性能

1.静态文件放在cdn,至于.html可以放在ngnix上

2.dns预解析

    也是前几天才听说,最近看《移动首屏优化实践》又见到了。

    <meta http-equiv="x-dns-prefetch-control" content="on" /> 
     <link rel="dns-prefetch" href="//imagecache.qq.com"> 

3.webpack压缩js,css

4.缓存数据
    &emsp;&emsp;目前没有使用过

5.按需加载资源,预加载

6.图片懒加载
    使用了一次别人写的,感觉计算的方式有问题,不是很好。自己学会实现一个。

7.用户体验-进度条,旋转的菊花,都是很好的

=======update(1/21)=====

1.使用node来降低首屏时间
后台不一定需要使用node,但是如果设计到数据交互,需要取后台数据。那么我们通过node“直出”来加快显示,这样就不用渲染直接返回。

http://web.jobbole.com/84753/

图片详细介绍