Blog
Blog copied to clipboard
mengtuifrontend
芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。 黄鹤断矶头，故人今在否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。
### Symbol数据类型 `symbol`是js中7种基础数据类型之一（基础数据类型包括：number, string, boolean, null, undefined, [bigint](https://github.com/mengtuifrontend/Blog/issues/10), symbol），symbol是在ECMAScript 2015 / ES6中新加入的。在JavaScript运行环境中，调用函数`Symbol()`可以动态地返回一个匿名且唯一的`symbol`类型的值。接下来，这篇文章会简单介绍一下Symbol构造函数，well-known symbols，全局symbol注册表这三部分内容。 ### Symbol构造函数 `Symbol()`函数：构造一个symbol类型值并返回，该值唯一。 返回值：symbol类型值 它类似于内置的Object类，但不完全是一个构造器，因为它不支持`new Symbol()`这样的语法。 每一个从`Symbol()`函数返回的symbol值都是独一无二的，因为其唯一性，适合用作对象属性的标识符，使用`Object.getOwnPropertySymbols()` 以symbol数组的形式返回某个对象的所有symbol属性。 ``` js // Symbol()函数使用 const symbol1 = Symbol(); const...
## 线性表 线性表是最简单、最常用的一种数据结构，它是n个数据元素的有限集合。实现线性表一般有数组和链表两种方式，数组用一组连续的存储单元依次存储线性表的数据元素，链表用一组任意的存储单元存储线性表的数据元素（存储单元可连续也可不连续）。 1. 数组 数组是一种大小固定的数据结构，当数组不能再存储线性表中的新元素时，我们可以创建一个新的大的数组来替换当前数组，这样就可以使用数组实现动态的数据结构。前面基于静态类型的语言，动态类型的语言，如javascript，就不同。二分查找的例子： ```javascript // 二分查找数组中的数，适用于不经常变动而查找频繁的有序列表 function binarySearch(data, arr, start, end) { if (start > end) { return -1; } var mid = Math.floor((end + start) /...
## HTTP 缓存机制 我们认为浏览器存在一个缓存的数据库，用来存储一些不经常变化的静态文件（img，css，js文件等），一般将缓存分为强制缓存和协商缓存。强制缓存和协商缓存可以同时存在，且强制缓存的优先级大于协商缓存。 ### 强制缓存 如果缓存数据库中已经存在所请求的数据，那么直接从缓存数据库中去获取数据，当缓存数据库中没有所请求的的数据， #### 强缓存还有两种区分 * from memory cache: 表示从内存中读取的缓存，这种缓存在页面关闭以后缓存就不存了，下次重新打开页面的时候会再次请求 * from disk cache: 表示从硬盘中读取的缓存，这种缓存不会随中页面关闭而失效（cache-control|expires有关），页面再次打开的时候直接从disk中获取 ### 协商缓存 客户端会先去缓存数据库中去获取缓存数据的标识，然后一起发送给服务端，服务端会去验证缓存是否已经失效，如果失效就重新返回新的数据，否则就返回304，客户端直接去缓存数据库中获取数据。 ### 如何判断缓存是否失效 #### 我们可以从服务端返回的 `response header` 部分的某些字段来判断 *...
## 浏览器线程 浏览器的常驻线程有哪些，他们的工作职责是什么？？ ### 浏览器的5个常驻线程 #### 浏览器事件触发线程 这个线程的作用就是用来控制交互，响应用户的行为。 当一个鼠标事件被触发时该线程会把事件添加到任务队列的队尾，等待JS引擎的处理。这个任务队列中可以包含定时器任务、AJAX异步请求回调任务等，由于JS的单线程关系所有这些任务都得排队等待JS引擎处理。 #### 浏览器定时器触发线程 当我们在代码中使用 `setTimeout` 或者 `setInterval` 的时候，并不是由JavaScript引擎来进行计数的，因为JavaScript引擎是单线程的，如果处于阻塞线程状态就计不了时，它必须依赖外部来计时并触发定时，所以当代码运行时发现 `setTimeout` 或者 `setInterval`，这个时候就会将这个任务交给**浏览器定时器触发线程**，由它来进行计时，当时间达到程序给定的时间时，这个时候就会将对应的任务添加到任务队列的队尾。 ps：W3C的HTML标准中规定，setTimeout中低与4ms的时间间隔算为4ms，IE9及以上，chrome都是4ms，IE8及以下都是15.6ms。 #### 浏览器http异步请求线程 这里说的就是所有的网络请求，包含 `` ，`ajax`请求和 `medial` 资源的请求等，当一个网络请求开始发起到成功返回结果的这个阶段都是由该线程控制， 当检测到状态变更时，如果设置有回调函数，该线程就将状态变更事件放到任务队列的队尾。 #### js引擎线程...
## 浏览器的资源加载 加载的过程分为下面的4歌步骤： 资源分类 ===> 资源安全策略检查 ===> 资源优先级计算 ===> 根据优先级下载资源 * 浏览器对页面所有的资源进行了分类 * 根据浏览器相关的安全策略， 来决定资源加载的权限 * 接着对资源的加载的优先级进行计算和排序 * 最后根据优先级顺序来下载资源 接下来按照这个顺序给大家解说。 ### 资源分类 将常见的资源类型分为下面的10种： * 主资源： `HTML` * 样式资源： `css` *...
# 一种基于原始数据的图像显著性区域识别方法 最近在做一个热力图图像中显著性区域识别的需求，比如有如下一个图像：  ###### 原始图像 需要识别出图像中高亮较集中的区域，即高亮集中的区域被认为是图像中的显著性区域，效果如下：  ###### 带范围选框的图像 在没有原始数据情况下，需要对`原始图像`中的图像数据进行分析，然后可以通过射线法等方法得到显著性区域范围。 而在拥有原始数据的情况下，我们可以通过简单的操作原始数据获取图像显著性区域，十分方便。 这里通过一个例子，来介绍一下基于原始数据的图像显著性区域识别方法。 ## 准备工作 首先准备了一个页面用于渲染图像，内容如下： ```html Document .box {width: 500px; height: 500px; border: 1px solid #bbb; position: relative;} .item...
## 前端跨域 ### 前端跨域有多少种情况 * `Cross-Origin` 跨域 * `jsonp` 跨域 * `postMessage` * `document.domain` 一般情况下我们使用比较多的就是 `Cross-Origin`和 `jsonp` 这两种方式。`postMessage` 和 `document.domain` 使用的不是很多。下面我会介绍他们如何使用和使用的场景还有一些不常见的问题。 ## Cross-Origin 我们先看看浏览器的兼容性，如下图：  注意： *所以要使用Cross-Origin进行跨域的话，必须注意客户端和服务器必须同时支持。* 浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request），我们看看如何区分...
# HOOKS Hook是React 16.8中的新增功能。它们允许您在不编写类的情况下使用状态和其他React功能。*HOOKS只能在函数组件中使用* ## memo `React.memo` 是一个高阶的组件。它类似于`React.PureComponent` 也就是说如果组件的 `props` 没有改变，是不会被重新渲染的。 ```js function Foo (props) { ... } export default React.memo(Foo) ``` ## useState 类似于类组件中的state，不同的是 `useState` 接受一个**任意类型**的值 `string, array, object,...
 首先声明class组件App，由图可知App内的this方法继承了Component的方法 从react import Component之后可以console.log看出component在react文件夹开发文件react.development.js中 ``` function PureComponent(props, context, updater) { this.props = props; this.context = context; // If a component has string refs, we will assign a different object...
Metadata
Owner
Metadata
芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。 黄鹤断矶头，故人今在否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。