当前位置: 金莎娱乐场app下载 > 金莎娱乐app > 正文

性能优化成了N页面下一步工作的重中之重,没有

时间:2020-03-07 20:13来源:金莎娱乐app
增强型手段:            静态文件上CDN。(静态文件的下载能提速20%左右。) 静态文件设置强缓存 通常一个web网站最大的流量来源于静态图片文件,使用缓存后可以减少同一客户端

增强型手段:

           静态文件上CDN。(静态文件的下载能提速20%左右。)

静态文件设置强缓存

通常一个web网站最大的流量来源于静态图片文件,使用缓存后可以减少同一客户端对同一静态资源的重复下载。
缓存并不是浏览器缓存后就不会和服务端产生通信,它需要和服务器端确认一下它缓存的东西是不是最新的,如果是则使用,不是则重新下载,因此浏览器缓存后并不会减少与服务器的交互次数,但是会降低与服务端的连接时长,变相地减少了服务端的并发。

因此浏览器缓存对于服务端来说节省了带宽,对于客户端来说减少了重复下载同一资源的次数,也就加快了访问速度。

浏览器缓存某一信息后再次访问时需要基于某一标识来确认一下它缓存的东西是否是最新的,这个标识有两种:

  1. Last_modified:

  2. E-tag:

而在平均时间这一维度,我们又分为四个级别:

    金沙娱城手机app下载,       常规优化手段包括

图片延迟加载

  1. 为img标签src设置统一的图片链接,将真实链接地址装在自定义属性中,所以开始时候图片是不会加载的,我们将满足条件的图片的src重置为自定义属性便可实现延迟加载功能
function imgLazyLoad(container){
    container=container || $(window);
    var imgArr={};

    initImg();
    lazyLoad();
    container.scroll(function(){
        lazyLoad();
    })
    $(window).resize(function(){
        initImg();
    })

    function initImg(){
        $('img').each(function(){
            var el=$(this);
            if(el.attr('lazy-src')&&el.attr('lazy-src')!=''){
                var offset=el.offset();
                if(!imgArr[offset.top]){
                    imgArr[offset.top]=[];
                }
                imgArr[offset.top].push(el);
            }
        })
    }

    function lazyLoad(){
        var height=container.height();
        var scrollHeight=container.scrollTop();
        for(var k in imgArr){
            if(parseInt(k)<scrollHeight+height){
                var _imgs=imgArr[k];
                for(var i=0;lens=_img.length;i++){
                    var temImg=_img[i];
                    if(tmpImg.attr('lazy-src')&&temImg.attr('lazy-src')!=''){
                        tmpImg.attr('src',tmpImg.attr('lazy-src'));
                        temImg.removeAttr('lazy-src');
                    }
                }
                delete imgArr[k];
            }
        }
    }
}
imgLazyLoad($('#con'));

上述代码没有考虑到页面空闲的情况,当页面空闲的情况就不需要延迟加载了。
进行一下改进:

function imgLazyLoad(container) {

    var imgLazyLoadTimer = null;
    var resetImglazy = null;

    container = container || $(window); //需要时jquery对象
    var imgArr = {};
    initImg();
    lazyLoad();
    imgLazyLoadTimer = setTimeout(autoLoad, 5000);

    container.scroll(function () {
        lazyLoad();
    });
    $(window).resize(function () {
        initImg();
    });
    $(document).mousemove(function () {
        if (imgLazyLoadTimer) clearTimeout(imgLazyLoadTimer);
        if (resetImglazy) clearTimeout(resetImglazy);
        resetImglazy = setTimeout(function () {
            autoLoad();
        }, 5000);
    });
    function initImg() {
        $('img').each(function () {
            var el = $(this);
            if (el.attr('lazy-src') && el.attr('lazy-src') != '') {
                var offset = el.offset();
                if (!imgArr[offset.top]) {
                    imgArr[offset.top] = [];
                }
                imgArr[offset.top].push(el);
            }
        });
    }

    function lazyLoad() {
        var height = container.height();
        var srollHeight = container.scrollTop();
        for (var k in imgArr) {
            if (parseInt(k) < srollHeight + height) {
                var _imgs = imgArr[k];
                for (var i = 0, len = _imgs.length; i < len; i++) {
                    var tmpImg = _imgs[i];
                    if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
                        tmpImg.attr('src', tmpImg.attr('lazy-src'));
                        tmpImg.removeAttr('lazy-src');
                    }
                }
                delete imgArr[k];
            }
        }
    } //lazyLoad

    function autoLoad() {
        var _key = null;
        for (var k in imgArr) {
            if (!_key) {
                _key = k;
                break;
            }
        }
        if (!_key) return false;
        var _imgs = imgArr[_key];
        for (var i = 0, len = _imgs.length; i < len; i++) {
            var tmpImg = _imgs[i];
            if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
                tmpImg.attr('src', tmpImg.attr('lazy-src'));
                tmpImg.removeAttr('lazy-src');
            }
        }
        delete imgArr[_key];
        if (imgLazyLoadTimer) {
            clearTimeout(imgLazyLoadTimer);
        }
        imgLazyLoadTimer = setTimeout(autoLoad, 1000);
    }
} //imgLazyLoad
imgLazyLoad($('#con'));

