性能优化
CaseyWei
感激每个遇见的人
展开
-
前端性能优化 —— reflow(回流)和repaint(重绘)
回流(reflow):指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。页面上节点是以树的形式展现的,我们通过js将页面上的一个节点删除,此时为了不让剩下的节点脱节,将断点结合起来重新形成一棵树。而这个重新结合过程就是回流。就是由于某些修改,要将元素回过头来重新“流”一遍。重绘(repaints):是一个元素外观的改变所触发的浏览器行为,例如改变vid...原创 2019-02-17 12:08:08 · 410 阅读 · 0 评论 -
前端如何提升页面加载速度
性能黄金法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。提升加载速度的方式:一、减少HTTP请求(1).合并脚本 和样式表将多个样式表或者脚本文件合并到一个文件中,可以减少HTTP请求的数量从而缩短效应时间。 不过:合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本,...原创 2019-02-23 14:47:55 · 488 阅读 · 0 评论 -
前端|加载的图片太多五种优化方法
摘要web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长.本篇将针对图片太多或者太大总结几种优化方案.一.当图片太多时方案一:将图片服务和应用服务分离(从架构师的角度思考)对于这个方案对于经验尚浅的我来说是考虑不多...原创 2019-04-17 21:11:17 · 7332 阅读 · 0 评论 -
前端静态资源如何实现缓存
缓存分类强缓存 (一般不会向服务器发起请求)** 服务端通过Cache-control(http1.1) Expires(http1.0)字段设置, Cache-control优先级高于Expires**Cache-control 常用属性值:private: 私有缓存设备(浏览器)public: 公有缓存设备(cdn )max-age: 时间段,指定缓存最大有效时间,秒为单位...原创 2019-05-05 11:14:21 · 3135 阅读 · 0 评论 -
虚拟DOM的理解与实现
1.为什么需要虚拟DOMDOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。如果对前端工作进行抽象的话,主要就是维护状态和更新视图;而更新视图和维护状态都需要DOM操作。其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性。在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差;有了jQuery强大的选择器以及高度封...原创 2019-08-08 20:42:20 · 193 阅读 · 0 评论 -
虚拟DOM和真实DOM的区别
虚拟DOM与真实DOM的区别(注意:需不需要虚拟DOM,其实与框架的DOM操作机制有关): 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意!),最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗 真实DOM频繁排版与重绘的效率是相当低的 虚拟DOM有效降低大面积(真实DOM节点)的重...原创 2019-08-08 21:07:49 · 14041 阅读 · 0 评论 -
操作DOM慢的原因
一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来。 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint)。下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些...原创 2019-08-08 21:14:28 · 468 阅读 · 0 评论