mobile H5布局大全-rem flexbox详解

现在无线端的开发如火如荼,不同于国外网站经常做的响应式设计,国内很多大型网站都会专门实现基于H5的手机端mobile站点代码,淘宝、天猫、京东、百度等等,大抵是为了尽可能的减少设计和代码维护成本,也可能是为了实现代码的最小化减少请求代码量,虽然个人还是更倾向于响应式设计,但了解一些具有“无线端前端”开发的知识也未尝不是件好事。说起无线端开发,布局应该是最最具代表性的专题之一,因为不考虑ie系列的兼容性,因此除了pc端常常使用的浮动、表格、百分比布局等等 ,rem和flexbox更是火热的无线端布局实现手段,下面我们就从最基本的概念css像素看起,彻底的了解无线端的布局~~

一、viewport和像素

物理像素、CSS像素、独立像素和devicePixelRatio

  • 物理像素 device pixel: 物理像素指显示设备上的物理像素点
  • CSS像素 css pixel: 指我们写页面时理解的那个像素单位px
  • 独立像素dp: (dips device independent pixels): DP用在Android上,PT用在Apple上
  • 衡量设备的物理像素密度 DPI 和 PPI
    • DPI 指 Dots Per Inch(dpi ldpi mdpi hdpi for android)
    • PPI指 Pixels Per Inch。
    • http://dpi.lv/
  • window.devicePixelRatio = 物理像素/dips(dp) 等效于ddpx
  • dppx : device pixel / css pixel;
  • 分辨率(Resolution):屏幕区域的宽高所占像素数
  • 设计师DPI指南

viewport和devicePixelRatio

  • meta viewport
    • width:sets the width of the layout view port to the indicated value. device-width
    • initial-scale: sets the initial zoom factor of the page and the width of the layout viewport.
    • minimum-scale: sets the minimum zoom level (how much the user can zoom out).
    • maximum-scale: sets the maximum zoom level (how much the user can zoom in).
    • user-scalable: prevents user zooming when set to no. This is evil and we will demonstratively ignore it.
  • 使用viewport和devicePixelRatio实现兼容retina屏幕的像素

  • devicePixelRatio测试:http://www.quirksmode.org/m/tests/widthtest_vpdevice.html

  • css中使用devicePixelRatio

    .css{
        background-image: url(img_1x.png);
    }
    
    /* 高清显示屏(设备像素比例大于等于2)使用2倍图  */
    @media only screen and (-webkit-min-device-pixel-ratio:2){
        .css{
            background-image: url(img_2x.png);
        }
    }
    
    /* 高清显示屏(设备像素比例大于等于3)使用3倍图  */
    @media only screen and (-webkit-min-device-pixel-ratio:3){
        .css{
            background-image: url(img_3x.png);
        }
    }
    

  • vh单位:相对于视口的高度。视口被均分为100单位的vh

二、REM布局

rem原理

  • 使用相对尺寸的一种,随着页面宽度的改变,html的font改变,控制页面用rem标记元素的尺寸
  • 相对于百分比布局,控制局部尺寸更加方便
  • 参考 淘宝无线首页

