html加载速度技术点

      如果一个网站的图片多了起来的话，网站的加载速度就是一个问题，最近的一个网站用firebug看的话加载速度都已经达到了50多秒，关于提高网页的加载速度的话，除了一些压缩图片，采用png格式以及减少代码量等标准的方法以外，自己还是比较乱，于是先把这段时间看到了的写下来。

      今天补充一下，又学习到了一些比较重要的技术点，有时候网站在比较渣的电脑上运行起来会比较卡，如果这样子的话自己加上这样一行代码，先加载出整个背景框架来，就会好很多

 body{background:url(about:blank) fixed 

第一种方法，部分图片延迟加载

      这是管用的，用火狐的firebug测试的话还是能看出一定的效果来的。
网页图片延迟加载
第一步,先将所有需要最后加载的图片代码进行修改: (将src属性替换成thissrc)
例如:

<img src="/images/ad_1.jpg">

替换成：

<img thissrc="/images/ad_1.jpg">

第二步:

将下面的js代码放在页面最底部：

<script language="javascript">  

imgs = document.getElementsByTagName("img");  
imgsnum = imgs.length;  
for(imgi = 0 ;imgi < imgsnum;imgi++){  
     if ((typeof(imgs[imgi].src) == 'undefined' || imgs[imgi].src =='') && imgs[imgi].getAttribute('thissrc') != null)  
        imgs[imgi].src = imgs[imgi].getAttribute('thissrc');  
}  

</script>

当然这个是不能解决最终问题的，还是要靠一些本质的手段。

第二种方法：加 script

       首先必须承认js 用多了 的话真不是好东西。javascript带来的还不止是速度慢，还有很重要的一点就是大多数人使用它并不知道它是怎么写的，只是从别的站拷贝过来用的，一来在流传的过程中，会存在失去了部分代码的情况，结果你拷贝过来的可能是错误或不完整的代码，这样会导致你的网站瘫痪；二来是如果有恶作剧的人将恶意代码伪装成特效代码给你，而你又不懂，拷到网站上，那么不但你打开你的网站的时候会受害，别人打开你的网站时也很有可能成为受害者。
在一个div里面添加上script的一个没用的标签，那么这个div里面的东西就会被提前加载：

<div id="div1">
        <img src="images/Div1.jpg" /></div>
    <div id="div2">
        <img src="images/Div2.jpg" /></div>
    <div id="div3">
        <img src="images/Div3.jpg" /></div>
    <div id="cssContainer1">
        <div id="cssContainer2" style="background-image: url('images/Css2.JPG')">
        </div>
        <script>
            var a;
            for (var i = 0; i < 1000; i++) {
                a += i;
            }
        </script>
        <div id="cssContainer3">
        </div>
        <div id="cssContainer4" style="background-image: url('images/Css4.JPG')">
        </div>
    </div>
    <div id="div4">
        <img src="images/Div4.jpg" /></div>
    <div id="div5">

转载于:https://www.cnblogs.com/zjunet/p/4559922.html