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