减少HTTP请求。

因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript;b) 合并小图片,使用雪碧图(CSS SPRITE)

    1. Css与js的压缩合并可以使用在线工具
    2. a.

http://tool.oschina.net/jscompress/

      b.

https://tool.lu/js

    2.合并小图片,雪碧图;

借用图片处理工如:美图秀秀,ps等

将多张小图片合成后的使用办法;

.test {background:url(../images/test-css_sprite.jpg) no-repeat 0px -262px ; }  /*向下移262px   (0,0)  ->  (0,-262)    */

Code: https://github.com/Thinkia/Page_Optimization/blob/master/Optimization_html/Loading/test-css_sprite.html

Demo:

https://thinkia.github.io/Page_Optimization/Optimization_html/Loading/test-css_sprite.html

web前端加载优化-减少HTTP请求 (细节与办法)的更多相关文章

  1. WEB前端的性能优化

    转自:http://www.2cto.com/kf/201604/498725.html 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发 ...

  2. 页面优化——减少HTTP请求数

    1.关于减少http请求数 关于减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则:减少http请求数. 先不考虑其他的,我们先考虑为什么减少http ...

  3. Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题

    问题如题:Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题 解决办法:通过火狐浏览器工具发现是时间格式不对的原因,需要将时间格式修改为:yyyy-MM--DD   ...

  4. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  5. web页面加载速度缓慢,如何优化?

    参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...

  6. 从架构层面谈web加载优化(个人整理)

    最近听了阿里一位大牛的讲座,讲web架构优化对网页加载的影响,看完之后对他所讲的一些优化方法进行一些总结和整理,发现收获还是蛮多的,下面多为个人整理和个人见解,希望有说的不对的,能及时指出 1.DNS ...

  7. paip.前端加载时间分析之道优化最佳实践

    paip.前端加载时间分析之道优化最佳实践 1.另存为 ,查看文件尺寸..和图片. 2.view the 另存为的htm静态的文件单个的加载,看时间...可以排除编程语言的问题and 数据库.. ## ...

  8. 几种优化web页面加载速度的策略

    剥离静态资源请求到CDN 一般在主域名下的HTTP请求里都会携带大量Cookie信息,最大4KB,每个域名下最多50条:但如果仅仅访问js/css/jpeg等静态资源文件的话是不需要Cookie信息, ...

  9. 现代WEB前端的性能优化

    现代WEB前端的性能优化 前言:这只是一份学习笔记. 什么是WEB前端 潜在的优化点: DNS是否可以通过缓存减少DNS查询时间? 网络请求的过程走最近的网络环境? 相同的静态资源是否可以缓存? 能否 ...

随机推荐

  1. java容器类分析:Collection,List,ArrayList

    1. Iterable 与 Iterator Iterable 是个接口,实现此接口使集合对象可以通过迭代器遍历自身元素. public interface Iterable<T> 修饰符 ...

  2. android的Live架构

    MVC.MVP.MVVM的选择 一开始我们在这几种框架上的选择上就没花太多的心思,因为他们都只是为了实现清晰的分层逻辑,差异化的地方无非是讲UI逻辑.交互逻辑.数据绑定逻辑.业务逻辑堆放在那一层的问题 ...

  3. NLP︱词向量经验总结(功能作用、高维可视化、R语言实现、大规模语料、延伸拓展)

    R语言由于效率问题,实现自然语言处理的分析会受到一定的影响,如何提高效率以及提升词向量的精度是在当前软件环境下,比较需要解决的问题. 笔者认为还存在的问题有: 1.如何在R语言环境下,大规模语料提高运 ...

  4. PCI9054 DMA设置流程

    1.设置方式寄存器:设置DMA通道的传输方式,寄存器DMAMODE0或者DMAMODE1的位9:0-表示块传输,1-表示散/聚传输: 2.设置PCI地址寄存器:设置PCI总线侧的地址空间. 3.设置L ...

  5. UBOOT添加命令的执行流程

    BootLoader(引导装载程序)是嵌入式系统软件开发的第一个环节,它把操作系统和硬件平台衔接在一起,对于嵌入式系统的后续软件开发十分重要,在整个开发中也占有相当大的比例.U-BOOT是当前比较流行 ...

  6. phpexcle 导出数据 日期格式的问题

    在使用phpexcle 读取excle中日期格式的出现了问题.特此记录 gmdate("Y-m-d H:i:s", PHPExcel_Shared_Date::ExcelToPHP ...

  7. Eviews 8.0&9.0界面新功能介绍

    Eviews 8.0&9.0界面新功能介绍 本文其中一些是自己的整理,也有一些是经管之家论坛中一位热心.好学坛友的整理,其中只是简单介绍一下这两个新版本的部分特性,分享出来,有兴趣的看客可以一 ...

  8. freemarker自定义标签报错(二)

    freemarker自定义标签 1.错误描述 freemarker.core.ParseException: Unexpected end of file reached. at freemarker ...

  9. FtpHelper ftp操作类库

    FtpHelper ftp操作类库 using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  10. 最小生成树 TOJ 4117 Happy tree friends

    链接http://acm.tju.edu.cn/toj/showp4117.html 4117.   Happy tree friends Time Limit: 1.0 Seconds   Memo ...