preload 提升了资源加载的优先级，使得它提前开始加载（预加载），在需要用的时候能够更快的使用上。另外 onload 事件必须等页面所有资源都加载完成才触发，而当给某个资源加上 preload 后，该资源将不会阻塞 onload。 此时的 main.js 加载顺序出现在了 …

为什么要了解浏览器的渲染原理？了解浏览器的渲染原理有什么好处？我们做前端开发为什么非要了解浏览器的原理？直接把网页做出来，什么需求，直接一把梭，撸完收工不好吗。 重排也叫回流（Reflow），重绘（Repaint），会影响到浏览器的性能，给用户的感觉就是网页访问慢，或者网页会卡…

预加载属性 preload 与 prefetch 区别 preload 告诉浏览器立即加载资源; prefetch 告诉浏览器在空闲时才开始加载资源； preload、prefetch 仅仅是加载资源

随着互联网发展至今，对于网站来说，性能显的越来越重要了，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。所以，我们需要重视与CSS相关的性能优化。

周六晚上七点多，我正在看书呢，突然女朋友跑过来问我她的IPAD去哪了，火急火燎的。 她拿到了IPAD之后就不再理我了，不过作为一个程序员，我还是比较好奇这么大的流量虎牙到底能不能扛得住，哈哈哈。于是我过去看了一下，结果看到了下面这一幕： CDN的全称是Content Deli…

CDN可以加快用户访问网络资源的速度和稳定性，减轻源服务器的访问压力。 主要思路： 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。 实现方法： 通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够…

在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成…

防抖和节流 2021/5/5 参考文章 一. 为什么要用到防抖节流 当函数绑定一些持续触发的事件如：resize、scroll、mousemove ，键盘输入，多次快速click等等， 如果每次触发都

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