WebApp前端页面性能优化建议
字体设置
使用无衬线字体
body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878), 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁。
- Heiti SC Light 黑体-简 细体 (iOS 7后废弃)
- Heiti SC Medium 黑体-简 中黑
- Heiti TC Light 黑体-繁 细体
- Heiti TC Medium 黑体-繁 中黑
原生Android下中文字体与英文字体都选择默认的无衬线字体。
- 4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback
- 4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体。
基础交互
设置全局的CSS样式,避免图中的长按弹出菜单与选中文本的行为。
a, img {-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body {-webkit-user-select: none; /* 禁止选中文本(如无文本选中需求,此为必选项) */user-select: none; }
移动性能
要考虑Android低端机与2G网络场景下性能!
发布前必要检查项:
- 所有图片必须有进行过压缩
- 考虑适度的有损压缩,如转化为80%质量的jpg图片
- 考虑把大图切成多张小图,常见在banner图过大的场景
加载性能优化, 达到打开足够快。
- 数据离线化,考虑将数据缓存在 localStorage
- 初始请求资源数 < 4
- 图片使用CSS Sprites 或 DataURI
- 外链 CSS 中避免 @import 引入
- 考虑内嵌小型的静态资源内容
- 初始请求资源gzip后总体积<50kb
- 静态资源(HTML/CSS/JS/Image)是否优化压缩?
- 避免打包大型类库
- 确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间)
- 尽量使用CSS3代替图片
- 初始首屏之外的静态资源(JS/CSS)延迟加载
- 初始首屏之外的图片资源按需加载(判断可视区域)
- 单页面应用(SPA)考虑延迟加载非首屏业务模块
- 开启Keep-Alive链路复用
运行性能优化, 达到操作足够流畅
- 避免 iOS 300+ms 点击延时问题
- 缓存 DOM 选择与计算
- 避免触发页面重绘的操作
- Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行
- 尽可能使用事件代理,避免批量绑定事件
- 使用CSS3动画代替JS动画
- 避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
- HTML结构层级保持足够简单
- 尽能少的使用CSS高级选择器与通配选择器
- Keep it simple
转载于:https://www.cnblogs.com/yuesha/articles/5657375.html
WebApp前端页面性能优化建议相关推荐
- web前端页面性能优化SEO优化
首先什么叫网站? 网站一般分为前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页 ...
- 前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...
- 前端页面性能优化指标
前端页面性能优化指标 一.有哪些指标 LCP(Largest Contentful Paint) FID( First Input Delay) CLS(Cumulative Layout Shift ...
- 前端页面性能优化(完整归纳版)
前端页面性能优化 当优化前端页面性能时,可以从多个方面入手.以下是一些常见的优化技巧,使用 Markdown 格式展示: 1. 优化资源加载 压缩和合并文件:减少请求次数,通过压缩和合并 CSS.Ja ...
- 前端页面性能优化的几种方式
前端页面性能优化的几种方式 提升页面性能优化的常见方式: 资源压缩合并,减少http请求 非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别 利用浏览器缓存 --> ...
- web前端页面性能优化小结
一.提倡前端开发工程师在书写xhtml的时候做到结构语义化. 结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,he ...
- 前端网站性能优化建议
一.内容部分 • 尽量减少 HTTP请求 • 减少 DNS查找 • 避免跳转 • 缓存 Ajxa • 推迟加载 • 提前加载 • 减少 DOM元素数量 • 用域名划分页面内容 • 使 frame数量最 ...
- web前端页面性能优化(提升页面加载速度)
我们都知道,对于web应用来说性能很重要,然而性能的优化相关知识非常庞大而复杂,对于性能优化我们需要做些什么,或者瓶颈是什么通常是我们不太了解的.(当然技术大牛除外) 通过查阅相关资料,了解到了一些关 ...
- 按需加载图片、html代码、js代码,前端页面性能优化
加载一个比较长的页面,或者图片比较多的页面,如果把资源一次性全部加载,在网络不是很好的情况下可能造成页面留白现象,用户体验极差! 因此呢,我们可以把用户暂时不会看到或用到的资源先不加载,在某个条件下, ...
最新文章
- Ubuntu16.04+ROS+ORB-SLAM2测试(转载)
- 常用DBA SQL[转]
- HDU2966 In case of failure(浅谈k-d tree)
- 小巧玲珑的开源调度框架Azkaban3.0下载、编译、安装及使用详细文档
- 巧用CSS居中未知高度的块元素
- 烟台大学举办首届ACM程序设计大赛
- mybatis文档地址
- LabVIEW编程LabVIEW开发在LabVIEW中复用现有代码
- 曾国藩:人生的三个阶段,做对了,剩下就是好运气
- 使用WebGL 自定义 3D 摄像头监控模型
- 组织打羽毛球活动的一些心得
- unity+steamVR+VRTK开发环境的搭建
- Elastic-Job原理--简介与示例(一)
- matlab画图中该如何标注途中的某一点,以SIR模型为例
- 食油大学C++程序设计题解
- 9款好用的数据可视化工具推荐!
- [bind]rndc: connect failed: 127.0.0.1#953: connection refused
- NumberUtils简单介绍和具体实例
- 黑马程序员--OC之Foundation框架的使用
- 《纨绔世子妃》读后感
热门文章
- 资源管理器停止工作,自动重启
- python 工程结构加固_[原创]某企业级加固[四代壳]VMP解释执行+指令还原
- Python中的第三方模块(微信为例)
- 在一家公司产生倦怠感,如何化解?
- 书单|阅读让人越来越低
- DAOSquare将于今晚9点-12点进行两轮ITO
- Blockchain.com,Eden Block,DACM等知名公司加入Pocket生态
- PolkaFoundry等成立Polkadot区块链开发协会(PBDA)
- TokenInsight:反映区块链行业整体表现的TI指数较昨日同期上涨0.56%
- SAP License:BWBCS学习笔记20210304