http://www.web008.net

美高梅手机版:手提式有线电话机活动页图片质量优化分享

手机活动页图片性能优化分享

2018/01/04 · 基础技术 · 1 评论 · 性能优化

原文出处: 火头军人/摩洛克义伸   

 

美高梅手机版 1

(点击上方公众号,可快速关注)

前沿

页面性能优化包括很多方面,而其中图片优化是其中最为重要的一环,特别是对于以图片为主页面而言。此次主要分享我们在手机活动页中对于图片的优化分享心得。

style="font-size:14px;line-height:25.6px;">来源:火头军人/摩洛克义伸

style="font-size:14px;line-height:25.6px;">

正文

话说四海八荒之内优化手段非常多,但无疑都是围绕着这3个方向来进行优化的:缩短请求响应时间、减少请求数、减少请求大小

前沿

页面性能优化包括很多方面,而其中图片优化是其中最为重要的一环,特别是对于以图片为主页面而言。此次主要分享我们在手机活动页中对于图片的优化分享心得。

美高梅手机版,缩短请求响应时间

正文

话说四海八荒之内优化手段非常多,但无疑都是围绕着这3个方向来进行优化的:缩短请求响应时间、减少请求数、减少请求大小

1 域名收敛

我们明白,页面资源请求过程是这样的:

缩短请求响应时间

DNS解析 –> 请求等待 –> 发送http请求 –> 服务器响应 –> 接收数据
1 域名收敛

我们明白,页面资源请求过程是这样的:

我们明白,典型的DNS解析过程是这样的:

DNS解析 --> 请求等待 --> 发送http请求 --> 服务器响应 --> 接收数据
浏览器缓存 –> Hosts文件/系统缓存 –> 本地域名服务器–> 向上迭代查询

我们明白,典型的DNS解析过程是这样的:

PC端老套优化经验告诉我们,浏览器针对同一个域名有并发请求数量限制,而PC页面展示区域宽,内容丰富,图片需求量大。为了突破这个限制,静态资源采用多个子域名,特别是针对图片域名,比如目前京东商城PC页面用到的商品图片域名就是 img10.360buyimg.com~img14.360buyimg.com。

移动端情况和PC有两方面比较明显的差别,一个是展示区域小,另一个是网络情况差。展示区域小意味着同时间内需要并发请求的资源相对要少,对于突破浏览器单域名下并发请求限制需求并不强烈。网络情况差代表着,花销在域名解析上的时间会凸显,特别是当请求域名在没有被缓存的情况下(比如首次访问)。所以手机端图片域名我们统一到了一个域名 m.360buyimg.com 上。

浏览器缓存 --> Hosts文件/系统缓存 --> 本地域名服务器--> 向上迭代查询
2 使用CDN

这个老生常谈了,但是真的必须有,每个请求都尽可能访问离自己最近的服务器上,那么响应时间肯定是最短的

减少请求数

PC端老套优化经验告诉我们,浏览器针对同一个域名有并发请求数量限制,而PC页面展示区域宽,内容丰富,图片需求量大。为了突破这个限制,静态资源采用多个子域名,特别是针对图片域名,比如目前京东商城PC页面用到的商品图片域名就是 img10.360buyimg.com~img14.360buyimg.com。

移动端情况和PC有两方面比较明显的差别,一个是展示区域小,另一个是网络情况差。展示区域小意味着同时间内需要并发请求的资源相对要少,对于突破浏览器单域名下并发请求限制需求并不强烈。网络情况差代表着,花销在域名解析上的时间会凸显,特别是当请求域名在没有被缓存的情况下(比如首次访问)。所以手机端图片域名我们统一到了一个域名 m.360buyimg.com 上。

1 必须缓存

这个没有太多可说的。缓存了下次就不会请求了,检查图片响应头设置,图片缓存时间必须非常非常非常长

2 使用CDN

这个老生常谈了,但是真的必须有,每个请求都尽可能访问离自己最近的服务器上,那么响应时间肯定是最短的

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。