自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(40)
  • 收藏
  • 关注

原创 React-Native学习笔记(一)——结构分析与视图案例

React Native 目录结构小霞上手来一个新项目~,踏实搞明白结构和流程????一个新的 React Native 项目,根目录下的文件和目录结构如下└── hello ├── App.js ├── __tests__ ├── android ├── app.json ├── babel.config.js ├── index.js ├── ios ├── m...

2020-05-03 23:21:00 447

原创 谈谈Ajax

定义Asynchronous JavaScript and XML,意思是异步JS和XML。解释下异步,异步是相对于同步来说的,同步即同时进行(累积多了就排队,一个一个执行,必须等上一个结束,才能到下一个),而异步就是执行到我了,我去旁边继续执行等结果,后面排队的不用等我结果出来再执行。这是对于ajax的特点来设计的,**因为ajax对后端数据的请求需要时间,**而这个时间不利用起来就是浪费...

2020-03-05 11:51:45 140

原创 JS异步解决方案的发展历程以及优缺点

JS 异步已经告一段落了,这里来一波小总结~1. 回调函数(callback)setTimeout(() => { // callback 函数体}, 1000)缺点:回调地狱,不能用 try catch 捕获错误,不能 return回调地狱的根本问题在于:缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身,...

2020-03-05 11:51:21 331

原创 重绘与回流

重绘与回流的机制1.CSS外部文件的引入要放到头部,加载CSS的时候页面渲染是被阻塞的,JS也是会阻塞页面渲染的,UI渲染和JS引擎线程是互斥的,不是并行的,CSS的性能会让JS变慢,优化性能,layout painting。2.当页面布局和几何属性改变时就需要回流。3.回流涉及元素的规模尺寸,布局,隐藏等属性改变。4.不影响布局,涉及元素的外观和风格的时候,就涉及重绘。5.回流一定重绘...

2020-03-05 11:41:36 130

原创 深入分析懒加载、预加载

懒加载

2020-03-05 11:36:54 984

原创 浏览器存储方式对比

Cookie1.因为HTTP请求无状态,所以需要Cookie去维持客户端状态。2.浏览器客户端记录保存Cookie,服务端辨别用户的信息。3.Cookie的生成方式:http response header 中的set-cookie,由服务端生成,客户端把Cookie存储和维护。4.JS中可以通过document.cookie来读写cookie。5…之后的请求都携带Cookie,就像健身...

2020-03-05 11:36:11 235

原创 接口防刷解决思路

场景和原因:1.在项目中后台只需要提供一套API接口,就可以接入安卓、小程序、IOS、web等多个应用程序,这样可以节约开发成本。但是一个后台接入这么多应用程序的http请求,必然导致后端的压力非常大。对于这些情况我们需要对用户的访问进行限流访问,我们可以依次对Nginx、tomcat、接口进行限流。2.对于一些请求进行过滤和拦截是非常有必要的,能够有效地减轻后台的压力。3.考虑线上环境 ...

2020-03-05 11:32:31 2074

原创 详细剖析强缓存和协商缓存

Cache-control1.max-age:在这段时间内,浏览器再次要资源时,不用去服务器请求,不会过期,直接在客户端读取。优先级大于expires2.expires:3.s-maxage:只能是public缓存,可能有代理服务器缓存,比如CDN。私人是客户端的某一用户,public比如CDN 优先级大于max-age4....

2020-03-05 10:46:43 613

原创 页面加载渲染的优化(一)

1.HTML本身是通过网址请求回来的,由字节流转换成字符流,浏览器进行词法分析,分析成词法的token,从上到下,不同 >的标签类型会解析成不同的对象,然后加载到DOM树上。2.HTML中会通过link引入其他资源,这时会并发的请求静态资源,请求回来之后会和CSS资源进行结合,生成渲染树。3.只有DOM树和CSS树都生成之后才会进行渲染,布局,绘制。特点1.顺序执行,并发加载(...

2020-03-05 10:46:26 345 1

原创 Node.js的三大特点

单线程Nodejs跟Nginx一样都是单线程为基础的,这里的单线程指主线程为单线程,所有的阻塞的全部放入一个线程池中,然后主线程通过队列的方式跟线程池来协作。线程池主要由一堆callback回调函数构成的,然后主线程在循环间隙中适当调用,并清空队列。在Java、PHP或者.net等服务器端语言中,会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约2MB内存。也就是说,理论上,一个8G...

2020-03-05 10:46:09 744

原创 前端的单页面模式和多页面模式

思考动机前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互,而项目内的页面交互,不可避免的需要相互之间的数据共享。模式选择单页面模式(SPA Single-page Application):只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次页面跳转:使用js中的append/remove或者s...

2020-03-05 10:45:49 484

原创 深入学习浏览器缓存机制

一个优秀的缓存策略可以:缩短网页请求资源的距离,减少延迟。由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。...

2020-03-05 02:59:52 96

原创 组件传值

父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息Child.jsximport React from 'react';import PropTypes from 'prop-types';export default function Child({ n...

2020-03-01 23:50:20 172

原创 前端学习HTML

ctrl+N 创建文件 F1打开浏览器前端:大网页网页:html 文档,经过浏览器 渲染之后展示出来的页面渲染:动作 。html 加浏览器变成人们看到的页面编码:通过代码的形势把想要展示的页面写道HTML里面HTML CSS 负责页面的内容 肉体 JS页面的行为 大脑HTML:页面的结构 手脚 CSS 样式 美观HTML代码:1.文本内容:能被浏览器直接显...

2020-01-31 18:31:10 133

原创 快速排序JS

思想:创建两个数组left right 取一个基准值可以数组中任一元素 下面取了数组的中间元素并且从数组中剥离出来 将数组中的元素与基准值比较 小于基准值的放进左边 left数组 大于基准值的放进右边right数组 重复 步骤2 3 var arr = [3, 4, 2, 6, 5, 8, 9, 10, 16, 13]; // length = 10 functi...

2020-01-31 10:21:20 69

原创 数组练习

二、题目一个整型数组里除了两个数字之外,其他的数字都出现了两次。请写程序找出这两个只出现一次的数字。要求时间复杂度是O(n),空间复杂度是O(1)。1、思路大家首先想到的是顺序扫描法,但是这种方法的时间复杂度是O(n^2)。接着大家又会考虑用哈希表的方法,但是空间复杂度不是O(1)。应该怎么做才能即满足时间复杂度是O(n)又满足空间复杂度是O(1)的要求呢?我们可以想一想“异或...

2020-01-31 08:13:48 410

原创 JS学习笔记

一、函数参数arguments和命名参数function add(n1, n2){ arguments[1] = 10;}此时读取n2和arguments[1]并不会访问相同的内存空间,他们的内存空间是独立的,但他们的值保持同步。二、变量,作用域和内存问题1.传递参数1.所有的参数都是按值传递的。在向参数传递引用类型的值时,会把这个值在内存中的地址复制给一个局部变...

2020-01-30 17:24:07 75

原创 数组去重

前言module.exports = async function getFnRunTime(fn) { let startTime = Date.now(), endTime; let result = await fn(); endTime = Date.now(); console.log(`total time:${endTime-startTi...

2020-01-30 16:29:28 140

原创 二叉树打印

题目描述从上到下按层打印二叉树,同一层结点从左至右输出。每一层输出一行。1.1、分析 这一题是一个宽搜问题,我们用一个队列来模拟整个过程,把每一层放入队列,从队首打印出结果,然后再把下一层的孩子节点放入队列尾部。class Solution {public: vector<vector<int> > Print(TreeNode...

2020-01-29 20:22:37 379

原创 组合总和 算法题JS

力扣40:给定一个数组candidates和一个目标数target,找出candidates中所有可以使数字和为target的组合。candidates中的每个数字在每个组合中只能使用一次。说明:所有数字(包括目标数)都是正整数。解集不能包含重复的组合。示例1:输入: candidates =[10,1,2,7,6,1,5], target =8,...

2020-01-29 20:19:42 253

原创 从输入URL到页面加载的过程学习笔记

目录从浏览器接收url到开启网络请求线程多进程的浏览器多线程的浏览器内核解析URLDNS查询得到IP五层因特网协议栈从服务器接收到请求到对应后台接收到请求负载均衡后台的处理后台和前台的http交互cookie以及优化从浏览器接收url到开启网络请求线程这一部分要深入学习浏览器进程/线程模型,JS的运行机制多进程的浏览器浏览器是多进程...

2020-01-05 15:54:31 115

原创 JS中的Node事件循环机制学习思考

NODEJS的事件轮询机制程序中打印这三个函数,控制台不管怎么换位置,结果都是process.nextTick()setTimeout()setImmediate();为什么呢?首先计时为0,立即执行settimeout函数,然后到第四的poll,发现设置过setimmediate函数,到5阶段。P任意阶段优先执行。uvrun函数,事件轮询机制6个阶段:死循环...

2020-01-04 20:27:49 82

原创 Redux管理状态的机制

Redux管理状态的机制:1.redux是一个独立专门用于做状态管理的JS库,不是react插件库。2.它可以在REACT,angular,vue等项目中使用,但基本与react配合使用。3.作用:集中式管理react应用中多个组件共享的状态和从后台获取的数据。使用react-redux简化redux的编码使用redux-thunk实现redux的异步编程使...

2019-12-23 14:08:12 187

原创 js原型链继承与构造函数继承的优缺点及解决方案

ECMAScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含一个指向另一个原型的...

2019-12-21 23:45:10 997

原创 左旋转字符串

汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果。对于一个给定的字符序列S,请你把其循环左移K位后的序列输出。例如,字符序列S=”abcXYZdef”,要求输出循环左移3位后的结果,即“XYZdefabc”。是不是很简单?OK,搞定它!左旋字符串(循环左移字符串):左移串长length位后和原来一样,所以需要左移的是n % str.leng...

2019-12-21 08:55:00 129

原创 有关树的子结构

输入两颗二叉树A,B,判断B是不是A的子结构。(PS:我们约定空树不是任意一个树的子结构)。1、思路要查找树A中是否存在和树B结构一样的子树,我们可以分为两步:第一步在树A中找到和B的根结点的值一样的结点R,第二步再判断树A中以R为根节点的子树是不是包含和树B一样的结构。这里使用递归的方法即可。使用先序遍历遍历A树,在A树中找到和B树根节点值相同的结点。然后使用先序遍历+递归来判断...

2019-12-20 18:41:35 88

原创 求二叉树的深度

输入一棵二叉树,求该树的深度。从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,最长路径的长度为树的深度。1.递归的方法,属于DFS(深度优先搜索)。思路:从跟节点出发,查询左子树的深度,获取右子树的深度,比较一下,取大的,再加一。就是整个二叉树的深度递归的三个条件:边界条件:当前节点下,是否还有子节点,没有返回,有继续递归递归前进段:当前节点下,还有...

2019-12-20 14:57:09 397

原创 输入一棵二叉树,判断该二叉树是否是平衡二叉树。

平衡二叉树的左右子树也是平衡二叉树,那么所谓平衡就是左右子树的高度差不超过1.平衡二叉树:平衡二叉搜索树(Self-balancing binary search tree)又被称为AVL树(有别于AVL算法),且具有以下性质:它是一棵空树或它的左右两个子树的高度差的绝对值不超过1,并且左右两个子树都是一棵平衡二叉树。题目:输入一棵二叉树,判断该二叉树是否是平衡二叉树。思路:利用求深度的方法...

2019-12-20 13:38:21 543

原创 JS变量提升,函数声明提升及变量作用域的理解

1.变量是如何被覆盖的在一般情况下,js代码都是自上而下执行的,对于同一个变量,可以通过如下方式来修改:var a = 1;a = 2;console.log(a) // 2a = function(){};console.log(a) // function(){};2.变量提升console.log(a);var a = 1;console...

2019-12-19 18:54:39 80

原创 数组去重的方法

字符串去重跟数组去重大同小异,将字符串转成数组即可使用数组去重方法。1.ES6去重:原理:es6新的数据结构Set类似于数组,但成员的值都是唯一的,可用于数组去重。function unique(array) { const result = [...new Set(array)] console.log(result)}unique([1,2,2,3,4,5,5,5])...

2019-12-19 18:50:18 121

原创 JS中的树

这里的树类比现实生活中的树,有树干,树枝,在程序中树是一种数据结构,对于存储需要快速查找的数据很有用,它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构:)和树相关的概念:1.子树:由节点和他的后代构成,如上图标示处。2.深度:节点的深度取决于它祖节点的数量,比如节点5有2个祖节点,他的深度为2。3.高度:树...

2019-12-19 16:42:16 340

原创 二叉树路径总和

给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和。说明:叶子节点是指没有子节点的节点。示例:给定如下二叉树,以及目标和 sum = 22, 5 / \ 4 8 / / \ 11 13 4 ...

2019-12-18 22:07:31 118

原创 排序算法总结

文章目录1.冒泡排序1.思路2.代码块2.选择排序1.思路2.代码块3.插入排序1.思路2.代码块4.计数排序1.思路2.代码块5.快速排序1.思路2.代码块3.活学活用的思考1.冒泡排序1.思路每次遍历整个数组,寻找一对逆序对,并将其交换,最后得到的数组肯定是有序的。2.代码块2.选择排序1.思路2.代码块3.插入排序1.思路2.代码块4.计数排序1.思路2.代码块...

2019-12-17 22:47:44 203

原创 小米页面实战

1.分析网页需求 :上面的部分是网页导航栏,左边有网页导航,右边是个人信息和购物车信息,还有登录注册等按钮。2.难点:解决浮动带来的边界塌陷。因为左边的网页导航向左浮动,右边的信息向右浮动,然后要解决这两个浮动造成的边界塌陷问题。3.方案:通过伪元素解决。解决前:解决后:代码:二、加入超链接:多个加入可以选择编辑栏,然后选择最后一行,同时操作。三、...

2019-12-17 22:46:34 254

原创 CSS中的相对定位与绝对定位

一、怎么清除浮动?浮动与块元素相关,DIV有margin的重叠1.把伪元素变真的方法是加上内容(文字或者图片)下面展示了代码和结果问题2:若不加边框会有margin的重叠,怎么解决呢?解决方法:DIV1应该要与背景有一定的距离,但现在重合了可以用伪元素来解决清理浮动和清理margin的问题:用before 和after来实现!CSS中的定位:不管...

2019-12-17 14:36:58 148

原创 CSS实现页面布局

DIV是块元素,独占一行,标准流是从上向下排列,怎么实现一行4块呢?通过浮动来解决!效果:可以左浮动或者右浮动,但是浮动的基底和标准是上一个DIV可以一行放多个块元素clear 可以让浮动清除,回到标准流当中。在下一个DIV元素中写上clear:both可以清除上一个的浮动。...

2019-12-16 22:55:06 243

原创 把数组排成最小的数

输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个。例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323。解题:将各个元素从小到大进行排序,排序之后再把他们串联起来就可以了,全排列时间复杂度为O(n!)。要定义一个比较大小的函数,对拼接后的字符串进行比较。比较两个字符串s1, s2大小的时候,先将它们拼接起来,比较s1+...

2019-12-16 21:30:09 92

原创 连续数组的最大和

牛牛得到一个长度为n的整数序列V,牛牛定义一段连续子序列的幸运值为这段子序列中最大值和次大值的异或值(次大值是严格的次大)。牛牛现在需要求出序列V的所有连续子序列中幸运值最大是多少。请你帮帮牛牛吧。思路:先找到子序列中的最大值,再找到次大值,然后异或。整数可能是负数。针对每一个数,将其看作某连续子序列的次大值,这样就搜索了所有的可能性。找到最近的前后两个比其大的数作为最大值,求异或值。拆...

2019-12-16 20:54:56 130

原创 CSS解决盒子模型嵌套

一、实现一个超链接,鼠标点上去变色。要点:通过伪类来切换什么状态:总共有初始状态 被访问 鼠标移动 点击 四个状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...

2019-12-16 18:52:05 7036

原创 数组的题目

目录1、二维数组的查找 (1)思路 2.调整数组顺序使奇数位于偶数前面1、思路数组中出现次数超过一半的数字1、思路相似的题目:1、二维数组的查找 (1)思路首先选取数组中右上角的数字。如果该数字等于要查找的数字,查找过程结束;如果该数字大于要查找的数组,剔除这个数字所在的列;如果该数字小于要查找的数字,剔除这个数字所...

2019-12-14 15:41:39 310

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除