前端性能优化
文章平均质量分 85
Yivisir
一个卑微的前端萌新,正在努力中
展开
-
浏览器原理的小知识
浏览器原理 浏览器架构 进程与线程 进程:一个应用运行的实例。当应用启动时,操作系统为该程序划分一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,这个运行环境就是进程。 线程:由进程来启动和管理,进程中使用多进程可以提高运算效率。 两者的关系: 进程中的任意线程出错,可能会导致进程崩溃。 线程之间是共享进程数据的。 进程之间的内容相互隔离。 进程销毁后,操作系统会回收这部分内存。 单进程浏览器:浏览器的所有模块都运行在一个进程里,这样会带来很多缺点:不稳定,不安全,不流畅。原创 2021-10-27 17:18:56 · 179 阅读 · 0 评论 -
前端性能:浏览器的重绘和回流
浏览器的重绘和回流 浏览器渲染机制 浏览器采用流式布局模型 浏览器将HTML解析成DOM树,CSS解析成CSSOM树,将DOM和CSSOM合并成Render树。 有了RenderTree,就需要计算他们在页面上的大小和位置,最后绘制到页面上。 由于浏览器使用流式布局,对Render Tree只需要计算一次布局,但是table元素及其内部元素需要进行多次计算,通常要花3倍同等元素的时间,因此要避免使用table。 重绘 由于结点的几何属性改变或者样式改变而不会影响布局的称为“重绘”。 例如:visibi原创 2021-09-29 15:32:08 · 230 阅读 · 0 评论 -
前端性能:缓存
缓存 缓存特征 命中率 某个请求能够通过缓存得到响应,称为缓存命中。 命中率越高,缓存利用率越高。 最大空间 缓存的最大空间通常在内存中,当缓存存放的数据量超过最大空间,需要淘汰部分数据来存放新的数据。 常见的缓存淘汰策略 FIFO:先进先出,先进入缓存的数据在缓存空间不够时会优先被清除。 LFU:最少使用策略。根据元素被使用次数判断,释放使用次数少的元素。 LRU:最近使用策略。根据元素上一次使用的时间戳,清除最远使用时间戳的元素。 其他:过期时间、随机请理、优先请理大对象。 浏览器缓存 按缓原创 2021-09-26 15:33:19 · 260 阅读 · 0 评论 -
前端性能:RAIL模式
RAIL模式 概念 RAIL是一个以用户为中心的性能模型,它把用户的体验拆分成几个关键点(例如,tap,scroll,load),并且帮你定义好了每一个的性能指标。 分为四个方面: Response Animation Idle Load 用户体验 用户对性能延迟的感知: 延迟时间 用户感知 0-16ms 很流畅 0-100ms 基本流畅 100-1000ms 感觉到网站上有一些加载任务 1000ms or more 失去耐心了 10000ms or m原创 2021-09-25 15:38:40 · 327 阅读 · 0 评论