懒加载

一、加载速度优化 　　精灵图 　　base64 　　iconfont替代图片 　　代码压缩 　　图片、视频压缩 　　cdn缓存 　　 路由懒加载 原理：将每个组件都打成一个包，首页的大文件可以进行分批引入 实现：main.js中将所有的同步引入组件的方式改为异步引入组件，即： import Home from "pages/Home"改为const Home=()=>import("pages/Home") 　　 二、运行效率优化 　　 减少http请求----<keep-alive></keep-alive> 　　使用： 　　　　<keep-alive> 　　　　<router-view></router-view> 　　　　</keep-alive> 　　原理：使用keep-alive包裹的组件在创建之后不会经历销毁，给不用频繁请求数据的组件包裹 　　属性：include：包括，表示需要缓存的组件----include="a,b"　　include="/a|b/"　　include="["a","b"]" 　　　　　exclude：除了，表示不需要缓存的组件，不能和include一起使用 　　　　　max：最多可以缓存多少个组件 　　增加两个生命周期： 　　　　activated：进入该组件时触发，可以用来做数据的请求 　　　　deactivated：离开该组件时触发 　　

懒加载和预加载 Motivation 今天做拼多多的前端笔试的时候问到了这样一个问题： 图片懒加载和预加载的不同点？他们的应用场景？两种技术对服务器前端的影响。 好像只是听说过，没有具体了解和应用过。所以在这里赶紧总结一下 本文参考了掘金浪里行舟的[懒加载和预加载] https://juejin.im/post/5b0c3b53f265da09253cbed0 懒加载 懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好的优化网页性能的方式。 用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。 在某些情况下，它还可以帮助减少服务器负载。 懒加载通常适用于图片很多，页面很长的电商网站场景中。 懒加载优点有： 能提升用户体验。例如在使用B站的时候，如果网页上所有的视频封面都一次性加载，由于图片数目较大，等待时间就会很长，严重影响用户体验。 减少无效资源的加载，这样能明显减少服务器的压力和流量，也能够减少浏览器的负担。 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。 懒加载的原理：首先将页面上的src属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域

一、vue lazyload插件： 　　　　插件地址： https://github.com/hilongjw/vue-lazyload 　　　　demo： http://hilongjw.github.io/vue-lazyload/ 二、简单使用实例： 1. 安装插件： npm install vue-lazyload --save-dev2. main.js引入插件： import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', loading:'./static/loading.png' })3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy <img class="item-pic" v-lazy="picUrl"/> 4、vue文件中需要懒加载的背景图片，v-lazy:background-image="imgUrl" <div v-lazy:background-image="imgLink"></div> 来源： https://www.cnblogs.com/zhouyingying/p/11438494.html

一、减少HTTP请求 上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少HTTP请求的数量。 二、 CSS Sprites CSS Sprites直译过来就是CSS精灵 ， 即页面上有许多重复的图片，可以选择用 精灵图的的方式还有压缩图片和更改图片格式， 使用CSS Sprites还有可能降低下载量 ，可能大家会认为合并后的图片会比分离图片的总和要大，因为还有可能会附加空白区域。实际上，合并后的图片会比分离的图片总和要小，因为它降低了图片自身的开销，譬如颜色表、格式信息等。 还有一些 小图片尽量用字体图标替代， 路由懒加载 1.v-loading 减慢table的渲染速度 2.文件压缩，js、图片压缩后返回前台，以及图片格式的选择 3.查看后台接口返回速度 4. 核心 采用路由懒加载提升加载熟读 懒加载： 非懒加载的路由配置： 来源： https://blog.csdn.net/WebDestiny/article/details/100119649

前些时间也是想写点关于 CMD 模块规范的文字，以便帮助自己理解。今天看到一篇知乎回答，算是给了我一点启发。 同步写法却不阻塞？ 先上一个 sea.js 很经典的模块写法： // 定义一个模块 define(function(require, exports, module) { // 加载jquery模块 var $ = require('jquery'); // 直接使用模块里的方法 $('#header').hide(); }); 按道理加载模块，就是需要等 jquery.js 加载完毕才能使用，应该是一个异步的过程，为什么可以写成同步的形式呢？这是用了什么黑科技？ 原来作者玉伯大佬用了一个小魔法来“欺骗”我们。而 卢勃 大神在 知乎 给了一个很精彩的解释，这里直接分享下： 也就是说， require.js 和 sea.js 都是在执行模块前预加载了依赖的模块，并没有比 require.js 显得更“懒加载”，只是所依赖模块的代码执行时机不同。 require.js 加载时执行，而 sea.js 是使用时执行。 其实从代码的写法也看得出来， require.js 的依赖模块在加载后便有了执行结果，并作为回调函数的实参传入。 reuiqre.js 写法： // 加载完jquery.js后，得到的执行结果$作为参数传入了回调函数 define(['jquery'],

