前端优化
女程序媛的修炼笔记
一直修炼,持续升级,打败内心懒惰的小怪兽
展开
-
图片压缩——封装工具类(亲测一定有效)
创建compressImage.js/** *** 压缩图片 * * 注意可能出现压缩后比原图更大的情况,在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。 */export function compressImage (file, config) { let fileName = file.name const read = new FileReader() read.readAsDataURL(file) return new Promise(function (r原创 2020-07-14 11:25:41 · 358 阅读 · 0 评论 -
vue——图片懒加载和禁止图片使用缓存方法
图片预加载:图片预加载就是在网页全部加载之前提前加载图片。当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白。当然这种做法实际上降低服务器的性能换取了更好的用户体验。图片懒加载(缓载):延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数,因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器原创 2020-07-13 16:29:54 · 3922 阅读 · 0 评论 -
浅谈防抖与节流
用一句话总结防抖和节流的区别:防抖:是将多次执行变为最后一次执行,节流:是将多次执行变为每隔一段时间执行1.函数防抖(debounce)思路:在第一次触发事件的时候,不是立即执行函数,而是给出一个delay(延迟)时间值,例如500ms如果在500ms内没有再次触发该事件,则执行函数如果在500ms内有再次触发事件,则清除当前的计时器,重新开始计时器实现原理:实现的关键就在于setTimeOut这个函数,由于还需要一个变量来保存计时,考虑维护全局纯净,可以借助闭包来实现1.函数原创 2020-07-10 14:45:23 · 237 阅读 · 0 评论