移动端性能优化

最新推荐文章于 2024-05-03 19:19:43 发布

Magic_小小阿昕

最新推荐文章于 2024-05-03 19:19:43 发布

阅读量519

点赞数

分类专栏：前端 knowledge

本文链接：https://blog.csdn.net/Amo__/article/details/105341809

版权

本文介绍了移动端性能优化的各种策略，包括网络加载优化如首屏数据预加载、资源并行加载；缓存利用，如利用localStorage实现离线应用；图片优化如图片压缩、使用base64编码；脚本优化如使用事件代理、避免eval和with；渲染优化如使用CSS3动画、固定Viewport；以及架构协议优化，如使用SPDY和HTTP 2。

摘要由CSDN通过智能技术生成

性能优化：

网络加载类：

1、首屏数据请求提前，避免js文件加载后才请求数据。这样可以极大程度的缩短页面内容的渲染时间。
2、非首屏内容滚屏加载，保证首屏内容最小化。
3、模块化资源并行加载：在移动端资源加载中，尽量保证JavaScript资源并行加载，主要指的是模块化JavaScript资源的异步加载，例如AMD的异步模块，使用并行的加载方式能够缩短多个文件资源的加载时间。
4、inline首屏加载时写入必备的css和js避免首屏加载出现空白。
5、meta标签里面写入 cdn预解析目的是为了让浏览器提前解析获取静态资源的主机IP，避免等到请求时才发起DNS解析请求，在移动端HTML中可以采用以下方式完成。

作用：开启自动解析功能作用：关闭自动解析功能 DNS支持的浏览器：火狐，谷歌，Safari，Opera, IE9 6、资源的预加载：对于移动端首屏加载后可能会被使用的资源，需要在首屏加载完成加载后尽快进行加载，保证在用户需要浏览器时已经加载完成。 7、合理利用MTU策略通常情况下，我们认为TCP网络传输的最大传输单元(Maximum Transmission Unit，MTU)为1500B，即网络一个RTT(Round-Trip Time，网络请求往返时间)时间内可以传输的数据量最大为1500字节。因此，在前后端分离的开发模式中，尽量保证页面的HTML内容在1KB以内，这样整个HTML的内容请求就可以在一个RTT时间内请求完成，最大限度地提高HTML载入速度。