![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端性能优化
cq-wangyong
记录所学;
不做框架的搬运工,学做框架的创造者
展开
-
同时渲染大量数据优化-虚拟列表
在网页里面,在某个可视容器内(某个div)一次性渲染所有数据,其实用户也只能看见一部分数据,其余得通过滚动来查看;那么我们可以只渲染可见部分数据,不可见部分数据不渲染,通过上下padding来进行占位使其可以滚动;滚动得时候不断计算可所需展示数据的开始下标和结束下标来截取可视数据;<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta nam原创 2021-01-08 02:02:53 · 321 阅读 · 0 评论 -
同时渲染大量数据优化-时间分片
一次性渲染:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <原创 2021-01-08 01:13:09 · 217 阅读 · 0 评论 -
浏览器渲染过程及性能优化
渲染网页,浏览器需要处理一系列的中间过程,优化性能就是了解这个过程中发生了生什么-即CRP(critical rendering path,关键渲染路径)浏览器渲染流程: 先生成dom树 请求css,构建css对象模型,即cssOM dom树和cssOM树组合起来构建一个渲染树,最终输出一个包含所有可见节点及样式的渲染树 构建渲染树的过程: 1.从dom树根节点开始遍历每个可见节点 不可见节点(meta,s.原创 2020-07-07 01:24:11 · 507 阅读 · 3 评论