1、图片懒加载

将图片src先赋值为一张默认图片，当用户滚动滚动条到可视区域图片的时候，再去加载后续真正的图片

如果用户只对第一张图片感兴趣，那剩余的图片请求就可以节省了。

懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验。图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。倘若一次ajax请求10张图片的地址，一次性把10张图片都加载出来，肯定是不合理的。

懒加载实现的原理

先将img标签中的src链接设置为空，将真正的图片链接放在自定义属性（data-original），当js监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到src中，达到懒加载的效果。

需要注意点：

屏幕可视区域的高度
每张图片在文档中的高度
图片符合要求进行加载时，将图片地址赋值给属性 src
对屏幕滚动事件进行监控
首次进入网页未滑动屏幕时要显示的图片

懒加载中涉及的属性

1 、document.documentElement.clientHeight; //表示浏览器可见区域高度：

document.body.clientHeight //是整个页面内容的高度，而非浏览器可见区域的高度

2 、document.documentElement.scrollTop; //滚动条已滚动的高度：

chrome 中 document.body.scrollTop //滚动条滚过的高度

那么要得到滚动条的高度：有一个技巧：

　　var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;

　　这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。

3、 offsetTop、offsetLeft

　　obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

　　obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

　　obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

　　obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

offsetParent 不同于parentNode ,offsetParent 返回的是在结构层次中与这个元素最近的position为absolute\relative\static的元素或者body

具体滚动时涉及的属性值，请参考https://blog.csdn.net/zh_rey/article/details/78967174非常详细

或者用jquery的插件：jQuery.lazyload();

40 <script src="jquery-3.2.1.slim.js"></script>
41 <script>
42     var wHeight=$(window).height(); //获取屏幕可视高度
43     $('img').each(function () {     //对图片进行循环
44         var ownHeight=$(this).offset().top;     //获取当前图片在文档中的位置
45         if(ownHeight<=wHeight){     //如果当前图片位置在屏幕可视范围之内加载此图片
46             $(this).attr('src',$(this).attr('data-original'));
47         }
48     });
49
50     $(window).on('scroll',function(){       //添加屏幕滚动事件
51         $('img').each(function () {
52             var hasSorollTop=$(window).scrollTop();     //获取屏幕已滚动高度
53             var ownHeight=$(this).offset().top;
54             if(ownHeight<=(hasSorollTop+wHeight+500)){
55                 //当图片在屏幕滚动时，距离可视区域500像素时加载此图片，
56                 // 以保证查看此图时，下面的一张以提前加载完成,设置为500是因为已经将图片设置为300px了。
57                 $(this).attr('src',$(this).attr('data-original'));
58             }
59         });
60     });
61 </script>

注意事项：

需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同，则只是一个特效而已，并不达到延迟加载的功能。

引申：data-url替换a标签

跳转用div加h5的自定义属性data-*,代替a标签：a标签有种种不确定性，比如在各种浏览器的表现形式不统一，而且鼠标hover的时候页面下方会有链接，显得很low。

而div+自定义属性，在js中获取链接，通过$('.new').attr('url')获取地址，然后把链接 window.href,这样做的目的是不暴露地址，有一些地址是隐藏的，在js处理可以有一个保护性，在html里面就直接能看到，还有在js里可以对http和https做处理，更加便利，window.location.protocol，这样按页面头信息，跳转，，还有就是按域名，比如你是测试机器，然后你在html写错了其实灵活性太不好。

data属性可以使用dataset拿到，是一个对象

使用dataset操作data 要比使用getAttribute和setAttribute速度稍微慢些，使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的

原文：https://blog.csdn.net/weixin_38026561/article/details/80606518

引申：

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验
（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串

简单来说就是存储一些简单信息，然后可以通过js拿到这些信息，
像你说的data-url和data-href估计就是存储的真正的url和href，
可以通过js的element.dataset.url或JQ的data('url')拿到，然后进行相应操作

原文链接：https://blog.csdn.net/longge9999/article/details/84812690

window.location.href 传中文乱码

本文链接：https://blog.csdn.net/qq_32902473/article/details/74942496

window.location.href url含中文服务器收到乱码问题解决

中文乱码问题

