前端性能优化一

专题页面特性

1.图片量较大；

2.个别专题适配性比一般touch页面复杂；

3.性能问题（动画、小游戏比较多）；

4.可传播性；

 

图片规范

1.专题设计图片，大小控制在50K以下

图片必须通过压缩后再上传；

2.资源图片，大小控制在20K以下

不管同步或异步资源数据中图片均使用懒加载；

 

适配规范

1.通过zoom改变适配

以320px宽度为基准，通过获取页面可视区域宽度计算，在html标签上添加zoom属性值；

1 2	document.querySelector("html").style.zoom=document.documentElement.clientWidth/320; //注：该方式适用于页面上图文元素关系比较密切，需要精确适配

 

2.媒体查询方式适配

在可视区域不同的机型上，通过媒体查询定义不同机型上的根节点字体大小，定义需要适配的dom元素时用“rem”为单位；

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

.class{   width:2.5rem; }   @media screen and (min-width: 360px) {   font-size:**px; } @media screen and (min-width: 400px) {   font-size:**px; } @media screen and (min-width: 440px) {   font-size:**px; } @media screen and (min-width: 480px) {   font-size:**px; } @media screen and (min-width: 540px) {   font-size:**px; } @media screen and (min-width: 640px) {   font-size:**px; } /* 注：该方式适用于页面上图文适配变化时依赖性不强，某一方细微变化时不影响整体美观 */