精华内容
下载资源
问答
  • 年前网站的首页要改版,不知怎么的这个艰巨的任务就到了我头上,首页作为网站的门面,感觉压力很,但是也是一次难得的锻炼的机会,所以还有点儿兴奋的就开始做了。 这次的改版跟京东淘宝的首页很像,首屏是商品...

    年前网站的首页要改版,不知怎么的这个艰巨的任务就到了我头上,首页作为网站的门面,感觉压力很大,但是也是一次难得的锻炼的机会,所以还有点儿兴奋的就开始做了。

     

    这次的改版跟京东淘宝的首页很像,首屏是商品分类、轮播、滚动的促销厂家信息和大家都在买、推荐商品以及公告这几个模块,剩下模块的则分为不同的楼层展示,新首页现在具体长这样:我是新首页

     

    因为首页有很多商品和广告图片,我开始的时候用了懒加载,当楼层滚动到可视区时对楼层图片路径进行替换,但是这样仍然存在一些问题(如下),我们老大发话让照着京东的效果做,我就在网上各种找资料,终于,在京东首页的console里面找到了我想要的:https://aotu.io ,里面就有关于京东首页最近这次改版的一篇技术文章,还有好多高大上的资料,有兴趣的同学可以看一下。下面说说这次首页加载遇到的几个问题和解决方案。

     

    1 优先加载

           问题:打开首页,当用户快速滚动到下面的楼层时,下面的楼层要等到上面的几个楼层的图片都加载完了才开始加载,这样下面的楼层图片等待加载的时候就会很长,用户会觉得页面很卡。

      解决方案:对滚动事件进行优化,也就是传说中的函数节流(这个会再新开一篇详细总结),使用setTimeout控制滚动时函数执行的频率,我的间隔时间是300ms,当用户快速滚动时因为还没超过300ms,所以快速滚动经过的楼层的加载函数不会执行,实现了优先加载的效果。

           代码:

    function priorLoad() {
        var floors = $(".lazyLoad");
        if (!floors) {
            return;
        }
    
        loadFlag = false;
    
        var clientH = document.documentElement.clientHeight;  //可视区高度
        timer = setTimeout(function () {
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;  //滚动高度
            for (var i = 0; i < floors.length; i++) {
                //判断每个楼层是否已经加载过
                if (floors[i].getAttribute("loaded") != "1") {
                    var t = getTop(floors[i]);
                    if ((scrollT - floors[i].offsetHeight) <= t && t <= (scrollT + clientH)) {  //如果滚动的高度加屏幕高度大于楼层距离顶部的高度,说明楼层显示在屏幕中
                        var imgs = $(floors[i]).find(".visible-img");
                        var count = 0;
                        for (var k = 0; k < imgs.length; k++) {
                            //对未加载过且需要懒加载且是显示的图片进行加载
                            if (imgs[k].getAttribute("loaded") != 1) {
                                imgs[k].src = imgs[k].getAttribute("_src");
                                imgs[k].setAttribute("loaded", 1); //加载后改变加载标示
                                imgs[k].onload = function () {
                                    count++;
                                    if (count == imgs.length) {
                         floors[i].setAttribute("loaded","1");
                         $(floors[i]).removeClass("lazyLoad"); loadFlag
    = true; autoLoad(); } } } } } } } }, 300); }

     

     

    2 首屏直出

       问题:首屏轮播图片的位置会闪一下空白然后才开始加载图片,这个是因为首页的数据都是js异步请求的,在发送请求并且返回数据的时间里轮播那里就会出现空白。

     解决方案:京东采用的方式是首屏数据由服务器直接输出,包括轮播图的第一帧,但是我们的网站因为有些信息是根据地区挂钩的,实现有些难度,所以这个方案没有采用

     

    3 空闲加载

           问题:因为是懒加载,只有楼层出现在可视区的时候才开始加载,当用户打开首页没有向下滚动的时候,下面的楼层一直显示的是正在加载的图片。

     解决方案:为了保证首屏的加载速度,当首屏数据加载完成之后,自动对下面的楼层按序加载,这样等用户向下滚动的时候下面的楼层已经加载一部分甚至加载完了,提高用户体验。

          代码:

    function autoLoad() {
        var floors = $(".lazyLoad");
        if (floors.length == 0) {
            return; //所有楼层都加载完了
        }
    
        var obj = floors[0];
        if (loadFlag) {
            if (obj.getAttribute("loaded") != "1") {
                loadFlag = false;
                var imgCount = 0;
                var imgs = $(obj).find(".visible-img");
                for (var k = 0; k < imgs.length; k++) {
                    //对未加载过且需要懒加载且是显示的图片进行加载
                    if (imgs[k].getAttribute("loaded") != 1) {
                        imgs[k].src = imgs[k].getAttribute("_src");
                        imgs[k].setAttribute("loaded", 1); //加载后改变加载标示
                        imgs[k].onload = function () {
                            imgCount++;
                            if (imgCount == imgs.length) {  //该楼层的数据已经加载完
                                obj.setAttribute("loaded", "1");
                                $(obj).removeClass("lazyLoad");
                                loadFlag = true;
                                autoLoad(); //递归加载下一个楼层
                            }
                        }
                    }
                }
            }
        }
    }

     

     

    4 显示的数据先加载

           问题:楼层的二级分类都是以选项卡的形式展示的,所以除了显示的分类其他的分类数据都是隐藏的,这些隐藏的数据加载会影响整个楼层的加载速度。

     解决方案:在楼层加载的函数里加条件判断,只对未加载过的并且是显示中的图片进行加载,过滤掉隐藏的图片,提高加载速度。

          代码:

    function displayLoad() {
        var floors = $(".floor"); //所有楼层下的第一个展示的分类
        for (var i = 0; i < floors.length; i++) {
            var t = getTop(floors[i]); //每个楼层的top值
            var imgs = floors[i].getElementsByTagName("img");
            for (var k = 0; k < imgs.length; k++) {
                if (imgs[k].getAttribute("_src") && imgs[k].getAttribute("loaded") != 1 && $(imgs[k]).is(':visible')) {
                    imgs[k].src = imgs[k].getAttribute("_src");
                    imgs[k].setAttribute("loaded", 1);
                }
            }
        }
    }

     

     

    5 使用webp格式图片,这种图片只有jpg格式图片的3/2,但是只兼容weikit内核的浏览器,这版本首页还没用,但是是一种优化的方式。

     

    转载于:https://www.cnblogs.com/xinyueBlog/p/6502191.html

    展开全文
  • 1. 图片优化  首先是UI设计师对图片进行一次压缩,到了前端工程师手上再进行一次压缩,推荐网站https://tinypng.com/。本人使用的技术栈时VUE和webpack,代码压缩在webpack中可以配置,不再详述。 2. webpack打包...

    1. 图片优化

       首先是UI设计师对图片进行一次压缩,到了前端工程师手上再进行一次压缩,推荐网站https://tinypng.com/。本人使用的技术栈时VUE和webpack,代码压缩在webpack中可以配置,不再详述。

    2. webpack打包优化

        如果按照vue-cli的正常配置进行打包,打包出来的包会非常大,即使进行了压缩。打包出来的东西分为2部分,第一部分是vue组件,以及业务逻辑部分;第二部分为插件打包,例如vue,vue-router,axios,vuex,vueScroll等插件。

       a. 第一部分:一般的单页面都会涉及到路由加载。在第一次加载的时候,只需要加载首页的路由即可,其他的路由可以进行懒加载设置。vue路由懒加载有3种方法可以实现

    /*1. vue异步组件技术 */
    {
      path: '/home',
      name: 'home',
      component: resolve => require(['@/components/home'],resolve)
    },{
      path: '/index',
      name: 'Index',
      component: resolve => require(['@/components/index'],resolve)
    },{
      path: '/about',
      name: 'about',
      component: resolve => require(['@/components/about'],resolve)
    } 

     

    // 2.下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。(官方网站推荐)
    /* const Home = () => import('@/components/home')
    const Index = () => import('@/components/index')
    const About = () => import('@/components/about') */
    // 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块
    const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
    const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
    const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
    /* 3.组件懒加载: webpack提供的require.ensure() */
    {
      path: '/home',
      name: 'home',
      component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
    }, {
      path: '/index',
      name: 'Index',
      component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
    }, {
      path: '/about',
      name: 'about',
      component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
    }

    需要注意的是:require或者import该组件进行懒加载后,不能在路由外在进行import该组件,否则webpack打包不生效。

    b. 第二部分:减小第三方插件的包。相对从服务器加载数十甚至数百兆的资源,更倾向从cdn引入。

    cdn加载时间

    具体做法: 在index.html中加入vue,vuex等资源

    资源加载

    在vue资源管理文件build文件夹中的webpack.base.conf.js,此js文件是vue基础打包配置,在此配置中加入

       externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT',
        'mui': 'mui'
      },

    externals中的键值对格式为 'aaa' : 'bbb', 其中,aaa表示要引入的资源的名字,bbb表示该模块提供给外部引用的名字,由对应的库自定。例如,vue为Vue,vue-router为VueRouter.

    3. 由于本公司的服务器有点low,即使图片进行了2次压缩,但是图片加载的速度还是慢,此时的加载效果是,html加载出来了,图片还在一帧一帧的往下加载,很low。解决办法:图片还没有加载出来的时候,不显示,加载出来之后,有动画效果的显示出来。

    地址: 本人作品www.mofamg100.cn,欢迎各位指点

    展开全文
  • 在做H5的过程中,加载速度慢是一个最大的痛点,抛开数据请求加载不说,无非就是图片、javascript、css这些静态资源加载耗费了大量的时间,这里就拿这个问题与大家分享下我的经验:1、图片压缩我们知道同一张图片,...

    在做H5的过程中,加载速度慢是一个最大的痛点,抛开数据请求加载不说,无非就是图片、javascript、css这些静态资源加载耗费了大量的时间,这里就拿这个问题与大家分享下我的经验:

    1、图片压缩

    我们知道同一张图片,png格式要比jpg格式体积要来得小,所以在非必要情况下,不使用png格式,我用“TinyPNG”进行压缩,可至少减小体积30%。还有一个智图,我还没真正用过,也不说了,有兴趣的可以去了解下。也可以用自动化工具gulp或者npm scripts,篇幅有限,这里不展开,移步http://www.css88.com/archives/7025

    2、图片懒加载

    对于用户来说,第一屏以外的图片,没有必要花费时间去等待加载,我使用懒加载插件echo.js,这个插件在移动端目前未发现不兼容情况。之前用lazyload.js,但在个别Android机型不兼容,抛弃了。echo.js的使用方法很简单:

    html:

    1.jpg是需要加载的图片,blank.gif是占位图

    js:

    引入echo.js后初始化

    echo.init({

    offset: 1334,

    throttle: 250,

    unload: false

    });

    基础参数:

    offset 默认值为0。设置上下左右到viewport的距离多少才加载图片。

    offsetVertical 默认值为0。设置上下到viewport的距离是多少才加载图片。

    offsetHorizontal 默认值为0。设置左右到viewport的距离是多少才加载图片。

    offsetTop 默认值为offsetVertical。设置顶部距离viewport的距离

    offsetButton 默认值为offsetVertical。设置顶部距离viewport的距离

    offsetLeft 默认值为offsetVertical。设置左边距离viewport的距离

    offsetRight 默认值为offsetVertical。设置右边距离viewport的距离

    throttle 单位毫秒 设置图片延迟加载时间,通俗点说就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:鼠标移动,mousemove事件;DOM元素动态定位,window对象的resize和scroll事件。

    debounce 单位布尔值,默认true, unload 单位布尔值,默认false。该选项告诉echo,当图片滑动超过了viewport的时候不在加载该图片。

    callback 单位函数,回调函数会传递已更新的元素和操作(load或者unload)给回调函数。

    3、css、js压缩

    可以手动对每个文件用工具压缩,但难免太繁琐导致上线的时候被遗忘,这事同样可以用自动化工具gulp或npm scripts进行压缩,同样移步http://www.css88.com/archives/7025

    4、延迟加载js

    google推荐的方法是

    function downloadJSAtOnload() {

    var element = document.createElement("script");

    element.src = "defer.js";

    document.body.appendChild(element);

    }

    if (window.addEventListener)

    window.addEventListener("load", downloadJSAtOnload, false);

    else if (window.attachEvent)

    window.attachEvent("onload", downloadJSAtOnload);

    else window.onload = downloadJSAtOnload;

    这段代码意思是等到整个文档加载完后,再加载外部文件“defer.js”。

    那是不是所有的js都可以用这种方式加载呢,答案是否定的。这段代码是在文档加载完成后才去加载指定的js文件,因此,不应该将页面正常加载所需的js放在这里,所以可以将js分为两类,一类是页面正常加载所需的js,另一类就是不影响页面的正常加载(例如需要用户触发click等特定操作)的js,将第二类js用上述方式加载,不就可以尽可能快地交付内容给用户了吗?

    展开全文
  • 加载使用场景在一些图片量比较的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失。 但是我们仔细想一下,用户真的需要...

    首先 小学生在这里 祝大家 元旦快乐!!!!!

    懒加载使用场景

    在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失。

    但是我们仔细想一下,用户真的需要我们显示所有图片一起展示吗?其实并不是,用户看到的只是浏览器可视区域的内容。所以从这个情况我们可以做一些优化,只显示用户可视区域内的图片,当用户触发滚动的瞬间再去请求显示给用户。

    懒加载的思路

    • img 标签有自定义属性 data-src
    • 首屏展示可视区域内的图片 src 值 替换为 data-src
    • 滚动出现在可视区域的图片即时展示 (重复第二步)

    懒加载的实现

    1.png
    2.png
    3.png
    4.png
    5.png
    6.png
    7.png
    8.png
    9.png
    复制代码

    至此我们已经初步完成了我们的懒加载,但是我们大家都知道,scroll这个事件实在太容易被触发了,用户一滚动鼠标就会触发很多次,如果一直滚势必会导致重复触发执行我们的事件,这也会导致我们的性能急剧下降,所以这就引出了我们的混合体 防抖节流 来优化我们的性能。

    防抖 && 节流

    防抖:在一定时间内,触发多次事件,只认第一次触发的,到了时间结束执行事件

     function throttle(fn, time) {            let oldTime = 0,                timer = null;            return () => {                const nowTime = new Date()                if (nowTime - oldTime >= time) {                   fn()                   oldTime = nowTime                }            }        }复制代码

    节流:在一定时间内,触发多次事件,只认最后一次触发的并且重置时间,到了时间结束执行事件

    function debounce(fn, time) {            let timer = null            return () => {                if (timer) {                    clearTimeout(timer)                }                timer = setTimeout(() => {                    fn()                }, time);            }        }复制代码

    在这里debounce有一个严重的问题就是如果用户一直触发事件,用户会一直得不到响应,所以我们可以借助防抖的思路来优化节流。

     function debounce(fn, time) {            let oldTime = 0,                timer = null;            return () => {                const nowTime = new Date()                if (nowTime - oldTime < time) {                    if (timer) {                        clearTimeout(timer)                    }                    timer = setTimeout(() => {                        oldTime = nowTime                        fn()                    }, time);                } else {                    // 用户重复触发,到达事件节点 还是会去执行事件                     oldTime = nowTime                    fn()                }            }        }复制代码

    所以最后我们监听事件可以修改为containr.addEventListener('scroll', debounce(load, 1000), false),这就完美达到了我们优化的目的。

    d8be80993121a341a0660807bcaa9d9e.png
    展开全文
  • ”1、图片加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。2、如果为幻灯片、相册等,可以使用图片加载技术,将当前展示图片的前...
  • 问题:首页加载 图片多、请求多、静态资源(css、js、img)过? 解决方案: 懒加载,监听滚动条事件,滚动条距离浏览器顶部的高度 = 图片距离顶部的高度 小图标可以采用 iconfont-字体图标 的方式解决 小图片...
  • 加载使用场景在一些图片量比较的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失。 但是我们仔细想一下,用户真的需要...
  • 在一些图片量比较的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失。 但是我们仔细想一下,用户真的需要我们显示所有...
  • uniapp项目中,有时候可能会有很多的静态资源图片,这可能会造成主包的体积过、影响首页加载效率、超出2M限制等问题,而又不想将图片上传到服务器,这时候可以采用uniapp提供的分包加载机制,本文对如何使用分包...
  • 加载使用场景在一些图片量比较的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失。但是我们仔细想一下,用户真的需要我们...
  • 背景图片加载是针对图片加载时机的一种优化,在一些图片量比较的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、...
  • 背景图片加载是针对图片加载时机的一种优化,在一些图片量比较的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、...
  • 项目慢慢起来之后,页面越来越多你会发现第一次进入vue项目变得很慢,这就叫首屏加载慢。一般有这些常见原因:有些项目...需要优化代码首页接口过慢 F12 查看Network接口响应速度 要求后端优化接口项目过页面...
  • Vue 首屏加载速度优化-这篇就够了

    千次阅读 2019-06-22 18:17:54
    Vue-cli上线首屏加载优化记 vue项目首页加载速度慢的有效优化1.影响加载速度的原因2.分析文件的原因利用webpack-bundle-analyzer 分析器,分析项目依赖关系3.项目依赖优化---插入链接与图片如何插入一段漂亮的代码...
  • 前端图片优化小记

    2020-04-17 17:58:57
    图片优化方案: 1.使用base64编码 2.图片延迟加载 3.使用css、iconfont、svg代替普通图片 4.选择正确的图片格式 5.选择正确的图片尺寸 1.使用base64编码 使用场景:从淘宝首页来看,使用base64的图片,除了上图的...
  • 它是针对图片加载时机的优化:在一些图片量比较的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、卡顿等现象,因为...
  • js实现图片加载

    2019-10-04 03:40:40
    大型购物网站都会采用图片加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟。 html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) <div ...
  • 3、应用规模较时启动时间较长,相较于白屏,一张图片的过渡效果更好 等等…。 而Flutter由于引擎的创建和初始化需要一定时间,所以也提供了一个过渡方案(默认是白屏),位置在: AndroidManifest.xml下的 <...
  • 它是针对图片加载时机的优化:在一些图片量比较的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、卡顿等现象,...
  • 背景图片加载是针对图片加载时机的一种优化,在一些图片量比较的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏...
  • 全局搜索结果页分首页,视频,新闻,图片,本机五个标签。其中前四个都是接的百度搜索引擎,但是每个页面做了特殊化处理,比如隐藏百度各个页面的顶部分类tab,只显示内容。下面说下优化webview加载 1.接入腾讯x5 ...
  • 但是对用户而言,我们始终只是看到当前的一张图片,那其他几张隐藏的图片为什么要事先加载进来呢?这不是费时费力吗?所以我的第一个需求是按需加载。 我们一般会把轮播图放在首页展示,但是首页
  • 它是针对图片加载时机的优化:在一些图片量比较的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、卡顿等...
  • 性能优化

    2016-03-04 14:26:00
    5173首页前端性能优化实践 给网页设计师和前端开发者看的前端性能优化 复杂应用的 CSS 性能分析和优化建议 张鑫旭——前端性能 前端性能监控总结 网站性能优化之CSS无图片技术 web前端性能优化进阶路 前端...
  • 项目性能优化

    2021-03-22 11:55:30
    首页加载慢的优化I 优化图片的做法 实现Webpack打包优化 实现CDN加速 ** 运行阶段>渲染优化 ** 渲染十万条数据如何不造成卡顿 问题详解 初始阶段 1.首页加载慢的优化 问题分析 ●首页加载图片过多 ●首页的...
  • 如何解决JS 文本输入框防抖(用户输入过快导致请求服务器的压力过) 能够完成搜索模块 能够获取发布房源的相关信息 能够知道图片上传的流程 能够完成图片上传功能 能够完成房源发布功能 前期准备工作 功能 获取...
  • 一个网站,不管是从加载时所占带宽,还是服务器请求数量... 不多说,今天从前端性能和SEO的角度在优化聚尚网首页,就来分享几点图片优化的策略吧。  通过firebug,或者DynaTrace Ajax Edition都可以检测到,整个...
  • 加载

    2021-03-10 21:13:25
    它是针对图片加载时机的优化:在一些图片量比较的网站(比如电商网站首页,或者团购网站、小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白屏、卡顿等现象,...
  • 性能优化

    2021-01-19 20:54:06
    Vue 是单页面应用,可能会有很多的路由引入 ,这样使用 webpcak 打包后的文件很,当进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块,然后...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 233
精华内容 93
关键字:

首页加载大图片优化