window.location.href url含中文服务器收到乱码问题解决

(1).页面中先对中文进行编码。

如：window.location.href = url+"&groupName=" + encodeURI(encodeURI(groupName)) ;

注意，页面部分需要编码两次。

(2).在服务端进行解码。
groupName= java.net.URLDecoder.decode(groupName, "UTF-8");

原文链接：https://blog.csdn.net/qq_32902473/article/details/74942496

a标签中href=""的几种用法

本文链接：https://blog.csdn.net/u010297791/article/details/52784879

众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法<a href="javascript:;"></a>，所以就来整理下a标签中href的几种用法。

一、Js的几种调用方法（参考总结的）

1、a href="javascript:js_method();"
这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
2、 a href="javascript:void(0);" οnclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3、a href="javascript:;" οnclick="js_method()"

这种方法跟跟2种类似，区别只是执行了一条空的js代码。

4、a href="#" οnclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5、a href="#" οnclick="js_method();return false;"

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

综合上述，在a中调用js函数最适当的方法推荐使用：

<a href="javascript:void(0);" οnclick="js_method()"></a>

<a href="javascript:;" οnclick="js_method()"></a>

<a href="#" οnclick="js_method();return false;"></a>

二、href="#"的作用

a中href="#"表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。
<span style="font-size:14px;"><a href="#">回到最顶端</a></span>
三、href="URL"的作用

1、URL为绝对URL

此时指向另一个站点，比如href="http://write.blog.csdn.net",那么点击时就会直接跳转到这个链接的页面。

2、URL为相对URL

此时指向站点内的某个文件，比如href="/test.doc"，那么点击时就会直接下载文件。

3、锚 URL

此时指向页面中的锚，比如href="#top"，那么点击时就会到当前页面中id="top"的这个锚点，实现当前页面的所谓跳转。用的最多就是在可滚动页面中，添加菜单，可以直接回到页面中的某个部分的内容。

即所有的三种代码样例：

<a href="http://baidu.com">超链接</a>

<a href="#">回到最顶端</a>

<a href="css/css1.css">文件链接</a>

2、图片预加载

实现图片预加载的几种方式

本文链接：https://blog.csdn.net/baidu_24024601/article/details/76167082

感觉自己好久没有写博客了，可能自己变懒了。不知道为什么最近有点迷茫，不知道是该去学一下新东西还是该去看一下具有深度的东西。新的技术需要关注，但是我要去研究一下jquery的源码，这个东西很早就想去看，无奈时间安排不过来。学了新的东西，没有机会去实践，很快就忘记了，但是我们还是要保持一种不断吸收新知识的姿态。讲了这么多废话，好了，开始今天的话题。实现图片预加载的几种方式。

在开发的过程，我们经常会遇到这样的要求，当鼠标hover上去的时候，更改菜单的背景。如果没有进行图片预加载的话，会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况？因为hover的时候，图片才会去加载。那么我们现在来解决这个问题。

首先我们要知道一点：如果图片在使用之前就已经请求过了，那么再次使用的时候，就不会再去请求（ps：图片路径一样）。下面讲实现方式

1.使用纯的css进行图片预加载
body:after {content: "";display: block;position: absolute;background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px;width: 0;height: 0
}
原理是加载了该图片，但是我们不显示在可视范围内。这种方式极其简单。但是也有一个致命的弱点，图片跟随文档一同加载，有时候我们为了提高文档的加载速度，那么这种方式方式就不适合了。

2.使用纯javascript进行图片预加载
  //存放图片路径的数组var imgSrcArr = ['imgsrc1','imgsrc2','imgsrc3','imgsrc4'];var imgWrap = [];function preloadImg(arr) {for(var i =0; i< arr.length ;i++) {imgWrap[i] = new Image();imgWrap[i].src = arr[i];}}preloadImg(imgSrcArr);//或者延迟的文档加载完毕在加载图片$(function () {preloadImg(imgSrcArr);})
3.使用css+js方式进行图片预加载
.preload-img:after{content:"",background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px;}/*比如我们写了上面的这样一个类，但是页面中没有用到，我们在文档加载完毕之后，给某个元素添加该类
*/$(function(){$("#target").addClass("preload-img")
})
4.使用ajax方式进行图片预加载
    $(function(){$.get('图片的路径');})/*当然我们也可以写成一个函数，这里我就不演示了*/

