移动端性能部分优化方法

从html、css和JavaScript方面

​ 外部内联问题:

​ 内部优点：减少http请求

​ 内部缺点：代码不利于维护（使用工程化工具）

​ 请求资源文件大

​ 代码不利于复用

​ 建议：首屏渲染需要使用的使用内部编写，其他地方需要使用到的资源采用外部引入。

​ 位置问题：css越早加载越好。js越晚加载越好(js加载会阻塞dom的渲染，所以放在尾部加载，但是如果布局相关的就要放在头部，否则会引起页面重排)。

图片问题

大、多

大（减少图片体积）

​ 图片压缩处理https://tinypng.com/

​ 使用更高压缩比格式的图片

​ webp

​ 尽量少使用图片，使用图标字体代替图片，css画图

多（减少请求次数）

​ 合理使用base64图片

​ 合并静态资源图片（雪碧图，手动合并）

dom问题

嵌套不要太多,减少不必要的嵌套

避免空链接

避免使用慢元素:table, iframe

主要内容和次要内容的排布,主体内容排前面，次要的排在后面

css选择器优化

选择器精简

不推荐使用通配符*

不推荐使用属性选择器

不要有空选择器

css属性优化

提取公共的css样式

合并分开的属性

不要使用@import url();

优先使用css3动画再使用js动画

移动端优先使用flex布局，不推荐使用float布局

js优化

加快单次dom操作（使用id）

减少dom操作

缓存dom

避免频繁的重排和重绘

事件优化

事件委托代替多个事件

事件节流. scroll mousemove. touchmove. resize

资源懒加载和预加载

图片懒加载