- 博客(12)
- 收藏
- 关注
RSS订阅原创 浏览器缓存类型
http缓存：基于HTTP协议的浏览器文件级缓存机制（强制缓存与协商缓存）。websql：将数据以数据库的形式存储在客户端，根据需求去读取，允许sql语句查询。indexDB：在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。浏览器可能对indexDB有50M大小的限制，一般用户保存大量用户数据并要求数据之间有搜索需要的场景。cookie：一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。localstorage：htm.
2020-12-15 10:59:53
716
原创 服务端缓存
CDN缓存用户浏览器与服务器的交互流程客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接响应用户请求，此时一个完成http请求结束；如果数据已经过期，那么CDN还需要向源站发出回源请求（back to the source request）,来拉取最新的数据。CND的作用CDN的全称是Content Delivery Network，即内容分发网络。可以理解为分布在每个县城的火车票代售点，用户在
2020-12-15 10:20:14
491
原创 浏览器缓存的位置
缓存位置的类型缓存位置有四种，各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。Service WorkerMemory CacheDisk CachePush CacheService WorkerService Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。基于h5的web worker，所以绝对不会阻碍当前js线程的执行。最重要的工作原理就是：后台线程：独立于当前网页线程；网络代理：在网页发起请求时代理，来缓存文件；使用 Service W
2020-12-14 18:45:18
2300
原创 浏览器端强缓存与协商缓存
强缓存强缓存的实现浏览器请求一个资源文件，服务端在response header中对该文件做缓存配置，缓存时间、缓存类型都由服务端控制。之后每次用户正常打开这个页面，浏览器会判断缓存是否过期，没有过期就从缓存中读取数据并返回200状态。cache-controlmax-age=31536000，表示资源最大有效时间的秒数，是一个相对值，不会因为用户修改本地时间而导致失效。public/private：public表示浏览器和代理服务器（nginx、CDN）都可以缓存；private表示仅浏
2020-12-14 14:53:14
127
原创 Ag-Grid Column的定义与更新
Columns定义React中声明式定义<AgGridReact rowSelection="multiple" rowData={rowData}> <AgGridColumn field="make" sortable={true} filter={true} checkboxSelection={true}></AgGridColumn> <AgGridColumn field="model" filter={true}></AgGr
2020-11-24 18:51:21
3547
原创 Ag-Grid React入门
Ag-Grid和React兼容性:reactAg-Grid15.x18 - 21.2.016.3X22+安装npm install --save ag-grid-community ag-grid-react ag-grid-enterpriseag-grid-community: 原始版本，零依赖性，不会拉取第三方依赖关系到应用程序中分组等高级功能是ag-grid-enterprise独有的功能。可以免费试用，如果打算用于生产项目，需要获取企业许可证密钥。
2020-11-24 17:41:34
4924
1
原创 react组件通信
react组件间的通信包含以下几种形式：1、父组件向子组件通信2、子组件向父组件通信3、跨级组件通信4、非嵌套关系组件间的通信父组件向子组件通信父组件通过props向子组件传递需要的信息// 子组件const Child = (props) => { return <div>{props.name}</div>}// 父组件const Parent = () => { return <Child name="react传值" />}
2020-11-17 16:10:52
89
原创 前端性能优化
优化原则：以空间换时间，使用内存、缓存等方法减少请求次数，减少CPU计算减少IO操作优化 - 资源加载压缩代码，减少代码体积（如webpack打包时的开发模式和生产模式）合并代码（图片、css文件等）减少请求次数、采用缓存策略：浏览器静态资源缓存SSR：服务端渲染技术CDN：让静态资源加载更快优化 - 渲染css放在head中，js放在body后面图片懒加载使用DomContentLoaded，尽早执行jsdom查询操作缓存dom增删操作，多次操作合并为一次操作事件节流防
2020-11-11 11:16:08
148
原创 常见面试题 react
react生命周期componentWillMount：组件即将被装载、渲染到页面上componentDidMount:组件真正在被装载之后componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候componentWillUpdate:组件即将更新不能修改属性和状态componentWillUnmount:组件即将销毁shouldComponentUpdate 是做什么的？用来判断是否需要调用
2020-11-09 17:59:47
116
原创 前端面试题javascript
CSS盒子模型所有HTML元素可以看作盒子，它包含content、padding、border、margin。JSeval的用法eval() 可以接受一个字符串str作为参数，并把这个参数作为脚本代码来执行。数组的方法pop、shift、unshift、push: 增加或删除元素。会改变元数组的内容，删除是返回的是删除的内容，增加元素返回的则是改变后数组的长度。其他方法：纯函数：slice、concat、map、filter非纯函数：reduce、forEach、some、everyl
2020-11-09 11:31:43
131
原创 babel6.X、babel7.x、 babel8.x用法
babel6.x使用方法需要安装的包：npm install babel-loader --savenpm install babel-core --savenpm install babel-preset-es2015 --savenpm install babel-preset-stage-0 --savenpm install babel-plugin-transform-runtime --savewebpack.config.js配置文件{ test: /\.js$/,
2020-11-05 23:11:33
912
原创 node和npm版本管理
安装node和npm：访问nodejs官网（https://nodejs.org/en/）,选择合适的版本安装，node安装时自带npm查看版本号：node -vnpm -v更新npm到最新版本npm -g install npmnode版本管理：sudo npm install -g n // node版本管理工具n stable // 安装最新稳定版noden 8.11.3 // 安装指定版本noden ls // 查看所有node版本号n rm 8.0.0 //删除某个
2020-11-05 15:40:12
1150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人