前端性能优化
文章平均质量分 80
开发中经常用到的性能优化总结
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
Tree shaking 的概念、作用和原理
① 使用 ES6(ES2015)模块语法中的 import 和 export 才可以触发这个机制;这是因为 tree shaking 只能在静态 modules 下工作。ECMAScript 6 模块加载是静态的,因此整个依赖树可以被静态地推导出解析语法树。所以在ES6中使用 tree shaking 是非常容易的。② 在项目的 package.json 文件中,添加 "sideEffects" 属性;③ 使用 mode 为 "production" 的配置项以启用更多优化项。原创 2023-11-01 23:18:26 · 599 阅读 · 0 评论 -
前端理解的HTTP缓存(缓存的过程/策略/控制机制/作用和应用)
一、HTTP缓存有什么作用?二、浏览器的缓存策略有哪些?1、强缓存(Expires、Cache-control)2、协商缓存(Last-Modified、ETag)3、缓存过程是什么?三、浏览器缓存控制机制有哪些?1、使用HTML Meta 标签2、使用HTTP头信息控制缓存四、哪些请求不能被缓存?五、部署时缓存的问题1、我们不仅要缓存代码,还需要更新代码。如果静态资源名字不变,怎么让浏览器既能缓存,又能在有新代码时更新?原创 2023-07-12 16:36:31 · 3039 阅读 · 0 评论 -
什么是CDN?对前端有什么好处?
全称是 Content Delivery Network,内容分发网络。CDN 是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。① “分布式存储”:将中心平台的内容分发到各地的边缘服务器,使用户能够就近获取所需内容,降低网络用时,提高用户访问响应速度和命中率。利用了索引、缓存等技术。。原创 2023-07-11 21:32:54 · 634 阅读 · 0 评论 -
前端开发常用的工具库/插件库
https://weflow.io/下载地址:https://github.com/Tencent/WeFlow/releases说明文档:https://github.com/Tencent/tmt-workflowfavicon制作 - 在线工具Autoprefixer CSS online在线工具 - 你的工具箱TinyPNG – Compress WebP, PNG and JPEG images intelligentlyCan I use... Support tables for HTML5,原创 2019-07-09 15:15:24 · 97 阅读 · 0 评论 -
开发移动端官网总结_Vue2.x
1、自定义加载中效果2、HTML页面注入环境变量 / 加载CDN和本地库3、在 Vue 中使用 wow.js4、过渡路由5、全局监听当前设备,切换PC端和移动端6、移动端常用初始化样式7、官网默认入口文件8、回到顶部滑动过渡效果(显示与隐藏、滑动置顶)9、弹窗遮罩层10、多个组件全局注册成全局组件11、在js中图片引入方式12、锚点跳转13、事件防抖14、在vue中使用swiper(轮播效果)15、vue滑动事件(左右滑动切换)16、页面回到指定位原创 2023-06-01 18:52:56 · 549 阅读 · 0 评论 -
知识总结:WEB前端的优化方案
一般根据雅虎的黄金35定律对Web前端进行优化。从网页内容、CSS、JavaScript、图片、服务器端、cookie、移动客户端等方面进行优化。不过随着浏览器和协议等的发展,有一些已经逐渐被淘汰了。例如,“尽量减少HTTP请求数"这一条,在HTTP2协议下就不管用了,因为HTTP2实现了HTTP复用,HTTP请求变少反而降低了性能。因此要结合历史环境看待具体的优化原则和手段。对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。永远呈现必要的内容。原创 2020-07-28 17:27:26 · 366 阅读 · 0 评论 -
说说你对重绘和重排的理解,以及如何优化?
对DocumentFragment的操作来说,只会产生一次浏览器重排和重绘的操作,相比于频繁操作真实DOM元素的方法,会有很大的性能提升。这样只在隐藏和显示时触发2次重排;DocumentFragment 最核心的知识点在于它不是真实DOM树的一部分,它的变化不会引起DOM树重新渲染的操作,也就不会引起浏览器重排和重绘的操作,从而带来性能上的提升。浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。原创 2020-07-20 15:15:02 · 383 阅读 · 1 评论 -
说说你对前端的理解,以及应该具备什么能力
前端的基本功俺认为最重要的有以下几个:HTML / CSS JavaScript基础/进阶 前端性能优化 网络原理 设计模式 数据结构与算法 操作系统这些“基本功”可以有利于你项目的业务逻辑(设计模式),提高项目功能的性能(数据结构与算法),优化提升网络的通信效率(网络原理)能否写高质量代码的能力什么是高质量代码?如何写出高质量代码?都是我们要弄明白的问题。对于什么高质量的代码,俺的个人见解一下几个方面。第一,程序中的一些边界条件是否考虑清楚。通常我们前期写代码都是 bu原创 2020-08-12 10:18:48 · 183 阅读 · 0 评论 -
前端如何实现懒加载、预加载图片
监听屏幕滚动,计算图片的Y坐标,并计算可视区域的高度height,当Y小于等于(height+scrollTop)时,图片的src的值用data-src的来替换,从而来实现图片的懒加载。“当前可视区域的高度+滚动条距离顶部的高度 >= 页面的高度” 的时候,说明滚动条到达底部了。当滚动条到达底部的时候,页数加1,后台回来的数据合并之前存在的数据展示在页面上。指的是图片在页面渲染的时候先不加载,页面渲染完成后在指定动作触发后再加载图片。滚动条距离顶部的高度$(window).scrollTop()原创 2020-07-20 14:03:50 · 117 阅读 · 1 评论 -
说说如何借助webpack来优化前端性能?
通过webpack优化前端的手段有:① JS代码压缩 ② CSS代码压缩③ HTML文件代码压缩④ 文件大小压缩 ⑤ 图片压缩 ⑥ Tree Shaking⑦ 代码分离 ⑧ 内联 chunk原创 2023-04-11 11:14:45 · 1186 阅读 · 0 评论 -
谈一谈你知道的前端性能优化方案有哪些?
总结:对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。性能优化一个最重要的原则是:永远呈现必要的内容,我们可以通过懒加载非首屏资源,或者采用分页的方式将数据”按需加载“。原创 2023-04-10 11:48:20 · 140 阅读 · 0 评论 -
谈谈你对重构的理解
① 表格(table)布局改为DIV+CSS② 对于移动平台的优化③ 深层次的网站重构应该考虑的方面④ 通常来说对于速度的优化也包含在重构中⑤ 程序的性能优化(如数据读写)⑥ 对于JS、DOM的优化 、HTTP服务器的文件缓存等等… 在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化, 在扩展的同时保持一致的UI。原创 2023-04-18 10:55:19 · 435 阅读 · 0 评论 -
如果要做优化,CSS提高性能的方法有哪些?
① 内联首屏关键CSS ② 异步加载CSS ③ 资源压缩④ 合理使用选择器 ⑤ 减少使用昂贵的属性 ⑥ 不要使用@import⑦ 减少重排和不必要的重绘 ⑧ 其他原创 2023-04-10 11:51:24 · 249 阅读 · 0 评论 -
函数防抖和节流的原理、应用场景、区别、手写源码
如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)不管事件触发有多频繁,节流都会保证在规定时间内,一定会执行一次回调函数。节流的原理是在一段时间内只执行一次事件回调函数,如果在这段时间内事件又被触发了,则忽略该事件。防抖的原理是在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,那么会重新计时。任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。原创 2020-11-06 17:54:24 · 335 阅读 · 1 评论