浅谈无线h5开发

  最近一直在做h5的项目,对h5开发有了自己的理解。首先h5开发并不是指的html5的开发,而是指无线端的web开发,至于为什么叫h5开发,我觉得一方面是因为html5近几年还是挺受关注,另一方面h5在无线端有比较好的支持。

  大概从去年开始,好多人提出了pc已死的说法。其实比不是pc变弱了,反而是用户在不断增长。至于说pc已死,是因为无线实在是增长的太快了,就拿淘宝双十一的成交量来看,大部分的流量已经转向了无线。所以作为一名前端工程师,h5几乎已经成为必会技能。

  h5 vs pc

  首先来对比一下h5和pc开发。传统的pc开发可以说已经不必过多考虑性能,因为pc的内存和cpu支持一个单纯地网页还是足够的(只要代码不要太烂,例如出现死循环)。但是h5不同,一方面手机的性能不必pc(低端的手机尤为明显),所以h5页面要更多的考虑性能。另一方面手机的网络环境复杂,如3g,2g网络还是占很大比例,所以页面的数据请求也是一大问题。更别说要兼容几百种机型,几十种操作系统。所以我觉得h5开发对比pc更难。

     h5 vs 客户端(android&ios

  相比h5,客户端开发效果更好。但是为什么不全用客户端开发呢?h5和客户端的优缺点如下

  客户端

  优点

  1.体验好,更加流畅,可以做到h5做不到的效果(例如滑动)。

  2.更加安全,几乎不会被攻击。

  3不要考虑js,css等额外资源请求。

  缺点

  1.发版时间长,快则一月两次,慢则一月一次或几月一次。

  2.开发成本高。

  3.没有h5灵活。

  h5

  优点

  1.随时可以发布。

  2.开发成本低。

  3.可以投放到各个终端。

  缺点

  1.体验没客户端好,主要流畅度和加载速度。

  2.不安全

  3.网络消耗大。

  可以看出来,客户端和h5几乎是互补。为了能让h5能尽量消除不足,出现了好多解决方案,例如离线包(将js,css等静态资源缓存到手机内存中)。

  h5开发注意事项

  1.单位不能完全用像素(px),因为手机的大小不一,像素不能做到适配,所以图片等需要适配的元素要用相对单位rem或em(几乎都用rem)。

  2.水果的retina屏的每个点堆积一个以上像素点,所以对于retina屏的某些情况要做特殊处理,例如1px边框,具体解决方法可以在网上找到。

  3.尽量减少网络请求,必要的话要对弱网下做降级处理。

    总结

  h5开发从去年才真正火了起来,发展速度实在惊人(好多公司优先无线)。好多公司也投入很大的经历到对如何提高h5的性能,并且取得了一定的成果,例如之前提到的离线包就很好的提高了加载速度。但是我们也不得不思考,如果有一天手机的性能足够的好,网速足够的快(别现在wifi还快,不存在2,3g的网络),我们的研究方向又在哪里。

原文地址:https://www.cnblogs.com/alichengyin/p/5071625.html