![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
性能优化
前端性能优化
菜鸡前端进阶
这个作者很懒,什么都没留下…
展开
-
性能优化(7)-webpack性能优化
webpack性能优化减少 Webpack 打包时间优化 LoaderHappyPackDllPlugin代码压缩一些小的优化点减少 Webpack 打包后的文件体积按需加载Scope HoistingTree Shaking监视和分析应用程序记录bundle的大小webpack-dashboardbundlesize在这部分的内容中,我们会聚焦于以下三个知识点有哪些方式可以减少 Webpack 的打包时间有哪些方式可以让 Webpack 打出来的包更小监视和分析应用程序减少 Webpack原创 2020-05-14 16:27:17 · 491 阅读 · 0 评论 -
性能优化(6)-文件优化
文件优化图像优化选择正确的图像格式消除和替换图像提供缩放的图像资产图像精灵延迟加载非关键图像延迟加载为何有用?缓存图像资产预加载关键图像资产高效压缩图像使用服务器与 CDNCloudinary 和 Imgix需要了解的基本信息是什么?接下来介绍图像处理默认情况下会发生什么?性能如何?两种服务的比较结果如何?结论CDN图像优化图像通常占据了网页上下载字节的大部分,通常也占据了大量的视觉空间。 因此,优化图像通常可以最大限度地减少从网站下载的字节数以及提高网站性能:浏览器需要下载的字节越少,占用客户端的带宽原创 2020-05-13 17:04:35 · 460 阅读 · 0 评论 -
性能优化(5)-如何推迟、延迟加载和与交叉观察者一起行动
用IntersectionObserver实现Lazy-Load什么是延迟加载(Lazy-Load)?为何要延迟加载图像或视频,而不是直接加载?IntersectionObserver API的引入Observer Vs. Event(观察者 Vs 事件)通用观察者的结构IntersectionObserver API什么是交叉观察者。交叉观察者初始化交叉观察者回调一些应用什么是延迟加载(Lazy-Load)?在网站典型负载中,图像和视频是非常重要的一部分内容。 不过遗憾的是,项目干系人并不愿意从其现有原创 2020-05-10 14:09:13 · 505 阅读 · 0 评论 -
性能优化(5)-懒执行
懒执行场景描述通用方案场景描述简单来说,懒执行(Lazy Execution)就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化,对于某些耗时逻辑并不需要在首屏就使用的,就可以使用懒执行。懒执行需要唤醒,一般可以通过定时器或者事件的调用来唤醒。通用方案某一业务功能如果被设置了懒执行,则需要满足特定条件后该功能才会被初始化(唤醒)。因此,从触发(唤醒)方式上来看,懒执行的通用方案可以大致上分为两个思路:自动唤醒和手动唤醒自动唤醒自动唤醒的核心思想是轮询,实现方法则是依靠 setInte原创 2020-05-12 12:47:03 · 803 阅读 · 0 评论 -
性能优化(4)-预加载和预渲染
预加载和预渲染预加载用例:字体用例:关键路径 CSS 和 JavaScript预渲染预提取预提取不会替换内容浏览器基于自身对资源重要性的判断,为不同类型的资源分配相应的优先级。当您发现任何资源标记的优先级不是您想要的优先级时,您能做什么?预加载<link rel="preload"> 告知浏览器当前导航需要某个资源,应尽快开始提取。 以下为相关使用示例:<link rel="preload" as="script" href="super-important.js"><原创 2020-05-25 12:46:46 · 1788 阅读 · 0 评论 -
性能优化(3)-HTTP/2简介
HTTP/2简介SPDY 与 HTTP/2 简史设计和技术目标二进制分帧层数据流、消息和帧请求与响应复用数据流优先级每个来源一个连接流控制服务器推送PUSH_PROMISE 101标头压缩HPACK 的安全性和性能深入阅读HTTP/2 可以让我们的应用更快、更简单、更稳定 - 这几词凑到一块是很罕见的!HTTP/2 将很多以前我们在应用中针对 HTTP/1.1 想出来的“歪招儿”一笔勾销,把解决那些问题的方案内置在了传输层中。 不仅如此,它还为我们进一步优化应用和提升性能提供了全新的机会!HTTP/2转载 2020-06-20 21:28:30 · 360 阅读 · 0 评论 -
性能优化(2)-浏览器缓存
浏览器缓存机制:强缓存、协商缓存概述基本原理相同点不同点强缓存ExpiresCache-Control协商缓存Last-Modified,If-Modified-SinceETag、If-None-Match几种状态码的区别如何选择合适的缓存概述良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度。通常浏览器缓存策略分为两种:强缓存和协商缓存基本原理浏览器在加载资源时,根据请求头的expires和cache-control判断是否命中强缓存,是则直接从缓存读取资源,不会发请求到服务器。如原创 2020-05-23 20:48:33 · 195 阅读 · 0 评论 -
性能优化(1)-DNS预解析
DNS预解析原理如何使用打开和关闭DNS预解析自动解析手动添加解析在浏览器中设置看看淘宝的DNS预解析使用场景如何更好的使用?对哪些资源做手动prefetch域名发散和域名收敛域名发散域名收敛当用户输入URL后第一步就是DNS预解析原理域名系统 - 维基百科,自由的百科全书Domain Name System 是将域名和IP地址相互映射的一个分布式数据库DNS 预读取是一项使浏览器主动去执行域名解析的功能,其范围包括文档的所有链接,无论是图片的,CSS 的,还是 JavaScript 等其他用原创 2020-05-17 15:53:03 · 927 阅读 · 0 评论