【译】Optimize for mobile-移动端优化
移动端优化
由于移动设备有限的CPU处理能力,移动网络的高往返时间,以及移动应用的快速增长,对移动端的理解以及优化相对于PC端来讲变得更加重要。Page Speed Insights 现在可以让你轻松地分析和优化您的移动端网站的性能。下面讲的很多移动端的最佳优化方案也同样适用于PC端,所以这些建议也包含在PC端浏览器的网页速度分析报告中。
推迟JavaScript的解析
概览
为了加载一个页面,浏览器必须解析所有 <SCRIPT>标签的内容,这额外的增加了页面的加载时间。最小化页面加载所需的JavaScript,推迟解析JavaScript直到需要执行的时候,通过这种方式你可以有效降低页面初始加载时间。
详细介绍
有几种方式可以用来推迟JavaScript的解析。最简单同时又是最优的方式是简单地延迟JavaScript的加载,直到需要的时候。第二种方法是在适当的时候使用<script async>属性,将它推迟到UI线程比较空闲的时候加载,以此来阻止对页面加载造成的阻塞。如果这些技术都不合适,在移动应用中,下面还有一些额外的常用技巧:
当构建移动应用程序时,预先加载所有需要使用的JavaScript非常重要,这样就算用户处于脱机状态仍然能够继续使用。在这种情况下,一些应用,如移动Gmail,发现在注释(comments)中加载Javascript并且直到需要使用时才eval()这种方式非常有用。这种方法保证了所有的JavaScript在初始页面时加载,但是不要求去解析这些JavaScript。
在注释(comments)中存储代码的一种替代方式是在JavaScript字符串常量中存储代码。当使用这种技术时,Javascript只有在需要的时候通过再次调用eval()对JavaScript字符串常量进行解析。这种方式同样可以让应用程序预先加载Javascript,但推迟解析,知道需要使用的时候。
请注意,将<SCRIPT>标签移到页面的尾部是次优的,因为浏览器在将Javascript解析完之前将一直呈现一个繁忙的状态。用户可能会等到页面加载状态显示完全加载完毕才会进行页面操作,所有,最大限度地减少浏览器中显示的页面加载完成的时间是很重要的。
在2011年初进行的测试中,我们发现,在现代移动设备,JavaScript每增加1千字节,页面总的加载时间将会多出1ms的js解析时间。因此,页面初始化加载时100KB的Javascript对用户来讲会增加100ms的加载时间。因为每次访问页面时JavaScript都将被解析,这些时间将会成为每个页面加载时间的一部分,不管是从网络加载,还是通过浏览器的缓存,又或者是使用HTML5的离线模式。
使登陆页(着陆页,landing page)重定向可缓存
概览
很多页面,尤其是移动页面,会将用户重定向到一个不同的URL,例如从www.example.com 到m.example.com。通过让用户的浏览器对此重定向进行缓存可以在用户重复访问该网站时加快页面加载时间。
详细介绍
如果可能的话解决重定向最好的方式是删除重定向,但有些情况下确实很难取消登录页重定向,尤其是重定向到移动端网站。举例来说,一个网站的移动版本部署在不同的Web服务器上,这就要求访问时重定向到一个不同的域名。在这种情况下,使重定向到移动特定的网站的请求可缓存,以减少用户重复访问页面加载的时间就非常重要。如果您的网站的移动版本与PC站点是使用的同样的web服务器,你就不应该使用重定向到移动版本的方式而是应该使用与PC站点同样的URL。
建议
移动专用站点的重定向必须是私有高速缓存,以防止代理服务器将移动站点重定向给非移动用户。我们建议您使用302重定向,并存缓存一天。重定向应包括一个Vary:User-Agent 头以及一个Cache-Control:private头。这些头防止代理服务器将移动专用站点重定向给非移动用户。您可能还需要包括一个Expires头,以防止旧的HTTP/1.0代理缓存这些重定向然后发给非移动用户。
【译】Optimize for mobile-移动端优化的更多相关文章
- 全面解密QQ红包技术方案:架构、技术实现、移动端优化、创新玩法等
本文来自腾讯QQ技术团队工程师许灵锋.周海发的技术分享. 一.引言 自 2015 年春节以来,QQ 春节红包经历了企业红包(2015 年).刷一刷红包(2016 年)和 AR 红包(2017 年)几个 ...
- OPTIMIZE TABLE linked list 表优化原理 链表数据结构 空间再利用
小结: 1.加快读写: 2.对于InnoDB表,在一定条件下,通过复制旧表重建: 3.实践中, 3.1.show processlist;查看线程,发现,认为堵塞读请求: 3.2.数据长度空间不变,索 ...
- tagCould3d 移动端优化版
针对https://github.com/bitjjj/JS-3D-TagCloud这个版本的做了移动端性能优化(使用transform做偏移及缩放,优化帧).基本原理一致. class TagCou ...
- 【译】如何编写“移动端优先”CSS
原文链接:https://zellwk.com/blog/how-to-write-mobile-first-css/ 构建响应式网站是如今前端开发者的必备技能,当我们谈到响应式网站时,“移动端优先” ...
- 移动端优化 && 清除移动端网站点击a标签时闪现的边框或遮罩层(CSS) && 移动端点击 && 文字不可选择
在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为 ...
- PHP服务端优化全面总结
一.优化PHP原则 1.1PHP代码的优化 (1)升级最新的PHP版本 鸟哥PPT里的对比数据,就是WordPress在PHP5.6执行100次会产生70亿次的CPU指令执行数目,而在PHP7中只需要 ...
- jQuuery Mobile 移动端开发框架
jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTML5 和 CSS3 通过尽可 ...
- 【gRPC】C++异步服务端优化版,多服务接口样例
官方的C++异步服务端API样例可读性并不好,理解起来非常的费劲,各种状态机也并不明了,整个运行过程也容易读不懂,因此此处参考网上的博客进行了重写,以求顺利读懂. C++异步服务端实例,详细注释版 g ...
- [mobile]移动端页面没有重新请求时,刷新页面代码
<input type="hidden" value="yes" id="id_if_reload" /> <script ...
随机推荐
- <转>maven发布第三方jar的一些问题
在创建maven中私有仓库过程中,需要发布一些第三方jar到nexus仓库,使用命令的是 deploy:deploy-file 有许多参数,具体可查看 http://maven.apache.org/ ...
- W - stl 的 优先队列 Ⅲ
Description In a speech contest, when a contestant finishes his speech, the judges will then grade h ...
- How can I get the logical valume by the datafile names and ASM disks?
Q:We use asmlib to create ASM disk in Oracle rac 11.2.0.3, and how can I get the logical valume by t ...
- oracle recyclebin详解(闪回删除的表)
今天在SOA应用数据库上运用DBMS_REDEFITION包进行在线非分区表转换分区表操作时,本想DROP掉建的临时表cube_scope_temp不小心后面忘记加"temp"直接 ...
- 菜鸟的jQuery源码学习笔记(二)
jQuery对象是使用构造函数和原型模式相结合的方式创建的.现在来看看jQuery的原型对象jQuery.prototype: jQuery.fn = jQuery.prototype = { //成 ...
- WDLINUX (Centos5.8) 安装 bcmath
环境 centos5.8 php5.2.17 因为wdos 集成的php5.2.17为精简版,并未包含php52-bcmath扩展. 所以先下载完整php5.2.17源码包 wget -c http: ...
- 关于php输入$_post[‘’]报错的原因
在php中输入$_post[‘’]值时页面报错,是因为变量未声明,所以页面出现提示Undefined index,是因为首先要用isset来判断是否存在这个变量. 如:isset($_POST['/* ...
- WndProc Message消息解释
public class WindowsMessage { public const int WM_NULL = 0x0000; // public const int WM_CREATE = 0x0 ...
- linux命令之ls命令的简明讲解
我详细熟悉linux操作系统的同学对ls命令是再熟悉不过了因为我们通常使用该命令查看某个目录下的文件 其命令形式是:ls [选项] 目录或者文件 本文中主要讲解两个最常用的选项: -l:用于列出文件的 ...
- matlab-----均值滤波函数的实现
均值滤波的原理是对图像以一个区域(方形,圆形)等为模板,对该区域内的数据求平均后赋值给区域的中心 这种滤波方式原理简单,但是在滤波的同时会造成图像模糊. 本文将尝试对matlab中的filter2() ...