本文目录一览：
图片懒加载和预加载
瀑布流布局思路： 首先确定列数，每次将新增的DOM结构添加到当前高度最矮的一列，以此类推，形成一种参差不齐的差异化布局形式。
懒加载主要是针对前端页面比较大而设计出来的一种方式，假如一个网页很大，又含有很多图片、视频内容，那么想一次性加载就会等待很久，懒加载就是只有在屏幕显示范围内的资源，被用户看到的内容才会真正去加载。
考虑使用图片的缓存机制，减少对服务器的访问压力。可以尝试使用懒加载的方式来加载图片，只有在图片进入可视区域时才加载，这样可以避免一次性加载多张图片带来的压力。
今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。-js如何实现懒加载图片
预加载：就是页面打开，图片什么的都加载好了（优先显示图片）延迟加载：优先显示别的，等别的显示完了，再加载图片（优先显示其他东西）各有所需，看你的用户需要优先看什么。
属于你的前端面试题来了,注意查收
封闭性 持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。
2vue初始化页面闪动问题？ webpack、vue-router v-cloak css：[v-cloak]：display：none 2什么是vue-router？ vue router 是官方路由管理器。-js如何实现懒加载图片
行元素与块元素的区别；如何清除浮动；定位方式当中，absolute与fixed、relative的区别；事件的兼容问题；Ajax是什么；如何优化你的页面；响应式布局是什么等等。
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。-js如何实现懒加载图片
//报错。加上static标识属于构造函数的方法。实例化出来的对象不能调用构造函数的方法，只能使用构造函数的原型protoType和对象原型中的方法。//报错。题中给构造函数添加了一个方法，然后使用对象的实例来调用改方法。-js如何实现懒加载图片
如何用JS实现图片懒加载
页面加载来自网络的图片时，可能会花费大量的时间，因此如果使用懒加载，能够让用户体验不到加载的过程 至此，我们便可以在页面中使用懒加载来优化用户体验了。
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。
如果使用的是jquery.min.js框架，就引入jquery.lazyLoad.min.js，这里不赘述了。
就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。
小图多可以用图标，例如阿里巴巴iconfont库 https：// 。使用精灵图。大图可以进行压缩，压缩网站eg： https：//tinypng.com/ 。
JS图片懒加载——前端性能优化
yahoo军规把大部分的前端优化都提到了，而在js优化这一块如果有兴趣的额，推荐大家去看《 高性能javascript 》，书里讲的非常详细。
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载。-js如何实现懒加载图片
预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能更好。
合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http请求数外，还可以充分利用缓存来提升性能。
简单来说就是在页面渲染过程中，图片不会一次性全部加载，会在需要的时候加载，比如当滚动条滚动到某一个位置时触发事件加载图片，通过js将img标签的data-src属性赋值给src属性。
js实现图片懒加载
1、页面加载来自网络的图片时，可能会花费大量的时间，因此如果使用懒加载，能够让用户体验不到加载的过程 至此，我们便可以在页面中使用懒加载来优化用户体验了。
2、预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。
3、实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载 。要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。-js如何实现懒加载图片
如何实现图片懒加载?
如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。-js如何实现懒加载图片
实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载 。要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。-js如何实现懒加载图片
图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。
