本文介绍了什么是getBoundingClientRect；以及获取width,height的兼容性写法；最后介绍了两个使用场景：获取页面元素的位置和判断元素是否在可视区域。

WebP 是什么？ WebP 是一种同时提供了有损压缩与无损压缩的图片文件格式。可以大大压缩图片的大小，并且图片的质量和 png、jpeg 等相同。

在类电商类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验，所以进行图片懒加载优化势在必行。 我们先来看一下页面启动时加载的图片信息。 如图所示，这个页面启动时加载了几十张图…

每一个开发者在开发项目中，不可避免要和图片打交道，优化图片似乎也成了一个必修课。图片优化也不仅仅是性能上的优化，还要进行体验上的优化。至于怎么优化图片，没有固定的方式，只能具体场景，具体分析，选择合适的方案。不多说，下面也简单介绍下自己处理过，了解过的一些方式。如果大家有补充，…

加载的图片太多或者太大导致页面加载完成慢的问题；图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长,导致用户长时间等待。 对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以…

1. 为什么用 webp? 同样的质量下，更小的体积，更快的加载速度。 缩短的加载时间远远大于解码所需要的时间。 2. webp兼容问题 webp的兼容性不是很乐观，尤其在ios safari上一片红。 这里我们在客户端用js检测是否支持WebP，支持请求webp图片，不支持保…