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

移动端性能不及桌面浏览器性能的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
若无法查看可点击链接查看

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

  1. 记一次Web服务的性能调优

    前言 一个项目在经历开发.测试.上线后,当时的用户规模还比较小,所以刚刚上线的项目一般会表现稳定.但是随着时间的推移,用户数量的增加,qps的增加等因素会造成项目慢慢表现出网页半天无响应的状况.在之前 ...

  2. Java性能优化,操作系统内核性能调优,JYM优化,Tomcat调优

    文章目录 Java性能优化 尽量在合适的场合使用单例 尽量避免随意使用静态变量 尽量避免过多过常地创建Java对象 尽量使用final修饰符 尽量使用局部变量 尽量处理好包装类型和基本类型两者的使用场 ...

  3. spark性能调优:资源优化

    在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何设置 ...

  4. 转【Zabbix性能调优:配置优化】

    转载:https://sre.ink/zabbix-turn-conf/ #通过日志可以分析当前服务状态.LogFile=/tmp/zabbix_server.log #日志文件路径.LogFileS ...

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

    下面是在网上搜集的一些个人认为比较正确的调优方案,如有错误望指出,定虚心改正 (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE 的解析器按照从右到左的顺序处理FROM子句中 ...

  6. 性能调优之SQL优化

    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...

  7. MySql(八):MySQL性能调优——Query 的优化

    一.理解MySQL的Query Optimizer MySQL Optimizer是一个专门负责优化SELECT 语句的优化器模块,它主要的功能就是通过计算分析系统中收集的各种统计信息,为客户端请求的 ...

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

    一.问题的提出                    在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用系统提交实 ...

  9. Apache Pulsar 在 BIGO 的性能调优实战(上)

    背景 在人工智能技术的支持下,BIGO 基于视频的产品和服务受到广泛欢迎,在 150 多个国家/地区拥有用户,其中包括 Bigo Live(直播)和 Likee(短视频).Bigo Live 在 15 ...

随机推荐

  1. Clr Via C#读书笔记---计算限制的异步操作

    线程池基础 1,线程的创建和销毁是一个昂贵的操作,线程调度以及上下文切换耗费时间和内存资源. 2,线程池是一个线程集合,供应你的用程序使用. 3,每个CLR有一个自己的线程池,线程池由CLR控制的所有 ...

  2. CLR via C#(13)-浅谈事件

    提起事件,我们都不陌生,事件使类之间有了交互的能力.它是建立在委托基础上的.有了前面对委托的了解,相信读起事件来也不会太难了.关于事件,现成的好文章数不胜数,本不打算写了.不过问道有先后,各抒己见,也 ...

  3. EF – 2.EF数据查询基础(上)查询数据的实用编程技巧

    目录 5.4.1 查询符合条件的单条记录 EF使用SingleOrDefault()和Find()两个方法查询符合条件的单条记录. 5.4.2 Entity Framework中的内部数据缓存 DbS ...

  4. jQuery函数attr()和prop()的区别

    在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同. 但不得不说的是,这两个函数的用处却并不相同.下面我们来详细介绍这两个函数之间的区别. ...

  5. Analysis Services OLAP 概述2

    在DW/BI系统中,关系型数据库是存储和管理数据的最佳场所.但是关系数据库本身的智能化程度不够.关系型数据库缺乏如下功能: 丰富的元数据,帮助用户浏览数据和创建查询. 强大的分析计算和函数,在对上下文 ...

  6. <转> jsp:include 乱码问题解决

    jsp include页面出现乱码问题的几种通用解决方法: 1.当jsp include动态文件时(jsp文件)可以在被include的jsp文件头部加上代码: <%@ page languag ...

  7. Win10 for Phone 裁剪控件

    <Page.BottomAppBar> <CommandBar x:Name="appBar"> <AppBarButton Label=" ...

  8. 国内大学毕业论文 LaTeX 模板集合

    西北工业大学学位论文LaTeX模板 http://code.google.com/p/nwputhesis/ 西北工业大学硕博士论文LaTeX模版 http://code.google.com/p/n ...

  9. POJ 1655 Balancing Act 树的重心

    Balancing Act   Description Consider a tree T with N (1 <= N <= 20,000) nodes numbered 1...N. ...

  10. Java学习笔记(一)——HelloWorld

    一.安装JDK 1.下载链接: http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.直接安装,不能有中文路径 3. ...