ajax - 接口、表单、模板引擎
1. 今天继续ajax的一个学习，首先明确一个观念，接口，什么是接口，当使用ajax请求数据时，被请求的url就叫做数据接口也就是接口，注意每个接口必须有请求方式，这里有一个接口的测试工具，postman自称是全球最快的，反正使用起来没多大毛病，使用这个软件的时候有一个注意点就是在post请求的时候 ...
在小程序当中渲染树
我们可以很轻松的去遍历一棵树，无论是广度优先遍历还是深度优先遍历，那么怎么在小程序当中渲染一棵树呢？ 先看一下我们深度优先遍历的代码 function dfs(tree) { if(!tree) return console.log(tree.value) if (tree.children) { ...
浅谈前端性能优化
前端性能优化主要分两块： 一是资源加载 1.多使用内存、缓存和其他方法 2.减少CPU计算量，减少网络加载耗时。 以上适用所有编程的性能优化-空间换时间 3.减少资源体积：压缩代码，图片精灵 4.减少访问次数：合并代码（js模块化，最后打包成一个JS）、SSR服务器端渲染，缓存 5.使用更快的CDN ...
浏览器的渲染过程
一、从用户请求到浏览器渲染的过程大致如下 1.用户输入域名，然后DNS解析成IP地址 2.浏览器根据IP地址请求服务器 3.服务器响应http请求，并返回给浏览器 4.浏览开始渲染： 。根据html，生成DOM TREE 。根据css，生成CSS TREE 。将DOM TREE和CSS TREE结合 ...
React生命周期和响应式原理(Fiber架构)
注意：只有类组件才有生命周期钩子函数，函数组件没有生命周期钩子函数。 生命周期 装载阶段：constructor() render() componentDidMount() 更新阶段：render() componentDidupDate() 卸载阶段：componentWillUnmount() ...
React避免组件重复渲染
##前言 在 React 开发中如果不去管组件的重复渲染问题，项目稍微复杂一点性能将不堪入目，下面将介绍项目中最常见的例子及解决方案（仅 hooks 组件）。 ##预先了解所用知识 React.memo React.useCallback React.useMemo useMemoizedFn（利用 ...
使用 content-visibility 优化渲染性能
最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。 这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。 何为 content-visibility？ content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略 ...
Vue3系列12--keep-alive缓存组件
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 开启keep-alive 生命周期的变化. 初次进入时： onMounted> onActivated 退出后触发 deact ...
vue性能优化方法
路由懒加载：有效拆分App尺寸，访问时才异步加载 keep-alive组件缓存：避免重复创建组件实例，且能保留缓存组件状态 使用v-show复用DOM:避免重复创建组件 v-for遍历避免同时使用v-if 长列表性能优化：如果是大数据长列表，可采用虚拟滚动（不会将所有内容渲染，只是把可是区域渲染）， ...
记录--浏览器渲染流程解析
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 大家可能经常会听到 css 动画比 js动画性能更好这样的论断，或者是“硬件加速”，“层提升” 这样的字眼；要了解这些内容就需要对浏览器的渲染流程有个大致的了解，本文就是我个人对这些内容的一个总结梳理 需要注意的是： 本文仅个人学习总结梳 ...
layui动态渲染上传时在渲染外删除已选文件取消上传
【layui2.6.8】有多个文件上传的组件需要根据后台数据在页面加载时动态渲染在一个弹框里面。弹窗从table表格数据的【编辑】按钮打开，根据点击行展示不同的文件，对文件进行查询、删除、下载等管理。问题：选择文件，不上传，关闭弹窗再打开，刚选的文件虽然不见了，但依然能上传那个文件，需要打开弹窗时清 ...
Vue的模板语法（条件判断、显示列表）、组件嵌套
我们在上文的基础上，继续学习 条件判断：v-if、v-show >作用：用于控制元素的显示 > 区别： v-if:不渲染DOM，前端页面看不到标签，更节省性能（常用） v-show:渲染DOM。将元素设置为display：none 我们看如下代码，将他们都取值为true时，表示显示 <templat ...