3、使用雪碧图进行定位（CSS sprites进行定位）

什么是雪碧图？

雪碧图也叫CSS精灵，是一种CSS图像合成技术；

通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。如下：

如上雪碧图，background-position使用定位如下X和Y轴，注：原点0，0 位置，之后X和Y轴均为负值，定位到图片左上侧起点后根据width和height截取小图标

什么图片可以拼成雪碧图？

1. 静态图片，不随用户信息的变化而变化

2. 小图片，图片容量比较小（一些大图不建议拼成雪碧图）

3. 加载量比较大

使用雪碧图的优缺点？

1.优点
1、减少网页的http请求，提高页面的性能；
2、减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

2.缺点
1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，容易出现背景断裂；
2、至于可维护性差，每次图片删除或添加内容，显得稍微繁琐，加大工作量。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。
3、由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
4、在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。

3.CSS Sprites图片切割术（技巧）
1、CSS Sprites图片顺序合图片由上至下、左至右添加。而background-position一般采用数字组合形式定位，这样能减少维护带来的不必要麻烦。
2、不建议CSS Sprites图片中保持一定的间距，因为文件size增大而增加文件体积。
3、CSS Sprites图片中把颜色较近或相同的组合在一起可以降低颜色数，因为少色数的图片文件体积会相对的小。
4、size相同的CSS Sprites图片中留有较大空隙，某程度上多数情况会增大了体积，所以CSS Sprites的图片不要有空隙。
5、在size相同的CSS Sprites图片中，垂直排列的图片会比水平排列的文件体积要大。
6、在CSS Sprites图片中，水平排列的图片会比垂直排列的文件体积要大。
7、图片对等合并：应用CSS Sprites图片时，适当地把对等相同的图像合并，以节省空间及减少体积。
8、区分开不需要合并的图像：如当前用户确定只显示一种状态或一个级别时，不必要把其他的级别或状态的图片合并。
9、黄金切割位：在CSS Sprites图片的最右或左边为最灵活动位置最适宜摆放文本前的icon，因此不会受到其它CSS Sprites图片干预，也不需要预留一定的行宽。

background-position和雪碧图(CSS Sprites)用法

本文链接：https://blog.csdn.net/bingkingboy/article/details/51059209

background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性，这次就总结下它的用法。

还是那句话，工欲善其事必先利其器，只有真正的了解background-position的特性才能在需要的场景更好的运用它。

在h5页面中用background-size进行雪碧图的设置。

background-position的定义

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：
background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。

background-position的属性值

background-position有两个属性值， background-position：x | y，用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。

background-position属性值有三种情况

提示：
background-position两个属性值可以混用，例如：方向值和数值、数值和百分比，并非x轴和y轴需要设置为同一类型的属性值，这点也正是说明了background-position属性可以衍生单独设置background-position-x 或 background-position-y。

background-position属性值之神奇的百分比

我们都知道background-position 属性的作用：设置背景图像的起始位置。这里的起始位置是相对于自身容器而言，如果属性值为数值，大家可能很好理解，例如：background-position：100px 50px 这个属性值意味着图片在距离自身容器x轴为100px、y轴为50px的位置作为图片显示的起点位置。

然而使用百分比来设置属性值，是以自身容器的长宽减去图片的长宽乘以百分比 所得的数值来确定图片的起始位置。
公式：（容器自身的宽度/高度 - 图片自身的宽度/高度） x 百分比 
例如：background-position：50% 50%

提示：

background-position属性值如果是数值，那么指相对于容器自身数值的距离作为起始位置；如果是百分比或者是方向，那么指的是相对于容器自身（容器自身的宽度/高度 - 图片自身的宽度/高度） x 百分比所得的数值作为起始位置。

如果不设置background-position属性值，那么默认起始位置为background-position：0% 0%。

方向值和百分比的计算方式是一样的，它们可以相互转换，left：0%，right：100%，center：50%。

如果background-position属性值只设置一个，那么另一个默认为center。

雪碧图

CSS雪碧图即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

