减少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. 文本处理三剑客之grep&正则表达式

    grep是一个文本过滤工具,它支持正则表达式,能把搜索匹配到的行打印出来.grep的全称是Global Regular Expression Print(全局正则表达式)使用权限是所有用户. 一.gr ...

  2. python 常见错误和异常 函数 正则表达式及多线程编程

    生成随机密码#!/usr/bin/env python import stringfrom random import choice def gen_pass(num=9): all_chs = st ...

  3. mongodb去除重复的数据

    里边的内容在某些情况下不可行,可以参考下一篇. 今天出现了一个新的需求,有个部门需要拿到mongodb中的数据,要求去掉其中一个字段内容相同的数据. 虽然mongodb中有distinct来去重,但是 ...

  4. 神经网络ANN——SPSS实现

    神经网络[] 一.起源与历史 1.与传统统计方法的区别 传统线性回归模型可通过最小平方方法获取知识并在回归系数存储知识.在此意义下,其为神经网络.实际上,您可以证明线性回归为特定神经网络的特殊个案.但 ...

  5. 使用ffserver实现转发实时流媒体(摄像头捕获)

    本系统为ubuntu 10.04LTS 说明1:本实验在本机成功测试通过: 说明2:本实验仅仅测试了视频流,未测试音频流. 1.配置ffserver.conf -------------------- ...

  6. 【mongodb系统学习之六】mongodb配置文件方式启动

    六.mongodb可以用配置文件启动,配置文件配好后,每次指定文件就好,而不用每次写一长串: 1).创建配置文件: 2).配置(例如指定数据存储目录,日志存储文件,后台进程,端口号等): 3).配置文 ...

  7. MyEclipse无法部署项目

    1 错误描述 2 错误原因 3 解决办法

  8. offline页面开发常用方法及页面控件验证

    offline页面开发常用方法及页面控件验证,对一些CheckBoxList操作进行封装,新人可以直接使用该代码. 1.返回上一页网址 /// <summary> /// Descript ...

  9. Caused by:java.sql.SQLException:ORA-01008:并非所有变量都已绑定

    1.错误描述 Caused by:java.sql.SQLException:ORA-01008:并非所有变量都已绑定 2.错误原因 3.解决办法

  10. 【原】Java学习笔记031 - 常用类

    package cn.temptation; public class Sample01 { public static void main(String[] args) { /* * 类 Math: ...