web移动端性能调优及16ms优化

本文只是一个索引,收集了网络上大部分关于调试及优化方面的文章,从中挑选了一些比较好的文章分享给大家。

移动端性能不及桌面浏览器性能的10分之1,特别是在android设备良莠不齐的情况下,性能显得尤为重要。感觉做移动端页面,重回了解放前电脑还是386的年代,呵呵。

国内,16ms优化,60fps指标等相关的文章非常少,大部分还是翻译国外的一些优秀文章,非常感谢这些翻译者对web前端的贡献,让我等英文盲能及时了解前沿技术哈。

在进行毫秒级的优化时,了解浏览器的工作原理非常重要,这是晋级优秀程序员的关键。就像写win客户端软件的,总会去了解一下计算机组成原理、操作系统原理等。而我们做web页面的,了解浏览器工作原理也是一样的道理

浏览器的工作原理

浏览器的工作原理:新式网络浏览器幕后揭秘

页面渲染的GPU加速技术 – 基础:WebKit软件渲染模式

Chrome 渲染优化 – 层模型

理解WebKit和Chromium: WebKit渲染基础

理解WebKit和Chromium: Chromium的GPU硬件加速

掌握调试方法

掌握调试方法比记住别人总结的结论更重要,所谓授人以鱼如授人以渔。根据实际业务发现其页面的瓶颈,才能制定对应的优化方案。

调试方法主要是使用chrome的开发者工具进行调试,学会如何使用timeline并结合Rendering选项里的内容发现性能瓶颈

【译】Android上的远程调试

【推荐】使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能

使用Chrome工具来分析页面的绘制状态

Chrome DevTools

Profiling Mobile HTML5 Apps With Chrome DevTools

浏览器自带开发工具的秘密
里面有写到本地电脑如何连接手机,通过chrome查看网页。(安装ADB插件)

Navigation Timing API

Explore and Master Chrome DevTools
几个简单的视频介绍 了解chrome devtools的相关知识

浏览器开发工具的秘密

移动端性能优化

web性能优化,其实不分PC端、移动端,优化思路及手法都是相通的,只是目前PC端,性能问题并不明显,很多时候被忽视了。
这里主要强调的是渲染优化及滚动优化,是微观层面上的毫秒级优化。

【推荐】16毫秒的优化
16毫秒的优化Web前端性能优化的微观分析

优化移动体验的HTML5技巧

开发基于web技术的高性能动画

复杂应用的 CSS 性能分析和优化建议

requestAnimationFrame for Smart Animating

前端性能优化:高频执行事件/方法的防抖
在移动端可使用requestanimationframe做优化

高性能移动端开发

rendering-without-lumps:

Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study

Web滚动性能优化实战

用HTML5实现iPad应用无限平滑滚动

滚动事件防抖和Reflow-重绘循环

改善HTML5网页性能-译

减少javascript垃圾回收

Images Slowing Down Your Site? Try This One Weird Trick!

如果以上的文章链接打不开,那估计是别人博客down掉了,你可以尝试google一下文章标题,也许会找到别人转载的文章。

我接触移动端其实并不久,很多优化知识还仅仅停留在在理论层面,并未真正实施体验过。移动端的优化路上,还有很长的路要走。

最后,丢一个我和荔枝同学一起写的PPT
若无法查看可点击链接查看

时间: 2024-12-15 06:36:04

web移动端性能调优及16ms优化的相关文章

性能调优之SQL优化

性能调优之SQL优化 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-84505200. 如何加快查询速度? 1.升级硬件 2.根据查询条件,建立索引,优化索引.优化访问方式,限制结果集的数据量. 3.扩大服务器的内存 4.增加服务器CPU个数 5.对于大的数据库不要设置数据库自动增长,它会降低服务器的性能 6.在查询Select语句中用Where字句限制返

记一次Web服务的性能调优

前言 一个项目在经历开发.测试.上线后,当时的用户规模还比较小,所以刚刚上线的项目一般会表现稳定.但是随着时间的推移,用户数量的增加,qps的增加等因素会造成项目慢慢表现出网页半天无响应的状况.在之前的工作中也恰巧遇到这个过程,当时对项目进行了很多性能测试和调优,今天借助博客园,将这次性能调优的过程进行整理后写成随笔,希望给广大Java后端开发的工程师提供帮助,也借此机会,对性能调优进行一些总结工作,达到备忘的目的. 测试工具与环境 性能测试工具 Loadrunner:一种预测系统行为和性能的负