另外一种方式:

原理,当页面载入的时候,使用jquery来循环遍历每一个img,判断每一个图片是否在当前可是区域内,需要的数据:

  1. 浏览器可是区域的高度

  2. 图片相对于文档的偏移量

当图片相对于文档的偏移量小于浏览器可视区域的高度的时候,表明图片已经进入可视区域,代码如下:

$(document).ready(function(){
    $('img').each(function(){
        if($(this).offset().top < $(window).height()){
            $(this).attr('src',$(this).attr("x-src"));
        }
    })
})

当用户操作滚动条时,我们还需要知道滚动条的高度:

$(window).scroll(function(){
    $('img').each(function(){
        if($(this).attr('src')==""){
            if($(this).offset().top<$(window).height()+$(window).scrollTop()){
                $(this).attr("src",$(this).attr("x-src"));
            }
        }
    })
})

按需加载需要有一套js模块加载的框架。这个框架的作用是:保障在所需的js加载完成后才去执行回调方法。

           js按需加载。(在后面做重点介绍)

前端重构总结

前端重构其实可以分为两个方面:性能优化金莎娱乐场app下载,和模块化

下面我们先总结一下性能优化方面的东西:

首先列举一下常规的优化手段:

  1. CSS置顶,JS置底

  2. 静态资源外联、合并、压缩

  3. 图片优化

  4. 图片延迟加载

  5. 使用CSS Sprite,首屏图片全部合并到一张图上

  6. 静态文件上CDN

  7. 静态文件设置强缓存

  8. HTML压缩

  9. 图片预加载

增强型的手段:

  1. 基础库定制(用代码分析代码,自动打包被使用到的方法作为基础库)

  2. 页面数据存储优化(从原来的的直接写json形式的script,变为将json隐藏在textarea中,初始化或用到的时候才去提取并进行解析)

  3. 首屏CSS检测,将不属于首屏的css代码单独打包并移到首屏之外进行延迟加载

  4. js按需加载

监控和测量

性能优化最重要的工作不是优化而是监控。这个道理很简单,没有监控体系就没办法衡量性能优化的效果,那么你做的任何工作都是盲目的。

我们对性能的监控是从多个维度展开的,包括平均时间、时段分布、浏览器分布、省份、运营商等。便于发现和定位任何一个细节的问题。

而在平均时间这一维度,我们又分为四个级别:

  • Head时间:head标签加载完成的时间

  • TTi时间:页面可交互时间(首屏第一次渲染出来的时间)

  • Dom时间:Dom Ready的时间

  • Load时间:页面完全加载完成的时间

这样划分的好处是,页面加载每个环节的耗时一目了然:

  • Head:CSS加载时间

  • TTI:整体HTML加载和渲染时间

  • DOM-TTI:js文件网络传输时间和在浏览器进行解析的时间

  • Load减Dom:js初始化+图片加载的时间

页面加载的瓶颈就在script的下载和解析时间。

那么,优化方案就很明显了:最大限度地减小js文件大小,以减小网络传输时间,提升页面性能。
通过后来的优化工作我们发现:js代码压缩、Gzip后每减小1k,页面加载时间就能减小10ms左右。

按需加载:

这是除了js压缩外,能想到的最有效减小js文件大小的办法了。

效果 & 总结

           我们对性能的监控是从多个维度展开的,包括平均时间、时段分布、浏览器分布、省份、运营商等。便于发现和定位任何一个细节的问题。

