随笔分类 - 性能优化
摘要:性能优化这个词经常会在前端的工作或面试中遇到,这个东西说难好像也并不怎么难,毕竟谁都能说上几点。但是如果你想在工作上遇到各种场景的性能瓶颈时都有直击本质的性能方案,或者在面试时让面试官眼前一亮,那就不能只拘泥于『想到哪说到哪』或者『说个大概』,而要有一套体系化的、各个角度的、深入了解的知识图谱。这篇
阅读全文
摘要:1. 基于【Event Loop】的长列表渲染优化 背景 日志查看、指令展示 等 列表很长,且不能使用分页、触底懒加载的场景 使用 vue+element-ui 表格展示接口返回数据,数据量为万级。 页面内容白屏二十秒左右后显示出数据,期间页面其他功能/按钮无法正常的交互,之后页面滚动、点击等事件也
阅读全文
摘要:前言 懒加载也就是延迟加载。当访问一个页面的时候,先把 img 元素或是其他元素的背景图片路径替换成一张大小为 1*1px 图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,从而减轻服务器压力,避免用户等待时间过长(一般在网站图片很多的时候使用
阅读全文
摘要:1. 减少 HTTP 请求 一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP : 自己找了一个 HTTP 请求,请求的文件大小为 28.4KB。 名词解
阅读全文