Linux性能调优,从优化思路说起

Linux操作系统是一个开源产品,也是一个开源软件的实践和应用平台,在这个平台下有无数的开源软件支撑,我们常见的apache.tomcat.mysql.php等等,开源软件的最大理念是自由.开放,那么linux作为一个开源平台,最终要实现的是通过这些开源软件的支持,以最低廉的成本,达到应用最优的性能.因此,谈到性能问题,主要实现的是linux操作系统和应用程序的最佳结合. 一.性能问题综述 系统的性能是指操作系统完成任务的有效性.稳定性和响应速度.Linux系统管理员可能经常会遇到系统不稳定.响

数据库性能调优——sql语句优化(转载及整理)

下面是在网上搜集的一些个人认为比较正确的调优方案,如有错误望指出,定虚心改正 (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处理,在FROM子句中包含多个表的情况下,你必须选择记录条数最少的表作为基础表.如果有3个以上的表连接查询, 那就需要选择交叉表(intersection table)作为基础表, 交叉表是指那个被其他表所引用的表. (

MySQL基础普及《MySQL管理之道:性能调优、高可用与监控》

最近工作的内容涉及MySQL运维内容,陆陆续续读了几本相关的书,其中一本是<MySQL管理之道:性能调优.高可用与监控>. 内容涵盖性能调优(包括sql优化等).备份.高可用,以及读写分离等,对于普及MySQL基础非常有用.记录一下,以便于后面查阅. 附目录: 1章 MariaDB架构与历史1 1.1 MariaDB的介绍 1 1.2 MariaDB和MySQL的兼容性 2 1.3 MariaDB 10.0新增的功能 3 1.3.1 更多的存储引擎 4 1.3.2 速度的提升 5 1.3.3

web及性能调优

nginx 的性能调优 1 修改CPU的核心数对应的Nginx work进程 这个一般是你CPU核心数的两倍,方正是倍数,具体要几倍可看具体硬件配置 2 修改文件描述符  65536 ulimit -n 永久生效可改/etc/sysctl.conf 3 修改Linux内核的调度算法    epoll 4 修改连接数  在理论上来讲是工作进程数* 连接数 但是,Nginx的理论并发值是65536,所以 ..... 你懂得 5 在多少时间之内要达到多少的并发量就缓存,否则......  你懂得 6

web前端性能调优

web前端性能调优 最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心应手.参照了<高性能网站建设指南-前端工程师技能精髓>,本文主要主要概述前端的性能调优的方法. 第一条优化:减少http请求 一想到调优好多人都会想到减少http请求,但是可能好多人都会不知道具体操作,我一开始也不知道.项目刚好使用fis发现fis可以打包脚本和样式表.perf

36套精品Java高级课,架构课,java8新特性,P2P金融项目,程序设计,功能设计,数据库设计,第三方支付,web安全,高并发,高性能,高可用,分布式,集群,电商,缓存,性能调优,设计模式,项目实战,大型分布式电商项目实战视频教程

新年伊始,学习要趁早,点滴记录,学习就是进步! QQ:1225462853 视频课程包含: 36套Java精品高级课架构课包含:java8新特性,P2P金融项目,程序设计,功能设计,数据库设计,架构设计,web安全,高并发,高性能,高可用,高可扩展,分布式,集群,电商,缓存,性能调优,设计模式,项目实战,工作流,程序调优,负载均衡,Solr集群与应用,主从复制,中间件,全文检索,Spring boot,Spring cloud,Dubbo,Elasticsearch,Redis,ActiveMQ

提高 web 应用性能之 CSS 性能调优

CSS 性能调优 CSS 代码的分析与渲染都是由浏览器来完成的,所以,了解浏览器的 CSS 工作机制对我们的优化有至关重要的作用.这篇文章我们主要从如下几个方面入手来介绍一下 CSS 的性能优化: Style 标签的相关调优 特殊的 CSS 样式使用方式 CSS 缩写 CSS 的声明 CSS 选择器 把 Stylesheets 放在 HTML 页面头部: 浏 览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面,@import 就相当于是把 <link> 标签放在页面的底部