图片优化

  1. 样式代替图片。支持CSS3的浏览器越来越多,半透明、圆角、阴影、高光、渐变等都可以使用CSS3来实现

  2. 选择最合适的图片。jpg,png,gif

  3. 使用图片压缩工具

  4. Icon font 缺点是只支持纯色图标。

  5. SVG:对于绝大多数图案、图标等,矢量图更小,且可缩放无需生成多套图。

  6. data url:Base64是网络上最常见的用语传输8Bit字节的编码方式之一,可用以在http环境下传递较长的标示信息。将图片转化为base64编码格式,资源内嵌于CSS或HTML中,不必单独请求。该方式的优点是:

    1. 减少了http请求
    1. 避免了图片重新上传,还要清理缓存的问题

缺点:IE6,IE7不支持该类型编码的图片作为背景图,增加了CSS文件的大小,维护成本较高

  1. 按照Http协议设置合理的缓存

  2. RWD设计

监控& 测量

           那么,优化方案就很明显了:最大限度地减小js文件大小,以减小网络传输时间,提升页面性能。

那么,如何做按需加载:

           1.3秒的load时间,相比较绝大多数网站来说都是一个不错的数值。但老板一句话“怎么这个页面打开这么慢”,立刻像是给我们的后背安了一枚定时炸弹。性能优化成了N页面下一步工作的重中之重。

按需加载:

           按需加载需要有一套js模块加载的框架。这个框架的作用是:保障在所需的js加载完成后才去执行回调方法。

首屏CSS检测。(对首屏用到的CSS进行检测,将不属于首屏的CSS代码单独打包并移到首屏之外进行延迟加载)

           CSS置顶,JS置底。

按需加载还需要有一套触发条件。在我们的页面中,对鼠标移动和鼠标点击都进行了监听,以保障在用户想使用某个功能之前或进行了相应操作时,触发js加载。

  • 应用场景分析:

可以看出,页面加载的性能瓶颈就在script的下载和解析时间。

           同时,我们对CSS的加载也进行拆分,首屏不需要的CSS代码也随JS进行延迟加载。

按需加载,顾名思义,就是在页面首次加载的时候只提供最需要的js给用户,而剩余的js等用户使用到了相关的功能再去加载。

           首屏CSS检测。(对首屏用到的CSS进行检测,将不属于首屏的CSS代码单独打包并移到首屏之外进行延迟加载)

使用CSS Sprite,首屏图片全部合到一张图上。

           最近一直在做性能优化和模块化改造的工作,并完成了一次前端重构。在这里总结出一些经验和得失来帮助大家思考。共两篇文章,第一篇讨论性能优化,第二篇讨论模块化框架。而之所以把这两个话题放到一起,是因为这两项工作都涉及到对前端代码进行不同程度的重构,而且模块化改造其实是我们在对性能优化做到一定程度之后发现必须要做的一件事情。本篇是性能优化的部分,下面我把我们的产品简称为N页面。

性能优化最重要的工作不是优化而是监控。这个道理很简单:没有监控体系就没办法衡量性能优化的效果,那么你所做的任何工作都是盲目的。

           按需加载适合哪种类型的网站:如果80%的用户来到你的页面只使用20%的功能,那么就有必要把这20%的js作为首屏加载,而剩余的js做按需加载。

图片优化。(Png使用pngcrush;Gif使用gifsicle;Jpeg使用jpegtran)

           通过按需加载的拆分,我们将首屏的js代码从原来的gzip之后40-50k减小到了只有24k。

从这个角度来讲,几乎所有网站都可以做按需加载,因为总有一些功能是用户很少会用到的。

           增强型手段

这样划分的好处是,页面加载每个环节的耗时一目了然:

           静态文件设置强缓存。(命中强缓存82.4%;命中若缓存3.4%;未命中缓存14.2%。)

TTI :整体HTML加载和渲染时间

           图片优化。(Png使用pngcrush;Gif使用gifsicle;Jpeg使用jpegtran)

那么,优化方案就很明显了:最大限度地减小js文件大小,以减小网络传输时间,提升页面性能。

           Dom时间- Dom Ready的时间

除此之外,我们还对js基础库进行了进一步拆分,分为首屏用到的基础方法,和延迟加载的js所需的基础方法。以最大限度地保证首屏js量的最小化。

           不过按需加载也为我们的代码结构带来了很大的冲击,极大地改变了我们写代码的方式,也制造了很多问题,我会在下一篇《前端重构——模块化框架实践》中进行详细介绍。

编辑:金莎娱乐app 本文来源:性能优化成了N页面下一步工作的重中之重,没有

关键词:

  • 上一篇:没有了
  • 下一篇:没有了