减少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. 为什么说DOM操作很慢

    转自http://www.cnblogs.com/yuzhongwusan/articles/5275933.html   一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大 ...

  2. XAF_GS_02_创建第一个XAF项目

    上一节我们讲解了如何安装XAF环境,这次我们要开始创建一个自己的XAF项目. Setp 1 第一步打开你的Visual Studio,新建项目,如下图所示,选择DevExpress XAF,选择好你的 ...

  3. spring的Profile使用对比和应用场景分析

    spring中存在这样一个功能,通过Profile来选择不同环境下的不同配置,说白了,就是通过设置一个参数来选择使用不同的数据,这个数据可能是一个bean,可能是一个xml文件,也有可能是一个prop ...

  4. Caffe、TensorFlow、MXnet三个开源库对比

    库名称 开发语言 支持接口 安装难度(ubuntu) 文档风格 示例 支持模型 上手难易 Caffe c++/cuda c++/python/matlab *** * *** CNN ** MXNet ...

  5. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  6. stm32开发之标准库的介绍

    1 STM32标准外设库概述 STM32标准外设库之前的版本也称固件函数库或简称固件库,是一个固件函数包,它由程序.数据结构和宏组成,包括了微控制器所有外设的性能特征.该函数库还包括每一个外设的驱动描 ...

  7. Java Breakpoint

    1.错误描述 Java Breakpoint Unable to install breakpoint in com.you.humb.web.commom.dao.impl.ExportDaoImp ...

  8. CentOS中对ext4文件系统做磁盘配额

    1.修改/etc/fstab文件,使ext4文件系统支持磁盘配额. UUID="9e6dc1e8-4fc1-4984-be38-524573572d41" /mnt/ext ext ...

  9. ASP.NET Core 新核心对象WebHost(一)

    以本系列文章向Fish 前辈的那篇我心中的ASP.NET 核心对象致敬.(虽然不知道前辈现在在干什么).一晃就6年过去了,那首 郝云 的<回到那一天>怎么唱来着? 时光一晃,你就三十了. ...

  10. 畅通工程 HDU - 1863

    省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).经过调查评估,得到的统计表中列出了有可能建设公路的若干条道 ...