关于淘宝APP内嵌H5页面的学习

2015年05月12日

起因

估计是志强哥哥看我很闲的慌，让我爬爬淘宝客户端哪些页面是H5的。谷歌了一下，mac下charles是一款很棒的抓包工具，具体安装及配置就不赘述了。

别人家的页面

为什么叫别人家的页面呢，因为自己的页面写的真心比不上人家啊。

  1. 针对字体大小的缩放，淘宝是用media screen来做的,下面元素的字体单位都是用的rem。控制body的font-size来达到不同页面的字体大小调整这个是我没考虑到的。

     @media only screen and (min-width: 640px) {
     html, body {
  				font-size: 24px;
  			}
 }
 @media only screen and (min-width: 620px) {
     html, body {
  				font-size: 23.25px;
  			}
 } 但是我看有页面html的font-size会随着页面的宽度大小变化，但是不是用media screen做的，难道是js?

  2. 淘宝的H5页面基本用rem单位，无论宽高(也有百分比的)padding，margin。

  3. 如果banner的高度很高，会切割成好几块。一般banner图我只考虑了格式或者压缩，没考虑过干脆把它裁裁小。不过这个请求数量和单张图片尺寸大小哪个更重要怎么衡量呢?

  4. h5的页面一般设置最大宽度max-width: 640px; 最小宽度的尺寸会设置成min-width: 320px;这个是我一直疏忽的(在网页中打开的时候图片效果太差了)。

  5. 一般页面首次加载的大小不超过1.5MB

问题

h5页面中基本上多行文本没有做overflow的处理，但是估计他们后台添加文本的时候有加限制；单行的比如说价格，没有做极限值的处理。

一些启示

设计师按照640px宽度做设计稿，前端工程师拿到稿子时按640px宽度还原设计稿，通过rem或者百分比单位，实现不同页面大小的缩放。

其他

只是很草的看了几个页面，有些没做过的效果或者思路会在codepen做做看。

最后杂点图片优化的: 除了针对图片本身，格式，压缩等，用cdn进行动态裁剪也可以，或者直接用gulp/grunt进行优化(话说我之前用prepros的图片压缩功能把图片压没过==，这个要试一把)。

再说页面性能优化，谷歌的PageSpeed,感觉还蛮靠谱的。