![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
性能优化
文章平均质量分 74
对网页性能进行优化方案
huangpb0624
这个作者很懒,什么都没留下…
展开
-
新一代 Web 预渲染技术
(LCP)(最大内容渲染)占据着最重要的位置,这个指标也很好理解,也就是一个网页当前视口中可见的最大元素的渲染时间。很好理解,就是当我们还没有访问页面是提前对页面进行渲染,等到我们真正访问页面时就不需要再花费额外的时间去渲染页面了。的方式,对于一些拥有静态内容的页面,比如博客,一般要预渲染的页面都是固定的 ,可以用静态配置。这种方式类似,会提前获取未来需要加载的页面所需的资源,但不会完全预渲染页面,也不会执行。不同的是,预渲染的请求在 Network 看板里是没办法直接看到的,因为它们是在。转载 2023-09-18 21:41:11 · 1293 阅读 · 0 评论 -
内存泄漏问题排查
使用 Chrome Devtools 分析内存问题 如何使用 Chrome DevTools 检测和修复内存泄漏原创 2023-06-05 22:53:04 · 303 阅读 · 0 评论 -
浏览器网页闪退原因分析
浏览器中网页闪退可能由多种原因引起。以下是一些可能的原因:内存问题:如果浏览器占用过多内存,系统可能会强制关闭某些页面或整个浏览器以保护系统的稳定性。扩展或插件冲突:某些浏览器扩展或插件可能与网页的代码或其他扩展产生冲突,导致网页闪退。不兼容的网页元素:有时,网页上的特定元素(如脚本、样式或媒体)可能与浏览器不兼容,导致网页崩溃或闪退。缓存问题:缓存是浏览器用于存储网页数据的临时存储区域。如果缓存数据损坏或过期,浏览器可能无法正确加载网页,从而导致闪退。原创 2023-06-04 09:57:35 · 13457 阅读 · 0 评论 -
Vue虚拟列表插件vue-virtual-scroller之中文文档
是一个高度可定制的虚拟滚动列表插件,它可以在大量数据下提供高性能的渲染和滚动。它可以处理各种类型的数据,例如列表、表格、瀑布流等,并且支持水平和垂直滚动,也支持动态列表项。vue-virtual-scroller的API和事件系统也非常丰富,可以让开发者轻松地自定义滚动逻辑和交互效果。翻译 2023-05-21 18:30:24 · 13847 阅读 · 4 评论 -
js异步加载、预加载资源、dns预解析
异步加载 js 的几种方式<script src="script.js"></script>以上写法是平常常用的写法,浏览器遇到该script 脚本会立即加载并执行此脚本,是一个同步的过程。有时候我们想让 script 脚本异步加载,那要怎么处理呢?方式一:在 <script> 标签中加上 defer 或 async 属性<scr...原创 2018-11-17 11:25:04 · 4582 阅读 · 0 评论 -
网页性能调试
页面帧(Performance -> FPS,Rendering -> FPS meter)、事件(Performance -> Event Log)和实际内存(Memory,Performance Monitor -> JS heap size)使用三个方面发现程序的问题。如果一个页面比较卡,可能是由以下几方面造成的:内存泄露。使用 Memory 的3次快照查看总...原创 2020-02-16 23:58:34 · 3431 阅读 · 1 评论 -
仿“今日头条”效果的js无限滚动加载
效果《今日头条》网页里页面向下滚动时,新闻会不断的追加。查看了dom 元素,他们是把新请求到的新闻不断地追加到 ul 里。思路1.判断网页是否滚动到了底部,并且当前没有请求在执行2. 请求数据3. 追加数据细节1. 可以规定距离页面底部多少距离算底部(这里用的是20),在这个区域内会请求数据2. 用一个状态锁isFetching 判断当前有没有请求正在执行,有...原创 2019-06-01 22:36:59 · 1853 阅读 · 0 评论 -
设计无限滚动下拉加载,实践高性能页面真谛
设计无限滚动下拉加载,实践高性能页面真谛UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用:豆瓣首页是一个,Facebook的Timeline是一个,Tweeter的话题列表也是一个。当你向下滚动,新的内容就神奇的“无中生有”了。这是一个得到广泛赞...转载 2019-06-01 22:44:39 · 662 阅读 · 0 评论 -
3种常用的图片压缩方法
3种常用的图片压缩方法:把图片上传到阿里云或七牛云,借用云端的图片缩放技术进行压缩。后端对图片尺寸大小进行压缩。前端用 Canvas 作为媒介压缩图片。作为一名前端攻城狮,主要介绍用 Canvas 作为媒介压缩图片。...原创 2018-06-03 22:26:47 · 28898 阅读 · 1 评论 -
高性能渲染十万条数据(时间分片)
原文:「前端进阶」高性能渲染十万条数据(时间分片) - 掘金原理:就是把本来要一次性渲染10万条数据的任务分成,n个每次渲染10条或者20条的小任务。优点:可以提高列表可视区首屏的渲染速度 减少页面开始加载到能响应用户操作之间的时间...转载 2022-01-04 00:09:39 · 390 阅读 · 0 评论 -
vue 解决seo优化之预渲染prerender-spa-plugin
最全、最详细的解释请看prerender-spa-plugin 插件 Github解决SEO(Search Engine Optimization),首屏问题 , 页面较少,且预渲染相对于SSR比较简单,预渲染可以极大的提高网页访问速度。而且配合一些meat插件,完全可以满足SEO需求。预渲染流程预渲染原理在webpack打包结束并生成文件后(after-emit hook),会启动一个server模拟网站的运行,用puppeteer(谷歌官方的 headless 无头浏览器)访问.转载 2021-12-26 11:09:57 · 1649 阅读 · 0 评论