减少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. [php] in_array 判断问题(坑)

    <?php $arr = array("Linux"); if (in_array(0, $arr)) { echo "match"; } ?> 执 ...

  2. python批量修改文件内容及文件编码方式的处理

    最近公司在做tfs迁移,后面要用新的ip地址去访问tfs 拉取代码  ,所以原来发布脚本中.bat类型的脚本中的的ip地址需要更换 简单说下我们发布脚本层级目录 :每个服务站点下都会有一个发布脚本 . ...

  3. Zookeeper笔记1-CAP/BASE理论

    分布式系统八大谬论: 1.网络相当可靠 2.延迟为0 3.传输带宽是无限的 4.网络相当安全. 5.拓扑结构不会改变 6.必须要有一名管理员 7.传输成本为0 8.网络同质化. 分布式最常出现的问题: ...

  4. SQL Server 死锁的告警监控

    今天这篇文章总结一下如何监控SQL Server的死锁,其实以前写过MS SQL 监控错误日志的告警信息,这篇文章着重介绍如何监控数据库的死锁,当然这篇文章不分析死锁产生的原因.以及如何解决死锁.死锁 ...

  5. 笔记︱图像语义分割(FCN、CRF、MRF)、论文延伸(Pixel Objectness、)

    图像语义分割的意思就是机器自动分割并识别出图像中的内容,我的理解是抠图- 之前在Faster R-CNN中借用了RPN(region proposal network)选择候选框,但是仅仅是候选框,那 ...

  6. android的Live架构

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

  7. directdraw显示rgb555

    // TODO: 在此添加控件通知处理程序代码  height=width=widthBytes=0;  m_screen.SetWindowPos(&CWnd::wndBottom,0,0, ...

  8. apache配置,禁止ip访问web站点

    由于一台服务器上面部署了好几个应用,对应不同的域名,如果用户知道ip地址的话,直接用户ip地址访问,会显示第一个虚拟主机的页面(更改了虚拟主机的顺序,每次都是显示第一个).这样对用户造成不好的印象,所 ...

  9. Flex中通过RadioButton进行切换

    1.页面切换 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx=& ...

  10. xml的xPath解析规则

    一,为什么要用xpath技术 问题:当使用dom4j查询比较深的层次结构的节点(标签,属性,文本),比较麻烦!!! 二,xpath的规则 2.1,/根元素的案例 /AAA 选择根元素AAA       ...