- 博客(35)
- 收藏
- 关注
RSS订阅原创 JS---memoizing技术
memoizing技术Memoization介绍：是一种将函数返回值缓存起来的方法原理：就是把函数的每次执行结果都放入一个键值对/数组中，在接下来的执行中，在键值对中查找是否已经有相应执行过的值，如果有，直接返回该值，没有才执行函数体的求值部分优点：在键值对中找值，比执行函数快多了。一个简单的使用memoization的例子在不同的浏览器中，xmlHttpRequest对象的具体实现都不同。需要判断何种浏览器以执行具体的方法。这里就有一个使用memoization来实现的例子.
2020-08-11 16:59:10
286
原创 GraphQL
初识什么是？特点请求你所要的数据不多不少 获取多个资源只用一个请求 描述所有可能的类型系统、使用场景？1.我们需要什么数据需要什么格式，后端就按照什么格式给我们返回什么样的数据结构，我们要哪些字段，后端就只给我们返回我们需要的这些字段， 其他的都不返回，前端就和后端解耦了---》在前端直接写查询， 后端只管给前端返回前端查询的这些数据；2.使用GraphQL前端自己写查询，这个页面需要哪些需哪数据，后端就返回给哪些数据， 这是考虑到后端所有的接口都在同一个域下面比...
2020-08-10 15:20:02
260
原创 React基础
设计模式：Flux架构：单向数据流 衍生状态管理框架 Redux Mobx受控组件与非受控组件 组件数据状态管理原则（dry--不要做重复的数据状态保存） 能计算得到的状态不要单独存储 组件尽量无状态，所需数据通过props获取JSX语法糖 生命周期及其使用场景 constructor 初始化内部状态 可以直接修改stategetDerivedStateFromProps state需要从props初始...
2020-06-18 16:48:22
414
原创 js 数据类型 存储位置
原始数据类型（Undefined，Null，Boolean，Number、String） 存储位置：栈 传值方式：按值传递 引用数据类型（对象、数组、函数） 存储位置：堆 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后，从堆中获得实体。var obj = {x : 0}; obj.x = 100; ...
2020-06-18 14:24:01
2669
原创 taro初试遇到的坑
样式问题1.样式在H5页面生效 在小程序不生效原因： 自定义组件对应的样式文件，只对该组件内的节点生效解决方案： 1、组件可以指定它所在节点的默认样式，使用:host选择器。只需要在样式文件中输入该选择器/* 该自定义组件的默认样式 */ :host { color: red; font-weight: bold; font-size: 30PX; }2.externalClasses 定义若干个外部样式类MyPage.js e...
2020-06-11 10:54:13
636
原创 hash路由VSbrowser路由
hash路由长什么样？：http://[domain]/#/xxx/xxx实现原理： hash值的变化会触发浏览器的window.onhashchange事件，浏览器不会去请求后端url哈希路由就是路由上面有个#，以前是用来做锚点的，很多人可能会想知道这个hash路由和锚点到底有啥区别？锚点实际上是通过#后面的东西来跳到对应相同id的元素。而哈希路由是监听这个哈希路由改变的事件，渲染相对应的页面元素。那么问题来了，2者是同时起效还是有一个不起作用还是根本就冲突？查看has..
2020-06-10 18:37:49
935
原创 小程序分包
离线包机制微信小程序采用的是类似离线包加载方案，用户第一次打开时会先下载好所有代码，然后再加载页面；当用户再次进入时，会直接使用已下载的代码，省去了代码下载的过程，打开速度更快。存在问题： 第一次打开小程序时白屏时间很长，因为要先下载好所有的代码，代码越多，白屏时间越长 代码有部分更新时，没办法进行增量更新，每次发版用户都需要重新下载全部代码 分包加载小程序的分包加载机制实际上是离线包和M页的一种结合机制，即把代码划分成主包+N个分包，官方定义：在小程序启动时，默认会下
2020-06-10 17:37:26
1425
原创 无状态组件
什么是无状态组件？不依赖他自身的状态state。 可以是类组件或者函数组件。 可以完全避免使用this关键字。(由于使用的是箭头函数事件无需绑定) 有更高的性能。当不需要使用生命周期钩子时，应该首先使用无状态函数组件什么时候用？ 组件不需要管理 state 只是纯的展示时无状态组件没有 refs 属性示例无状态组件const Component (props)=>( <div> {props.text} ....
2020-05-29 16:53:33
900
1
原创 函数柯里化
什么是柯里化？ 简单来说就是，把一个多参数的函数转化为单参数函数的方法。示例：普通函数（两个入参）：function plus(x, y){ return x + y}plus(1, 2) // 输出 3经过柯里化后：function plus(y){ return function (x){ return x + y }}plus(1)(2) // 输出 3柯里化的作用惰性求值 (Lazy Evaluati...
2020-05-29 16:15:35
187
原创 VScode 的使用---前端
通用插件HTML SnippetsHTMLHinthtml代码检测HTML CSS Support让 html 标签上写class 智能提示当前项目所支持的样式Debugger for Chrome让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试jQuery Code Snippetsjquery 重度患者必...
2018-11-21 15:35:30
1945
原创 二部图------KM算法、匈牙利算法
二分图的概念二分图又称作二部图，是图论中的一种特殊模型。 设G=(V, E)是一个无向图。如果顶点集V可分割为两个互不相交的子集X和Y，并且图中每条边连接的两个顶点一个在X中，另一个在Y中，则称图G为二分图。 二分图的性质定理：当且仅当无向图G的每一个回路的次数均是偶数时，G才是一个二分图。如果无回路，相当于任一回路的次数为0，故也视为二分图。二分图匹配给定一个二分图G，在...
2018-10-21 16:50:30
1717
原创 VSCode使用总结
一、设置首选项下载安装完成后，打开编辑器，首先要设置主题、字体大小等。1. 设置主题文件→首选项→颜色主题2. 设置字体大小文件→首选项→设置，打开了一个setting.json文件，将左边的设置复制到右边进行覆盖生效，所有编辑器的设置都在这里修改。 二、Emmet插件最新版集成了Emmet 2.0，在文件→首选项→设置可以开启或者关闭功能 三、快捷键所有快捷键...
2018-10-12 10:11:54
1804
原创 常见的兼容性问题
Chrome&Safari:-webkit- Firefox:-moz- IE:-ms- Opera:-o-1.渐变属性各浏览器的新版本都支持渐变属性。对于不支持的低版本浏览器，可以通过增加浏览器前缀的方式，让浏览器支持渐变。比如：background:-moz-linear-gradient();2.IE8 以下版本不支持H5新标签 &...
2018-09-29 22:42:57
196
原创 详谈iframe
定义和用法iframe 元素会创建一个内联框架。被用来在当前 HTML 文档中嵌入另一个文档。(即行内框架）。<iframe src="http://www.runoob.com" name="xxx" height="xxx" width="xxx" ></iframe>iframe自适应高度的方法，其实就是设置iframe的高度，使其等于内嵌网页的高度，
2018-09-28 22:47:05
350
原创 http协议
什么是Http协议对器客户端和 服务器端之间数据传输的格式规范，格式简称为“超文本传输协议”。是一个基于请求与响应模式的、无状态的、应用层的协议，http本身无连接，http使用面向连接的TCP作为传输层协议。什么是Http协议无状态协议?怎么解决Http协议无状态协议?(1)、无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息(2)、无状态协议解决办法： ...
2018-09-28 22:21:32
184
原创 CSS实现div的高度填满剩余空间
<div id="main"> <div id="nav">nav</div> <div id="content">content</div></div> html, body { height: 100%; //body默认高度0
2018-09-28 17:14:59
4846
原创 clientwidth innerWidth offsetWidth
clientWidth 在任何窗口系统中都是指用户内容能放置的空间clientWidth 是每个 document 一个，一个窗口中可以放置多个 document，比如你用 frame 或 iframe 就可以放置多个 document，这相当于图形界面编程中的 MDI （多文档窗口应用，比如 Word, Excel 就可以同时打开多个文档）。 window.innerWidth能获取...
2018-09-28 16:32:51
1340
原创 如何使一个div的宽和高占整个屏幕
css方法一：<div style="position:absolute; left:0; top:0; width:100%;height:100%; background:#000;">方法二：<div style="position:absolute; left:0; top:0; right:0; bottom:0; background:#000;"&...
2018-09-28 12:27:49
4897
原创 H5 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间...
2018-09-26 22:38:24
1157
原创 SSE服务器发送事件(Server-Sent Events)
兼容性：IE不兼容 Server-Sent 事件 - 单向消息传递Server-Sent 事件指的是网页自动获取来自服务器的更新。以前也可能做到，前提是网页需要询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。服务器端代码实例把 "Content-Type" 报头设置为 "text/...
2018-09-26 22:23:16
983
原创 web worker
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。检测浏览器是否支持 Web Workerif(typeof(Worker)!=="undefined"){ // 支持Web worker ! // 代码.....}else{ //不支持 Web Worker }完整的 Web Worker 实例代码...
2018-09-26 22:09:44
174
原创 如何实现浏览器内多个标签页之间的通信
调用localstorge、cookies等本地存储方式。方法一：localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。标签页1：<input id="name"><input type="button" id="bt...
2018-09-26 21:57:01
599
原创 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带，会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 存储大小： cookie数据大小不能超过4k。 sessionS...
2018-09-26 21:33:27
156
原创 encodeURI() encodeURIComponent()
URI: Uniform Resource Identifiers,通用资源标识符Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字 符，从而让浏览器能够接受和理解。编码encode...
2018-09-26 20:29:40
243
原创 SSL连接（了解）
SSL协议,用于Web浏览器与服务器之间的身份认证和加密数据传输.它位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议可分为两层：SSL记录协议（SSL Record Protocol）：它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。 SSL握手协议（SSL Handshake Protocol）：它建立在SSL记录...
2018-09-26 14:36:56
5654
原创 H5的离线缓存技术
离线存储可以将站点的一些文件存储在本地，它是浏览器自己的一种机制，将需要的文件缓存下来在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件 在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。 资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高...
2018-09-25 22:40:29
9676
原创 异步
异步 JS的异步是通过回调函数实现的，即通过任务队列，在主线程执行完当前的任务栈（所有的同步操作），主线程空闲后轮询任务队列，并将任务队列中的任务（回调函数）取出来执行。"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。 虽然JS是单线程的但是浏览器的内核是多线程的，在浏览器的内核中不同...
2018-09-25 22:24:23
216
原创 优化
js: 浏览器虽然是多线程，但JavaScript具有阻塞特性，无论外链还是内嵌脚本，在浏览器执行解释js脚本的时候，浏览器是不会去做别的事a、将<script>内嵌和外链，在可以的情况下，放在<body>底部。（注：对于css，浏览器是并行下载）b、在页面onload后，加载jsc、html5 <script>标签的defer属性，在页面加载完...
2018-09-25 21:03:27
121
原创 对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核...
2018-09-25 20:12:33
889
原创 用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用； @import是CSS提供的，只能用于加载CSS;（2）页面被加载的时，link会同时被加载 @import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱（3）import只在IE5以上才能被识别，而link是XHTML标签，无...
2018-09-25 20:01:50
2169
原创 输入一个URL到页面呈现----发生的过程
总体来说分为以下几个过程: DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束 一、什么是URL？URL(Uniform Resource Locator) 叫作统一资源定位符，能够对因特网的资源进行定位。 http://119.75.217.109:80/index.htm...
2018-09-21 22:27:10
339
原创 进程、线程 事件轮询 web worker
进程:Process/Tsak 操作系统（OS）为正在运行的程序分配的CPU资源的最小单位。拥有独立的地址空间。 用网页打开.html程序便运行到内存线程:Thead:CPU执行的最小单位；同一个进程下的所有线程，共享进程的地址空间 进程内部执行代码基本单位 线程之间是没有层级关系的，他们之间协同完成工作。在整个进程完成工作之后，其中的线程会被销毁，释放...
2018-09-21 22:07:07
1261
原创 cookie与session
常用的会话跟踪技术Cookie与Session。会话跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。一.cookieCookie实际上是一小段的文本信息。客户端向服务器发起请求，若服务器需要记录该用户状态，Cookie的处理：服务器使用response向客户端发送cooki...
2018-09-17 12:23:33
148
转载 浏览器缓存机制
浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多，总体归纳为九种，这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制。一、http缓存http缓存是基于HTTP协议的浏览器文件级...
2018-09-17 10:29:16
105
原创 cookie
HTTP Cookie:Cookie通常也叫做网站cookie,浏览器cookie或者http cookie,是保存在用户浏览器端的，并在发出http请求时会默认携带的一段文本片段。它可以用来做用户认证，服务器校验等通过文本数据可以处理的问题。Cookie不是软件，所以它不能被携带病毒，不能执行恶意脚本，不能在用户主机上安装恶意软件。但它们可以被间谍软件用来跟踪用户的浏览行为。所以近年来，已经...
2018-09-17 10:27:54
7912
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人