代码

  • 需要设置基准元素还有最大的字体元素(防止全屏)
  • 核心计算公式
    • 页面宽度:getBoundingClientRect还是width
    • htmlFont = min[pageWidth/(psdWidth/basicFont, maxFont)
  • text-size-adjust调整100%
  • html font size的设置 拼css完成 而不是document.documentElement.style.fontSize
  • 绑定处理 DOMContentLoaded load resize 从未设置viewport的网页进入重新设置一下 pageshow/load persisted(是否后退进入)

实战

无线团队的lib.flexible

  • 1 代码
  • 2 不同点
    • 为了快速兼容vh单位 将布局分为了100份
    • 根据dpr控制meta的值,这样可以保证分别处理不同dpr的样式,但是增加了开发复杂度

三、Flexbox盒模型

原理

版本

  • 2009: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
  • 2011: http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
  • 2015: http://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/
  • display: -webkit-box;

  • display: -moz-box; //2009
  • display: -ms-flexbox;//2011
  • display: -webkit-flex;
  • display: flex; //now

‘APIS’

  • demo
  • flex type

    • display: inline-flex (make element inline-block)
    • display: flex (make element block)
  • direction
    • flex-direction:row row-reverse column column
    • box-orient:horizontal vertical
  • wrap
    • flex-wrap: nowrap | wrap(if not enough place will put content to the next row/column ) | wrap-reverse (should not use in mobile safari)
  • flex-flow(direction wrap)
    • flex-flow: row nowrap;
  • justify-content(horizontal distribution)
    • justify-content: flex-start | flex-end | center | space-between | space-around;(should not use in mobile safari)
    • horizontal center:

      -webkit-box-pack:center;
      -webkit-justify-content:center;
      -ms-flex-pack:center;
      justify-content:center;

  • align-items (vertical distribution)

    • align-items: flex-start | flex-end | center | baseline | stretch
    • https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

      -webkit-box-align:center;
      -webkit-align-items:center;
      -ms-flex-align:center;
      align-items:center;

  • align-self

    • used for flex items to change its align-items
    • align-items used for flex container
  • flex-grow flex-shrink

兼容性

autoprefix工具

实战

四、常见布局-等分和居中

五、常见布局-图片布局

六、代码转化为模板建立解决方案

七、其他

测试新手段可以选择不同机型不同的ADT实现测试-虽然付费但是相当的赞~~~
browserstack

网站改变策略

      最近仍然发现推酷恶意收录我的blog内容,已经发送邮件通知,同时对本blog所有feed禁止,防止向推酷一样臭不要脸的过来偷东西。知识是可以分享的,但是你拿我的东西去卖钱就说不过去了吧。

Yarn shuffle OOM错误分析及解决

      最近集群中一些任务经常在reduce端跑出Shuffle OOM的错误,具体错误如下:

2015-03-09 16:19:13,646 WARN [main] org.apache.hadoop.mapred.YarnChild: Exception running child : org.apache.hadoop.mapreduce.task.reduce.Shuffle$ShuffleError: error in shuffle in fetcher#14
	at org.apache.hadoop.mapreduce.task.reduce.Shuffle.run(Shuffle.java:134)
	at org.apache.hadoop.mapred.ReduceTask.run(ReduceTask.java:376)
	at org.apache.hadoop.mapred.YarnChild$2.run(YarnChild.java:167)
	at java.security.AccessController.doPrivileged(Native Method)
	at javax.security.auth.Subject.doAs(Subject.java:396)
	at org.apache.hadoop.security.UserGroupInformation.doAs(UserGroupInformation.java:1550)
	at org.apache.hadoop.mapred.YarnChild.main(YarnChild.java:162)
Caused by: java.lang.OutOfMemoryError: Java heap space
	at org.apache.hadoop.io.BoundedByteArrayOutputStream.(BoundedByteArrayOutputStream.java:56)
	at org.apache.hadoop.io.BoundedByteArrayOutputStream.(BoundedByteArrayOutputStream.java:46)
	at org.apache.hadoop.mapreduce.task.reduce.InMemoryMapOutput.(InMemoryMapOutput.java:63)
	at org.apache.hadoop.mapreduce.task.reduce.MergeManagerImpl.unconditionalReserve(MergeManagerImpl.java:297)
	at org.apache.hadoop.mapreduce.task.reduce.MergeManagerImpl.reserve(MergeManagerImpl.java:287)
	at org.apache.hadoop.mapreduce.task.reduce.Fetcher.copyMapOutput(Fetcher.java:411)
	at org.apache.hadoop.mapreduce.task.reduce.Fetcher.copyFromHost(Fetcher.java:341)
	at org.apache.hadoop.mapreduce.task.reduce.Fetcher.run(Fetcher.java:165)

vBomu

      先看一下基本流程,map端进行处理后将结果放在map端local路径中,map端不断心跳汇报给mrappmaster,在适当的阶段(另外可以写一个流程说明),reduce启动,reduce发送心跳给mrappmaster,获取已经结束的maptask对象。之后对已经结束的map进程的数据进行拉取俗称Shuffle,拉取是通过Fetcher线程进行的,随后进行sort。

      有关的几个重要参数

public static final String SHUFFLE_INPUT_BUFFER_PERCENT = “mapreduce.reduce.shuffle.input.buffer.percent”;     默认0.7

public static final String SHUFFLE_MEMORY_LIMIT_PERCENT = “mapreduce.reduce.shuffle.memory.limit.percent”;     默认0.25

public static final String SHUFFLE_MERGE_PERCENT = “mapreduce.reduce.shuffle.merge.percent”;     默认0.66

      个问题是在Fetcher过程中爆出的。首先解释一下参数,第一个参数SHUFFLE_INPUT_BUFFER_PERCENT是指在总的HeapSize中shuffle占得内存百分比我们总的HeapSize是1.5G,那大概Fetcher就是1.0G。 SHUFFLE_MEMORY_LIMIT_PERCENT是指的map copy过来的数据是放内存中还是直接写磁盘。 超过1.5G*0.7*0.25=250M的都放在磁盘中,其它开辟内存空间,放在内存中。 SHUFFLE_MERGE_PERCENT是指merge的百分比,超过这个百分比后停止fetcher,进行merge,merge到磁盘中。   

      跑出OOM后,调了下jvm参数,获取heapdump数据,根据MAT获取以下数据。数据如下:2015-03-10_11-11-212015-03-10_11-11-44

      首先发现整体的内存并没有到1.5G。其次,看了下内存对象分布,byte数组占了很大比例,这也很正常,所有内存中的buffer都是以byte数组形式出现的。在对比一下byte数组大小,大于900M,这就有一个问题了,首先整体HeapSize是1.5G,old区大概是1个G,这时候如果byte数组是900M来一个100M+的拷贝,由于是大内存开辟,不会进入Young区,直接开辟内存空间到Old区,而Old区即使fullgc也没有那么多连续空间,所以分配失败,报OOM错误。这时,只是一个假设,调整Xmn参数,减小Young区内存大小,增大Old区进行测试,成功,印证了想法。

      但是对于我们跑任务调整jvm参数毕竟不现实,那么我们根据经验调整SHUFFLE_INPUT_BUFFER_PERCENT参数就可以了,调整为0.6即可解决问题。

Spark 编译及部署

    Spark编译不是很复杂,使用maven就可以编译,但对maven的内存要求较高。

    1、export MAVEN_OPTS=”-Xmx2g -XX:MaxPermSize=512M -XX:ReservedCodeCacheSize=512m”

    2、mvn -Pyarn -Phadoop-2.4 -Dhadoop.version=2.4.0 -DskipTests clean package

          因为我是要跑在yarn上,其中要指定hadoop版本。

    除了第一次需要下载大量jar包,其它编译大概需要20分钟左右,编译好后在$SPARK_HOME/assembly/target/scala-2.10/ 下面有个jar包,大概100多兆,这是我们部署用的。


    Spark部署和配置也不难,从官网下载发布包(非刚才的源码包)即可,需要以下几步就可以部署使用。

    1、$SPARK_HOME/lib  下替换spark-assmbly的jar包,替换为刚才编译出来的jar包

    2、在$SPARK_HOME/conf  配置spark-env.sh

export SPARK_YARN_JAR==hdfs://ns1/spark/jar/spark-assembly-1.2.1-hadoop2.4.0.jar                #上传刚编译的jar包到dfs上,让所有worked都能get到

export HADOOP_CONF_DIR=/usr/local/hadoop-2.4.0/etc/hadoop                    #Hadoop配置路径

export YARN_CONF_DIR=$HADOOP_CONF_DIR              #Yarn配置路径

export SPARK_DAEMON_JAVA_OPTS=”-Djava.library.path=/usr/local/hadoop-2.4.0/lib/native/ -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=/data0/hadoop/gclog/heap.dump.spark”

export SPARK_SUBMIT_LIBRARY_PATH=/usr/local/hadoop-2.4.0/lib/native/         #LD_LIBRARY使用,调用native库用,如果使用lzo等配置好

     

     3、在$SPARK_HOME/conf下配置spark-default.sh

 

 

spark.yarn.historyServer.address *.*.*.*:18080     #yarn historyserver地址

 

spark.eventLog.enabled true

 

spark.eventLog.dir   hdfs://ns1/spark/logs

 

 

    至此,Spark配置完成,如果在YARN上跑一下测试可以用$SPARK_HOME/bin/spark-shell —master yarn-client