首页 > 其他分享 >移动端H5前端性能优化指南

移动端H5前端性能优化指南

时间:2022-10-27 20:36:50浏览次数:53  
标签:指南 CSS3 缓存 前端 H5 使用 优化 CSS 加载


加载优化

1、合并CSS、JavaScript

2、合并小图片

3、缓存一切可以缓存的资源

4、使用长Cache,在服务器端设置缓存。

5、使用外联式引用CSS、JavaScript

6、压缩HTML、CSS、JavaScript

7、启动GZip,在服务器端设置

8、启动首页加载

9、使用按需要加载

10、使用滚屏加载

11、通过Media Query加载

12、增加Loading进度条

13、减少Cookie

14、避免重定向

15、异步加载第三方资源

图片优化

1、使用智图压缩图片

2、CSS3、SVG、IconFont代替图片

3、使用Srcset

4、使用webP 优于JPG

5、PNG8优于GIF

6、首次加载不大于1014KB

脚本优化

1、减少重绘和回流

2、缓存Dome选择与计算

3、缓存列表length

4、尽量使用事件代理,避免批量绑定事件

5、尽量使用ID选择器

6、使用touchstart、touchend代替click

CSS优化

1、CSS写在头部,JavaScript写在尾部,要么就异步

2、避免图片和iFrame的空 Src

3、尽量避免重设图片大小

4、图片尽量避免使用DataURL

5、不要在HTML标签中写style样式

6、避免CSS表达式

7、移除空的CSS规则

8、正确使用Display属性

9、不要滥用float

10、不要滥用使用Web字体

11、不要声明过多的font-size

12、像素为0时不需要任何单位

13、标准化各种浏览器的前缀

14、避免让选择符看起来像正则表达式

渲染优化

1、HTML使用Viewport适配(移动端适配)

2、减少Dom节点

3、尽量使用CSS3动画

4、合理使用requirestAnimationFrame代替setTimeout

5、适当使用canvas动画

6、Touchmove、Srcoll会导致多次渲染

7、使用CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、webGL、video来渲染CPU


标签:指南,CSS3,缓存,前端,H5,使用,优化,CSS,加载
From: https://blog.51cto.com/u_12344418/5801925

相关文章

  • 移动前端viewport的基础概念
    在PC端,视口指的是浏览器的可视区域,其宽度和浏览器的宽度一致,在css标准文档中,视口是所有CSS百分比宽度计算基础,为CSS布局限制了一个最大的宽度。viewport在移动端是一个很重......
  • 前端性能优化(图片优化)
    从输入URL到页面加载完成的过程:首先通过DNS(域名解析)把URL解析为对应的IP地址,然后与该IP地址确定的服务器建立起TCP网络连接。随后向服务器发送HTTP请求,服务器处理完HTTP请求......
  • 禅道项目管理软件怎么使用?功能、价格、使用指南、优缺点,以及4大类似项目管理工具介绍
    本文将全面介绍禅道项目管理软件,包含功能、收费、购买方式、使用方法、优缺点、类似禅道项目管理软件的其他产品等。禅道成立于2010年,致力于为开发者提供高效的研发协同......
  • 前端学习笔记-响应式设计-20221027
    HTML响应式Web设计1.定义:能够以可变尺寸传递网页。RWP(ResponsiveWebDesign),对于平板和移动设备是必须的。响应式网页设计基于流动布局(FluidGrid)技术,有效解决......
  • 前端Vue2-Day60
    Vue路由:vue-router(实现SPA应用) SPA应用:①单页web应用。②整个应用只有一个完整的页面。③点击页面中的导航链接不会刷新页面,只会做页面的局部更新。④数据需要......
  • Vue面试题41:如何监听vuex状态变化?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    vuex数据状态是响应式的,所以状态变视图跟着变,但是有时还是需要知道数据状态变了从而做一些事情,既然状态都是响应式的,那自然可以使用watch,另外vuex也提供了订阅的API:stor......
  • vue+mysql实现前端对接数据库
    下载引入相关依赖1、cnpminstall--savemysql2、cnpminstall--saveaxios3、cnpminstall--savebody-parser4、cnpminstall--saveexpress5、cnpminstall--......
  • 前端项目管理器指令
    我之前把npm的代理设置为了淘宝镜像设置npmconfigsetregistryhttps://registry.npmmirror.com/获取npmconfiggetregistry然后在安装一个最新更新的包时,产生了......
  • 前端高频vue面试题合集
    路由的hash和history模式的区别Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。1.hash模式简介:hash模式是开发中默认的模式,它的URL带着一个#......
  • Vscode自动生成文件注释和函数注释插件使用指南
    一、插件安装插件名:koroFileHeade插件安装二、插件配置打开配置文件添加配置//函数注释CTRL+ALT+T"fileheader.cursorMode":{"Fu......