web移动端性能调优及16ms优化
本文只是一个索引,收集了网络上大部分关于调试及优化方面的文章,从中挑选了一些比较好的文章分享给大家。
移动端性能不及桌面浏览器性能的10分之1,特别是在android设备良莠不齐的情况下,性能显得尤为重要。感觉做移动端页面,重回了解放前电脑还是386的年代,呵呵。
国内,16ms优化,60fps指标等相关的文章非常少,大部分还是翻译国外的一些优秀文章,非常感谢这些翻译者对web前端的贡献,让我等英文盲能及时了解前沿技术哈。
在进行毫秒级的优化时,了解浏览器的工作原理非常重要,这是晋级优秀程序员的关键。就像写win客户端软件的,总会去了解一下计算机组成原理、操作系统原理等。而我们做web页面的,了解浏览器工作原理也是一样的道理
浏览器的工作原理
页面渲染的GPU加速技术 – 基础:WebKit软件渲染模式
理解WebKit和Chromium: Chromium的GPU硬件加速
掌握调试方法
掌握调试方法比记住别人总结的结论更重要,所谓授人以鱼如授人以渔。根据实际业务发现其页面的瓶颈,才能制定对应的优化方案。
调试方法主要是使用chrome的开发者工具进行调试,学会如何使用timeline并结合Rendering选项里的内容发现性能瓶颈
【推荐】使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
Profiling Mobile HTML5 Apps With Chrome DevTools
浏览器自带开发工具的秘密
里面有写到本地电脑如何连接手机,通过chrome查看网页。(安装ADB插件)
Explore and Master Chrome DevTools
几个简单的视频介绍 了解chrome devtools的相关知识
移动端性能优化
web性能优化,其实不分PC端、移动端,优化思路及手法都是相通的,只是目前PC端,性能问题并不明显,很多时候被忽视了。
这里主要强调的是渲染优化及滚动优化,是微观层面上的毫秒级优化。
【推荐】16毫秒的优化
16毫秒的优化Web前端性能优化的微观分析
requestAnimationFrame for Smart Animating
前端性能优化:高频执行事件/方法的防抖
在移动端可使用requestanimationframe做优化
Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
Images Slowing Down Your Site? Try This One Weird Trick!
如果以上的文章链接打不开,那估计是别人博客down掉了,你可以尝试google一下文章标题,也许会找到别人转载的文章。
我接触移动端其实并不久,很多优化知识还仅仅停留在在理论层面,并未真正实施体验过。移动端的优化路上,还有很长的路要走。
最后,丢一个我和荔枝同学一起写的PPT
若无法查看可点击链接查看
web移动端性能调优及16ms优化的更多相关文章
- 记一次Web服务的性能调优
前言 一个项目在经历开发.测试.上线后,当时的用户规模还比较小,所以刚刚上线的项目一般会表现稳定.但是随着时间的推移,用户数量的增加,qps的增加等因素会造成项目慢慢表现出网页半天无响应的状况.在之前 ...
- Java性能优化,操作系统内核性能调优,JYM优化,Tomcat调优
文章目录 Java性能优化 尽量在合适的场合使用单例 尽量避免随意使用静态变量 尽量避免过多过常地创建Java对象 尽量使用final修饰符 尽量使用局部变量 尽量处理好包装类型和基本类型两者的使用场 ...
- spark性能调优:资源优化
在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何设置 ...
- 转【Zabbix性能调优:配置优化】
转载:https://sre.ink/zabbix-turn-conf/ #通过日志可以分析当前服务状态.LogFile=/tmp/zabbix_server.log #日志文件路径.LogFileS ...
- 数据库性能调优——sql语句优化(转载及整理) —— 篇2
下面是在网上搜集的一些个人认为比较正确的调优方案,如有错误望指出,定虚心改正 (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析器按照从右到左的顺序处理FROM子句中 ...
- 性能调优之SQL优化
poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...
- MySql(八):MySQL性能调优——Query 的优化
一.理解MySQL的Query Optimizer MySQL Optimizer是一个专门负责优化SELECT 语句的优化器模块,它主要的功能就是通过计算分析系统中收集的各种统计信息,为客户端请求的 ...
- 数据库性能调优——sql语句优化(转载及整理) —— 篇1
一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用系统提交实 ...
- Apache Pulsar 在 BIGO 的性能调优实战(上)
背景 在人工智能技术的支持下,BIGO 基于视频的产品和服务受到广泛欢迎,在 150 多个国家/地区拥有用户,其中包括 Bigo Live(直播)和 Likee(短视频).Bigo Live 在 15 ...
随机推荐
- AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 ...
- IT人学习方法论(二):学习误区
之前我们讨论了“学什么”的问题,今天我们来谈一谈“怎么学”的问题.磨刀不误砍柴工,我们要提高学习效率,首先需要找到自己学习方法上的误区. 一些常见的学习方法误区 1)资料导向型 现在就停止阅读这篇文章 ...
- MVC – 5.MVC设计模式和.NetMVC框架
MVC模式-设计模式 •控制器(Controller)- 负责转发请求,对请求进行处理. •视图 (View) - 界面设计人员进行图形界面设计. •模型 (Model)-业务逻辑.数据.验证规则.数 ...
- JavaWeb学习之tomcat安装与运行、tomcat的目录结构、配置tomcat的管理用户、web项目目录、虚拟目录、虚拟主机(1)
1.tomcat安装与运行双击tomcat目录下的bin/startup.bat,启动之后,输入http://localhost:8080,出现安装成功的提示,表示安装tomcat成功 2.tomca ...
- pyinstaller打包pyqt文件
打包pyqt文件 如何将pyqt生成exe的二进制文件呢,pyinstaller就是这样的工具 可以将脚本文件.py 文件转换为编辑后的二进制文件,在进行发布 下面说下,如果打包 一. 安装: 下载地 ...
- MSSQL数据的批量插入
一.概述: 对于数据的批量插入操作似乎成了某些大数据量操作的必用手段,MSSQL也提供了一些数据批量插入的操作方法,先将这些方法汇总,以便于下次用到使用.面对数据的批量插入操作,我们也应该考虑一个问题 ...
- Flex导出excel报表
sheetToExcel.java 1 package tree; 2 import java.io.BufferedInputStream; 3 import java.io.File; 4 imp ...
- hdu 4063 福州赛区网络赛 圆 ****
画几个图后,知道路径点集一定是起点终点加上圆与圆之间的交点,枚举每两个点之间是否能走,能走则连上线,然后求一遍最短路即可 #include<cstdio> #include<cstd ...
- PHP isset()与empty()的使用区别详解(转)
通过对PHP语言的学习,应该知道它是基于函数的一款HTML脚本语言.庞大的函数库支持着PHP语言功能的实现.下面我们为大家介绍有关PHP函数isset()与empty()的相关用法. PHP的 ...
- Python与Hack之window下运行带参数的Python脚本,实现一个简单的端口扫描器
1.前提是:windows已经配置好Python的环境变量: 2.进入cmd命令行模式: **输入python命令,检测是否环境配置好:显示这样说明配置环境变量没问题 **用cd命令进入Python脚 ...