zoukankan      html  css  js  c++  java
  • 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">
  • 相关阅读:
    【算法杂谈】本博客算法总结
    【算法杂谈】LJX的迪杰斯特拉算法报告
    首师大附中互测题:50136142WXY的坑爹百度地图【B006】(可以喝的超大桶水)
    【其它】一些好用的的翻*软件
    【更新】关于最近博客的随笔更新问题
    首师大附中互测题:99999999海岛帝国后传:算法大会【D001】
    首师大附中互测题:LJX的校园:入学典礼【C003】
    首师大附中互测题:50229234海岛帝国:独立之战【C002】
    二叉苹果树(树形DP)
    打鼹鼠
  • 原文地址:https://www.cnblogs.com/zjunet/p/4559922.html
Copyright © 2011-2022 走看看