移动端H5学习整理

1、移动端自适应原理

首先先了解几个常用单位
px: 固定长度单位
vw: 相对于视图窗口的宽度，规定1vw即为当前屏幕宽度的1%
vh: 相对于视口的高度，……1%。（因高度数字分100份后，不便于计算，使用较少）
vm: 相对视口高或宽中，取最小的，即vw | vh。（使用较少）
em: 相对单位长度，相对于父级的字体尺寸。(受直接父级font-size的影响，变动大，不能用来做全局自适应)
rem: 相对单位长度，相对于根html的字体尺寸。不受非html外的font-size的影响，常结合js用来做页面自适应

常用页面自适应方法：
1、百分比，不推荐，因为高度不好做自适应，容器容易变形

2、媒体样式，对自适应要求不高的pc端网站可用。移动端不推荐，因移动端的终端类型太多，使用此种方式，很难兼容所有机型。

3、px转换vw的加载器实现自适应（推荐使用）
因 vw=视图窗口宽度/100 , 以ipone6/7/8为标准的设计稿为750px，则此时 vw= 750/100 = 7.5px，等价于 1px=1/7.5 vw。
当然，开发过程中，设计稿给出的都是px单位，这里我们也不需要自己去算px转化为vw的具体值。
可以借助px转换vw的加载器style-vw-loader或者动态语言px to vw实现自动转化。

4、rem单位结合js实现自适应（推荐使用，h5页面使用较多的方式）
因为rem是相对于html上的font-size的单位。所以可以根据js算出html的动态根font-size，标准设计稿下根font-size可以设置为设计稿的二十分之一（注意这里可以为任意分值，只要和px转化为rem的倍数相同即可，这里除以20倍，是用了便于计算） font-size = 750/20 = 37.5，则此时1rem=37.5px，然后结合动态语言sass/less/scss将px转化为rem单位，实现页面自适应。

5、使用固定长度单位px，再使用js根据当前屏幕宽度与固定宽度计算比例，进行网页缩放，来实现移动端屏幕自适应。
可以使用js操纵meta标签中的initial-scale（即网页初始缩放比例）的方式进行网页缩放。

具体参考 移动端屏幕宽度自适应原理及实现

2、移动端性能优化

1、按需加载
路由懒加载、滚动加载、显性加载（趣味loading条）、隐形加载（预加载）

2、图片资源的优化
利用JS或CSS判断分辨率，选择不同尺寸的图片进入，加快加载速度和节省流量

webP：WebP格式的图片谷歌（google）开发的一种旨在加快图片加载速度的图片格式。但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
srcset：除了opera浏览器，现有的主流浏览器最新版本都已支持。

<img src="low-res.jpg" srcset="high-res.jpg 2x"> 

requestAnimationFrame：简称(RAF)专门为实现高性能的帧动画而设计的一个API，目前安卓上的原生浏览器并不支持
（1）requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧
（2）隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
（3）requestAnimationFrame也会像setTimeout一样有一个返回值ID用于取消，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调

3、 点击事件
在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的click事件。Click之所以慢是因为mousedown导致的

4、canvas动画与css3动画
尽量使用css3动画（不占用JS主线程 通常不阻塞 可利用硬件加速 但是不支持中间状态的监听）
适当使用canvas动画（规避渲染树的计算渲染更快 但是开发成本较高 维护较麻烦）
5个元素以内使用css3动画，5个以上使用canvas动画。

3、CSS Hack

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla
Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS
hack为不同版本的浏览器定制编写不同的CSS效果。

注意： 我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器（chrome）、火狐（Mozilla Firefox）即可，至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核，所以只需要兼容以上浏览器即可兼容TT傲游浏览器。

常见的3种形式：
1、属性级Hack：比如IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。

2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。

3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

注：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*；不能识别 !important ;IE7能识别*，能识别!important;FF不能识别*，但能识别!important;

参考文献 css Hack

4、HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

5、什么是FOUC?如何解决？

FOUC（Flash of Unstyled Content）文档样式短暂性失效
important 引入的css ，有时会导致在window下的ie浏览器上以无样式的页面内容瞬间闪烁的想象。

出现这种情况的主要原因是： css样式表的加载晚于了html结构的渲染。

原因可能有：
1、将样式表放于页面底部了
2、是用important 引入的样式表
3，有几个样式表，放在html结构的不同位置。

解决方式：
1、将样式表放于文档HEAD中
2、改用<link rel="stylesheet" href="style.css"> 方式引入
3、文件放到cdn上

6、什么是DIV高度塌陷？如何解决？

高度坍塌：父级元素，未设置高度，子元素有浮动样式，此时，父元素的高度为0的情况。
解决方式：
1、父元素也设置浮动，在其同级的下一个元素上清除浮动，clear：both
2、使用overflow:hidden, zoom:1, overflow:hidden属性会强制父级元素扩大到包含浮动元素，zoom:1只是触发IE6的hasLayout模式，不会对其他浏览器产生影响。
3、使用**:after伪类清除浮动**