话说前头： 上次写了一篇webpack的学习心得，webpack能做到提升前端的性能，其模块打包最终生成一个或少量的文件能够减少对服务端的请求。除此之外，本次的图片懒加载（当然不仅限于图片，还可以有视频，flash等）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载所有的图片，从而在一定程度从减少服务端的请求。 懒加载介绍： 通俗介绍：懒加载怎么个懒法，就是你不想看就不给你看，我也懒得加载出来，懒得去请求。通俗的说就是你不要就不给你，怎么地。举个栗子，比如在进入某个页面的时候，它会有许多的图片，有些图片可能在下面，当我们点进页面但没有滑动下去或没看完整个页面，那么下面的图片就会"没用"，加载了也白加载，而且还降低了网页的加载速度。因此用懒加载能当滚动到可视区域时才加载当前的图片。 原理：图片的加载是由src的值引起，当对src赋值时浏览器就会请求图片资源，基于这个，可以利用html5属性data-XXX来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src，酱就能实现图片的按需加载，也就是懒加载了。 优点：提高前端性能，图片在需要的时候才加载，减轻服务的负担，提高页面的加载速度，能够减少带宽。 懒加载实现方式: 1.使用jquery-lazyload.js，jQuery的插件用于懒加载使用，需要依赖jQuery。 jquery

原文: http://blog.gqylpy.com/gqy/358 图片懒加载概念 图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将会大大增加页面的首屏加载时间。为了解决这个问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏请求数的技术就被成为“图片懒加载”。 网站一般如何实现图片懒加载技术呢？ 在网页源码中，在img标签中首先会使用一个“伪属性”（通常使用src2，original...）来存放真正的图片链接，而并非存放在src属性中。当图片出现到页面的可视化区域中时，会动态将伪属性替换成src属性，完成图片的加载。 实例：Python爬虫抓取站长素材网中的图片 import os import requests from lxml import etree import urllib.request from fake_useragent import UserAgent as ua from concurrent.futures import ThreadPoolExecutor # 站长素材网 url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html' headers = { 'User

图片懒加载概念 　　图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将大大增加页面的首屏加载时间。为了解决这种问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数的技术就被称为 “ 图片懒加载 ”。 原理： 　　先将 img 标签的 src 链接设为同一张图片（比如空白图片），然后给 img 标签设置自定义属性（比如 data-src ） , 然后将真正的图片地址存储在 data-src 中，当 JS 监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到 src 属性中。达到懒加载的效果。 案例：抓取站长素材 http://sc.chinaz.com/ 中的图片数据 　　在浏览器中加载时，在可视化区域的图片是src，不在可视化区域的是src2。但是使用request模块发送请求时，没有可视化区域，所以都是src2。 1 # -*- coding:utf-8 -*- 2 import requests 3 from lxml import etree 4 if __name__ == "__main__": 5 url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html' 6 headers = {

1.啥是图片懒加载 也就是 图片在浏览器可以看到的范围内 把图片加载出来 2.为啥要懒加载 因为要减少请求加载 优化速度 3.首先 我们要forEach循环所有图片 把所有图片加载一遍 lazyRender()function lazyRender() { $('.cover img').each(function () { 4.在循环里面进行一系列判断 if (checkShow($(this)) && !isLoaded($(this))) { loadImg($(this)); } }) } 5.我使用了两个方法来进行判断是否让他显示加载出的图片 checkShow($(this) 和 !isLoaded($(this)) 6.第一个方法 根据浏览器的自身高度 和 当前位置距离浏览器的高度 以及 每个图片距离浏览器顶部的高度 function checkShow($img) { // 传入一个img的jq对象 var scrollTop = $(window).scrollTop(); //页面向上滚动的距离 var windowHeight = $(window).height(); // 浏览器自身高度 var offsetTop = $img.offset().top; //每张图片距离头部的距离 if(offsetTop < (scrollTop +

原文: http://blog.gqylpy.com/gqy/358 " 图片懒加载概念 图片懒加载是一种网页优化技术。图片作为一种网络资源，在被请求时也与普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，将会大大增加页面的首屏加载时间。为了解决这个问题，通过前后端配合，使图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏请求数的技术就被成为“图片懒加载”。 网站一般如何实现图片懒加载技术呢？ 在网页源码中，在img标签中首先会使用一个“伪属性”（通常使用src2，original...）来存放真正的图片链接，而并非存放在src属性中。当图片出现到页面的可视化区域中时，会动态将伪属性替换成src属性，完成图片的加载。 实例：Python爬虫抓取站长素材网中的图片 import os import requests from lxml import etree import urllib.request from fake_useragent import UserAgent as ua from concurrent.futures import ThreadPoolExecutor # 站长素材网 url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html' headers = { 'User