随笔分类 - 性能优化
发表于 2022-10-06 13:37阅读：277评论：0推荐：1
摘要：一、前情回顾 在讨论回流与重绘之前，我们要知道： 浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页
阅读全文 »
发表于 2022-10-05 12:40阅读：566评论：2推荐：3
摘要：一、懒加载的概念 概念：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，
阅读全文 »
发表于 2022-10-04 12:10阅读：455评论：0推荐：0
摘要：一、使用webpack优化前端性能方法 ⽤webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。 可通过webpack优化前端的手段： 代码压缩（删除多余的代码、注释、简化代码的写法等等⽅式） HTML文件代码压缩 使用HTMLWebpackPlugin插
阅读全文 »
发表于 2022-10-03 14:46阅读：227评论：0推荐：0
摘要：一、CDN的概念 概念：CDN（Content Delivery Network）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。 即内容分发网络。 二、CDN的
阅读全文 »
发表于 2022-10-02 16:00阅读：86评论：0推荐：0
摘要：一、节流 概念：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。 类似于技能CD。 应用：点击按钮，轮播图点击左右箭头。 插件lodash.js，它里面封装了函数的防抖与节流业务。 <p>计数器：<span>0</span></p> <button>
阅读全文 »
发表于 2022-09-30 14:25阅读：353评论：0推荐：0
摘要：一、常见的图片格式 BMP 是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。 GIF 是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格
阅读全文 »
发表于 2022-09-29 10:09阅读：143评论：0推荐：0
摘要：一、项目优化 1.去掉打印console 需求：在开发环境中，保留打印console；在生产上线环境，自动去掉打印console 使用步骤： 第一步：在项目根目录下，创建如下图两个配置文件 在.env.development中(开发环境变量) NODE_ENV=development 在.env.p
阅读全文 »
