img元素srcset属性含义及作用
HTML img元素中有一个很少用的 srcset 属性，用于浏览器根据宽、高和像素密度来加载相应的图片资源。 属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如： <img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" /> 上面的例子表示浏览器宽度达到 800px 则加载 ...
Vue/2/3重点总结—理论篇
一、Vue哪里好？ 我认为一个好的框架首先有以下几点必要的特点 简单易学，文档完善，Api清晰易懂，容易上手 不会给程序员的开发过程带来很大的心智负担 社区完善，长期维护，有完整的生态系统 对业务逻辑及数据的关注度优先于框架本身的使用 低学习成本和使用成本 我认为，前端的发展思路永远是：在保证性能的基础上，...
前端常用性能优化方案
一切性能优化是根据网站测试结果去针对性进行的，不需要无脑的进行优化。另外，没有固定的优化策略，不同的项目要分而治之。 性能优化思路 了解浏览器工作原理及web渲染原理，认识影响性能的因素 使用如Performance、Lighthouse、PageInsight等工具对性能进行评估，帮助了解短板，说服Linder 使用控制台面板功能（如请...
前端缓存之Service Worker
什么是Service Worker Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。Service Worker 可以使你的应用先访问本地缓存资源，包括js、css、png、json等多种静态资源。 Service Worker的特点 独立于主JavaScript线程（...
优化资源阻塞Preload、Prefetch和Preconnect
本文介绍了前端开发如何优化资源的加载，减少资源往返时间。 Preload Preload 是一个新的控制特定资源如何被加载的新的 Web 标准，这是已经在 2016 年 1 月废弃的 subresource prefetch 的升级版。这个指令可以在 <link> 中使用，比如 <link rel="preload">。一般来说，最好使用 preload 来加载你最重要的资...
前端常见性能指标
文档流加载生命周期 DOMContentLoaded 是指页面元素加载完毕，但是一些资源比如图片还无法看到，但是这个时候页面是可以正常交互的，比如滚动，输入字符等。 jQuery 中经常使用的 $(document).ready() 其实监听的就是 DOMContentLoaded 事件。 load 是指页面上所有的资源（图片，音频，视频等）加载完成。jQuery 中 $(do...