上面这张图片是由多个小图片合成的，前端成它为CSS雪碧图。

background-position属性在雪碧图中的用法

了解了background-position属性的用法，那么对于如何使用雪碧图的学习就相对简单了很多。使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。

从上面的图片不难看出雪碧图中各个小图标（icon）在整张雪碧图的起始位置，例如第一个图标（裙子）在雪碧图的起始位置为 x：0，y：0，第二个图标（鞋子）在雪碧图的起始位置为 x：0，y：50px，第三个图标（足球）在雪碧图的起始位置为x：0，y：100px，依次类推可以得出各个图片相对于雪碧图的起始位置。

以上面的雪碧图为例（实际雪碧图中各个小图片的起始位置和上面的展示图不同）用一个Demo来阐述它的使用方法。

HTML
<div class="box"><span class="icon1"></span><span class="icon2"></span><span class="icon3"></span><span class="icon4"></span>
</div>
CSS
    <style>.box{width: 600px; height:300px; border: 3px solid #ccc; background-color: #8064A2; }span{display: inline-block; width: 25px; height: 25px; border: 3px solid #ccc;background-image: url(css/img/sidebar.png); background-repeat: no-repeat;margin: 5px;}.icon1{background-position: 0 0;}.icon2{background-position: -40px 0;}.icon3{background-position: 0 -25px;}.icon4{background-position: -40px -25px;}</style>
为什么使用雪碧图时background-position属性值为负数

上面的例子已经阐述了如何使用雪碧图，只不过初学者可能会对雪碧图中的background-position属性值为负值有所疑惑。这个问题其实不难回答，如果细心的人应该很早就发现了使用负数的根源所在。这边用上面的Demo为例，来分析这个问题。上面的span标签是一个25px长宽的容器，在使用背景图时，背景图的初始位置会从容器的左上角的开始铺满整个容器，然而容器的大小限制了背景图呈现的大小，超出容器部分被隐藏起来。假如设置background-position: 0 0 那么意味着，背景图相对于容器（span标签）x轴=0；y轴=0的位置作为背景图的起始位置来显示图片。所以如果需要在容器中显示第二个图标，意味着雪碧图x轴方向要左移动，左移动雪碧图即它的值会设置为负数，同理y轴方向也一样。

CSS调整雪碧图的大小

1、通过transform: scale(0.5);来缩放，但在本身有过渡或动画时，刷新页面会有卡顿拉伸现象！不建议这样做！

2、直接调整雪碧图background-size大小

例如，雪碧图规格140*840，但是我们只需要width:42px、height:20px（只是容器的宽度，不是直接设置雪碧图的宽高哦！相当于我们人在房子里，只能看到窗户开放给我们的景象，其他的是看不到的，在这里具体就是，只能看到雪碧图140px*840px的冰山一角），这时，我们需要写以下样式：

width: 42px;
height: 20px;
background-image: url('./icon.png'); // 请注意！！！background-position必须在background-image之后写才能生效
background-size: 42px 252px;（X、Y方向），这是雪碧图中，我们需要的实际背景图片大小，他是雪碧图规格的除数，140*840他们同时除以10得到14*84, 然后同时*3得到42*252 // 注意必须保持与原始规格140*840的比例！为什么一定要是雪碧图规格大小的倍数呢？因为这样是为了等比例缩放雪碧图，防止拉伸，因为雪碧图可能原本大小是UI设计师要求的几倍大，这个时候就需要缩小了不是？具体多少倍数，看UI设计师的具体要求
background-position: 0 -147px; // 这是雪碧图中，我们需要的图标的位置坐标。

4、:将图片压缩成base64格式来节约请求

https://www.cnblogs.com/final-elysion/p/6092675.html

5、将图片缩放压成缩略图，进行显示。

在处理图片时，一些图片加载很慢，把图片缩放压成缩略图，但是图片模糊不清，可以采用下面两种方法实现加载图片的高清度，也能提高图片加载速度，提高用户体验
1、先让客户端加载像素小的缩略图：

< img src="缩略图.jpg" name="pic" width="800" height="600" id="news" />
然后用js处理：

var img = new Image();//新建一个图片对象
img.src = "原图.jpg"; //最终显示的大图
img.onload = function() {
document.getElementById('news').src = this.src;
}
实现预加载缩略图，最终显示像素高的原图，这样做的好处是避免用户长时间等待图片而跳出
2、用ps将图片像素压缩，实现图片加载高像素。

原文链接：https://blog.csdn.net/licuicui5201/article/details/82776870

图片较多时要提高网页加载速度相关推荐

提高网页加载速度的一些方法和技巧
网页的加载速度是评估网站质量一个重要指标,原因在于大多数用户能够容忍的网页加载时间只有几秒,如果超出了访客的忍受范围他们会毫不留情地关掉你的网页,所以网页载入速度会极大地影响网站的流量和访问. 以下总 ...
【PHP】如何提高网页加载速度？
[php]如何提高网页加载速度? 1.减少页面请求: 从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少. 之前我下载163邮箱 ...
Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
网页速度很慢优化方案：如何提高网页加载速度，提升网站加载速度
网站加载速度的快慢,直接影响用户的去留.这里为大家持续更新我的经验,帮你解决网页速度很慢,慢在哪里,该怎么优化的问题.希望对你有所帮助! 1. 网站空间要好:网站需要一个稳定的服务器或者虚拟机,可以 ...
【前端开发】25种提高网页加载速度的方法和技巧
尊重原创:http://blog.csdn.net/wxzking/article/details/4089384 您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在 ...
关于提高网页加载速度个人学习以及经验总结
性能黄金法则: 记住:只有10% - 20%的最终用户时间花在了下载HTML文档上,其余的80%-90%时间花在下载页面中的所有组件(js.css .image .flash)进行的http请求上. ...
华为荣耀7i手动更改DNS，提高网页加载速度
为什么在同样的Wi-Fi网络下,别人的手机可以秒开网页,但自己的手机却总会慢个半拍或是经常打不开,简直龟速.有时还会加载网页失败.我想大部分人都遇到过吧. 今天本人给大家介绍一种方法,可以加快打开网页 ...
替换 google cdn 提高网页加载速度
最近在浏览 zeromq 文档,发现 1. Basics | ØMQ - The Guide (zeromq.org) 页面加载非常慢,而且语言相关的链接点了也没反应.看不了示例程序. 为了解决这个 ...
分享网页加载速度优化的一些技巧？
日期:2013-2-17 来源:GBin1.com 不管你是不是相信,在最近的几年里,互联网网页的大小已经显著增大了.由HTTP Archive研究得出的结果表明,目前平均一个页面的大小是1.25M ...

图片较多时要提高网页加载速度

1、图片懒加载

注意事项：

引申：data-url替换a标签

**跳转用div加h5的自定义属性data-*,代替a标签：**a标签有种种不确定性，比如在各种浏览器的表现形式不统一，而且鼠标hover的时候页面下方会有链接，显得很low。

window.location.href 传中文乱码

window.location.href url含中文服务器收到乱码问题解决

中文乱码问题

window.location.href url含中文服务器收到乱码问题解决

a标签中href=""的几种用法

2、图片预加载

实现图片预加载的几种方式

3、使用雪碧图进行定位（CSS sprites进行定位）

background-position和雪碧图(CSS Sprites)用法

图片较多时要提高网页加载速度相关推荐

最新文章

热门文章

图片较多时要提高网页加载速度

1、图片懒加载

注意事项：

引申：data-url替换a标签

跳转用div加h5的自定义属性data-*,代替a标签：a标签有种种不确定性，比如在各种浏览器的表现形式不统一，而且鼠标hover的时候页面下方会有链接，显得很low。

window.location.href 传中文乱码

window.location.href url含中文服务器收到乱码问题解决

中文乱码问题

window.location.href url含中文服务器收到乱码问题解决

a标签中href=""的几种用法

2、图片预加载

实现图片预加载的几种方式

3、使用雪碧图进行定位（CSS sprites进行定位）

background-position和雪碧图(CSS Sprites)用法

图片较多时要提高网页加载速度相关推荐

最新文章

热门文章

**跳转用div加h5的自定义属性data-*,代替a标签：**a标签有种种不确定性，比如在各种浏览器的表现形式不统一，而且鼠标hover的时候页面下方会有链接，显得很low。