总结了11个可以极大提升我们开发效率的chrome调试技巧，一键重发请求、条件断点、复制内容、截取全屏等等。相信对你也会有所帮助噢！！！

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示： 可以看到，script 阻塞了浏览器对 HTML 的解析，如果…

渐进式图片渲染和 HTTP/2 多路复用技术已经问世一段时间，但是现在我们将两者以新的方式结合从而发挥出更大的力量。利用 Cloudflare 的渐进式流，图片加载可以缩短一半时间，而浏览器可以更快开始渲染页面。 建立 HTTP/1.1 连接的服务器对向客户端发送资源的顺序没有…

你是否好奇 Medium 是如何加载图片的？或许，你已经注意到图片是分多个步骤加载渲染的。首先，显示一张模糊版本的图片，然后，用全尺寸的图片替换掉。 我们可以把图片加载技术分为两个不同的功能。 1. 懒加载 懒加载是一种非常好的技术，它可以明显提升网站的性能。 想象一下，你写了…

通过 url-loader 将小文件转换成 base64 URIs 内联到 bundle.js 中，可以减少 HTTP 请求次数。 输出的资源只有一张 51Kib 的图片，22Kib 的图片被转换成 base64 Uris 字符串内联到 bundle.js 中去了。 在Chro…

今天凌晨一点，突然有个人加我的qq，一看竟然是十年前被我删掉的初恋。。。。 因为之前在qq空间有太多的互动，所以qq推荐好友里面经常推荐我俩互相认识。。。。谜之尴尬 同意好友申请以后，仔细看了她这十年间所有的qq动态和照片。 她变美了，会打扮了，以前瘦瘦的身材配上现在的装扮和妆…

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

vue 的 computed 属性默认是只读的，你可以提供一个 setter。它可以优化我写组件的逻辑，适用于父组件处理的值和子组件处理的值是同一个的情况 我们常看到一些优秀的组件库，传入的值既可以是一个 String/Number，也可以是一个函数。 比如ElementUI的…

前端监控可以分为三类：数据监控、性能监控和异常监控。 统计这些数据是有意义的，比如我们知道了用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。 性能监控指的是监听前端的性能，主要包括监听网页或者说产品在用户端的体验。常…