jm365

jm365 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

web前端开发一枚,以简单明了的方式记录技术方法

个人动态

jm365 发布了文章 · 2月8日

闭包

各种资料中对闭包的定义不尽相同,个人认为百度百科上的描述通俗易懂(阮一峰老师的描述与百度百科的一致):闭包就是可以读取其他函数内部变量的函数

function wrap() {
    var count = 0
    
    function inner() {
        console.log(++count)
    }
    return inner
}

var fn = wrap()
fn() // 输出1
fn() // 输出2
查看原文

赞 0 收藏 0 评论 0

jm365 赞了文章 · 1月29日

JS算法之深度优先遍历(DFS)和广度优先遍历(BFS)

JS算法之深度优先遍历(DFS)和广度优先遍历(BFS)

背景

在开发页面的时候,我们有时候会遇到这种需求:在页面某个dom节点中遍历,找到目标dom节点,我们正常做法是利用选择器document.getElementById(),document.getElementsByName()或者document.getElementsByTagName(),但在本文,我们从算法的角度去查找dom节点,同时理解一下深度优先遍历(DFS)和广度优先遍历(BFS)的原理。

准备

假设页面上的dom结构如下:

<div id="root">
    <ul>
        <li>
            <a href="">
                <img data-original="" alt="">
            </a>
        </li>
        <li>
            <span></span>
        </li>
        <li>
        </li>
    </ul>
    <p></p>
    <button></button>
</div>

让我们来把这个dom结构转化成树的样子

clipboard.png
这样之后,dom结构似乎清楚了不少。

深度优先遍历(Depth-First Search)

该方法是以纵向的维度对dom树进行遍历,从一个dom节点开始,一直遍历其子节点,直到它的所有子节点都被遍历完毕之后在遍历它的兄弟节点。即如图所示(遍历顺序为红字锁标):

clipboard.png
js实现该算法代码(递归版本):

function deepFirstSearch(node,nodeList) {  
    if (node) {    
        nodeList.push(node);    
        var children = node.children;    
        for (var i = 0; i < children.length; i++) 
        //每次递归的时候将 需要遍历的节点 和 节点所存储的数组传下去
        deepFirstSearch(children[i],nodeList);    
    }    
    return nodeList;  
} 

非递归版本:

function deepFirstSearch(node) {
    var nodes = [];
    if (node != null) {
        var stack = [];
        stack.push(node);
        while (stack.length != 0) {
        var item = stack.pop();
        nodes.push(item);
        var children = item.children;
        for (var i = children.length - 1; i >= 0; i--)
            stack.push(children[i]);
        }
    }
    return nodes;
}

deepFirstSearch接受两个参数,第一个参数是需要遍历的节点,第二个是节点所存储的数组,并且返回遍历完之后的数组,该数组的元素顺序就是遍历顺序,调用方法:

let root = document.getElementById('root')
deepTraversal(root,nodeList=[])

控制台输出结果

clipboard.png

广度优先遍历(breadth-first traverse)

该方法是以横向的维度对dom树进行遍历,从该节点的第一个子节点开始,遍历其所有的兄弟节点,再遍历第一个节点的子节点,完成该遍历之后,暂时不深入,开始遍历其兄弟节点的子节点。即如图所示(遍历顺序为红字锁标):

clipboard.png
js实现算法代码(递归版本):

function breadthFirstSearch(node) {
    var nodes = [];
    var i = 0;
    if (!(node == null)) {
        nodes.push(node);
        breadthFirstSearch(node.nextElementSibling);
        node = nodes[i++];
        breadthFirstSearch(node.firstElementChild);
    }
    return nodes;
}

递归版本的BFS由于层级太深,会导致堆栈溢出:Maximum call stack size exceeded,但遍历的顺序依旧没有问题,可以在遍历过程中进行操作,不返回遍历数组即可。
非递归版本:

function breadthFirstSearch(node) {  
    var nodes = [];  
    if (node != null) {  
        var queue = [];  
        queue.unshift(node);  
        while (queue.length != 0) {  
            var item = queue.shift();  
            nodes.push(item);  
            var children = item.children;  
            for (var i = 0; i < children.length; i++)  
                queue.push(children[i]);  
        }  
    }  
    return nodes;  
}

控制台输出结果:

clipboard.png

总结

BFS和DFS都是图的算法之一,本文所阐述的版本较为简单,为无向且非连通图,在日后会更新更多基于JavaScript的算法。

查看原文

赞 29 收藏 15 评论 0

jm365 发布了文章 · 1月26日

tcp拥塞控制

慢启动(slow-start)

tcp刚开始传输时会设置一个很小拥塞窗口cwnd(能够发送出去的但还没有收到ACK(Acknowledgement确认字符)的最大数据报文段);每当有一个报文段被确认,cwnd就增加1个MSS大小

拥塞避免(congestiono avoidance)

TCP使用了一个叫慢启动门限(ssthresh)的变量,当cwnd超过该值后,慢启动过程结束,进入拥塞避免阶段。此时当窗口中所有的报文段都被确认时,cwnd的大小加1;对于大多数TCP实现来说,ssthresh的值是65536字节

快重传(fast retransmit)

tcp收到3个重复的失序ACK时会进入快重传

快恢复(fast recovery)

在快恢复出现之前超时重传会将cwnd设置为1进入慢启动阶段
1.把ssthresh设置为cwnd的一半
2.把cwnd再设置为ssthresh的值(具体实现有些为ssthresh+3)
3.新的ack收到后重新进入拥塞避免阶段。

查看原文

赞 1 收藏 1 评论 0

jm365 发布了文章 · 1月26日

tcp分段/分包

MTU: Maxitum Transmission Unit 最大传输单元,链路层提供给网络层最大传输数据大小,以太网中是1500字节,internet中是576字节
MSS: Maxitum Segment Size 最大TCP分段大小,MSS = MTU - IP Header - TCP Header

查看原文

赞 0 收藏 0 评论 0

jm365 赞了文章 · 1月15日

在浏览器输入 URL 回车后,会发生什么?

作者:4Ark
来源:https://4ark.me/post/b6c7c0a2...

这个问题已经是老生常谈了,更是经常被作为面试的压轴题出现,网上也有很多文章,但最近闲的无聊,然后就自己做了一篇笔记,感觉比之前理解更透彻了。

注意:本文的步骤是建立在,请求的是一个简单的 HTTP 请求,没有 HTTPS、HTTP2、最简单的 DNS、没有代理、并且服务器没有任何问题的基础上,尽管这是不切实际的。

大致流程

  • URL 解析
  • DNS 查询
  • TCP 连接
  • 处理请求
  • 接受响应
  • 渲染页面

一、URL 解析

地址解析:

首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词,并且根据你输入的内容进行自动完成、字符编码等操作。

HSTS

由于安全隐患,会使用 HSTS 强制客户端使用 HTTPS 访问页面

其他操作

浏览器还会进行一些额外的操作,比如安全检查、访问限制(之前国产浏览器限制 996.icu)。

检查缓存

二、DNS 查询

基本步骤

1. 浏览器缓存

浏览器会先检查是否在缓存中,没有则调用系统库函数进行查询。

2. 操作系统缓存

操作系统也有自己的 DNS缓存,但在这之前,会向检查域名是否存在本地的 Hosts 文件里,没有则向 DNS 服务器发送查询请求。

3. 路由器缓存

路由器也有自己的缓存。

4. ISP DNS 缓存

ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器,它们在大多数情况下都会有缓存。

根域名服务器查询

在前面所有步骤没有缓存的情况下,本地 DNS 服务器会将请求转发到互联网上的根域,下面这个图很好的诠释了整个流程:

根域名服务器(维基百科)

需要注意的点

递归方式:一路查下去中间不返回,得到最终结果才返回信息(浏览器到本地DNS服务器的过程)

迭代方式,就是本地DNS服务器到根域名服务器查询的方式。

什么是 DNS 劫持

前端 dns-prefetch 优化

三、TCP 连接

TCP/IP 分为四层,在发送数据时,每层都要对数据进行封装:

1. 应用层:发送 HTTP 请求

在前面的步骤我们已经得到服务器的 IP 地址,浏览器会开始构造一个 HTTP 报文,其中包括:

  • 请求报头(Request Header):请求方法、目标地址、遵循的协议等等
  • 请求主体(其他参数)

其中需要注意的点:浏览器只能发送 GET、POST 方法,而打开网页使用的是 GET 方法

2. 传输层:TCP 传输报文

传输层会发起一条到达服务器的 TCP 连接,为了方便传输,会对数据进行分割(以报文段为单位),并标记编号,方便服务器接受时能够准确地还原报文信息。

在建立连接前,会先进行 TCP 三次握手。

关于 TCP/IP 三次握手,网上已经有很多段子和图片生动地描述了,大家可以看下这篇:为什么 TCP 建立连接是三次握手,关闭连接确是四次挥手呢?

3. 网络层:IP协议查询Mac地址

将数据段打包,并加入源及目标的IP地址,并且负责寻找传输路线。

判断目标地址是否与当前地址处于同一网络中,是的话直接根据 Mac 地址发送,否则使用路由表查找下一跳地址,以及使用 ARP 协议查询它的 Mac 地址。

  注意:在 OSI 参考模型中 ARP 协议位于链路层,但在 TCP/IP 中,它位于网络层。

4. 链路层:以太网协议

以太网协议

根据以太网协议将数据分为以“帧”为单位的数据包,每一帧分为两个部分:

  • 标头:数据包的发送者、接受者、数据类型
  • 数据:数据包具体内容

Mac 地址

以太网规定了连入网络的所有设备都必须具备“网卡”接口,数据包都是从一块网卡传递到另一块网卡,网卡的地址就是 Mac 地址。每一个 Mac 地址都是独一无二的,具备了一对一的能力。

广播

发送数据的方法很原始,直接把数据通过 ARP 协议,向本网络的所有机器发送,接收方根据标头信息与自身 Mac 地址比较,一致就接受,否则丢弃。

注意:接收方回应是单播。

服务器接受请求

接受过程就是把以上步骤逆转过来,参见上图。

四、服务器处理请求

大致流程

HTTPD

最常见的 HTTPD 有 Linux 上常用的 Apache 和 Nginx,以及 Windows 上的 IIS。

它会监听得到的请求,然后开启一个子进程去处理这个请求。

处理请求

接受 TCP 报文后,会对连接进行处理,对HTTP协议进行解析(请求方法、域名、路径等),并且进行一些验证:

  • 验证是否配置虚拟主机
  • 验证虚拟主机是否接受此方法
  • 验证该用户可以使用该方法(根据 IP 地址、身份信息等)

重定向

假如服务器配置了 HTTP 重定向,就会返回一个 301永久重定向响应,浏览器就会根据响应,重新发送 HTTP 请求(重新执行上面的过程)。

URL 重写

然后会查看 URL 重写规则,如果请求的文件是真实存在的,比如图片、html、css、js文件等,则会直接把这个文件返回。否则服务器会按照规则把请求重写到 一个 REST 风格的 URL 上。然后根据动态语言的脚本,来决定调用什么类型的动态文件解释器来处理这个请求。

以 PHP 语言的 MVC 框架举例,它首先会初始化一些环境的参数,根据 URL 由上到下地去匹配路由,然后让路由所定义的方法去处理请求。

关注微信公众号:Java技术栈,在后台回复:架构,可以获取我整理的 N 篇最新架构教程,都是干货。

五、浏览器接受响应

浏览器接收到来自服务器的响应资源后,会对资源进行分析。

首先查看 Response header,根据不同状态码做不同的事(比如上面提到的重定向)。

如果响应资源进行了压缩(比如 gzip),还需要进行解压。

然后,对响应资源做缓存。

接下来,根据响应资源里的 MIME[3] 类型去解析响应内容(比如 HTML、Image各有不同的解析方式)。

六、渲染页面

浏览器内核

不同的浏览器内核,渲染过程也不完全相同,但大致流程都差不多。

基本流程

6.1. HTML 解析

首先要知道浏览器解析是从上往下一行一行地解析的。

解析的过程可以分为四个步骤:

① 解码(encoding)

传输回来的其实都是一些二进制字节数据,浏览器需要根据文件指定编码(例如UTF-8)转换成字符串,也就是HTML 代码。

② 预解析(pre-parsing)

预解析做的事情是提前加载资源,减少处理时间,它会识别一些会请求资源的属性,比如img标签的src属性,并将这个请求加到请求队列中。

③ 符号化(Tokenization)

符号化是词法分析的过程,将输入解析成符号,HTML 符号包括,开始标签、结束标签、属性名和属性值。

它通过一个状态机去识别符号的状态,比如遇到<>状态都会产生变化。

④ 构建树(tree construction)

注意:符号化和构建树是并行操作的,也就是说只要解析到一个开始标签,就会创建一个 DOM 节点。

在上一步符号化中,解析器获得这些标记,然后以合适的方法创建DOM对象并把这些符号插入到DOM对象中。

<html><head><title>Web page parsing</title></head><body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div></body></html>

浏览器容错进制

你从来没有在浏览器看过类似”语法无效”的错误,这是因为浏览器去纠正错误的语法,然后继续工作。

事件

当整个解析的过程完成以后,浏览器会通过DOMContentLoaded事件来通知DOM解析完成。

6.2. CSS 解析

一旦浏览器下载了 CSS,CSS 解析器就会处理它遇到的任何 CSS,根据语法规范[4]解析出所有的 CSS 并进行标记化,然后我们得到一个规则表。

CSS 匹配规则

在匹配一个节点对应的 CSS 规则时,是按照从右到左的顺序的,例如:div p { font-size :14px }会先寻找所有的p标签然后判断它的父元素是否为div

所以我们写 CSS 时,尽量用 id 和 class,千万不要过度层叠。

6.3. 渲染树

其实这就是一个 DOM 树和 CSS 规则树合并的过程。

注意:渲染树会忽略那些不需要渲染的节点,比如设置了display:none的节点。

计算

通过计算让任何尺寸值都减少到三个可能之一:auto、百分比、px,比如把rem转化为px

级联

浏览器需要一种方法来确定哪些样式才真正需要应用到对应元素,所以它使用一个叫做specificity的公式,这个公式会通过:

  • 标签名、class、id
  • 是否内联样式
  • !important

然后得出一个权重值,取最高的那个。

渲染阻塞

当遇到一个script标签时,DOM 构建会被暂停,直至脚本完成执行,然后继续构建 DOM 树。

但如果 JS 依赖 CSS 样式,而它还没有被下载和构建时,浏览器就会延迟脚本执行,直至 CSS Rules 被构建。

所有我们知道:

  • CSS 会阻塞 JS 执行
  • JS 会阻塞后面的 DOM 解析

为了避免这种情况,应该以下原则:

  • CSS 资源排在 JavaScript 资源前面
  • JS 放在 HTML 最底部,也就是 </body>

另外,如果要改变阻塞模式,可以使用 defer 与 async。

6.4. 布局与绘制

确定渲染树种所有节点的几何属性,比如:位置、大小等等,最后输入一个盒子模型,它能精准地捕获到每个元素在屏幕内的准确位置与大小。

然后遍历渲染树,调用渲染器的 paint() 方法在屏幕上显示其内容。

6.5. 合并渲染层

把以上绘制的所有图片合并,最终输出一张图片。

6.6. 回流与重绘

回流(reflow)

当浏览器发现某个部分发现变化影响了布局时,需要倒回去重新渲染,会从html标签开始递归往下,重新计算位置和大小。

reflow基本是无法避免的,因为当你滑动一下鼠标、resize 窗口,页面就会产生变化。

重绘(repaint)

改变了某个元素的背景色、文字颜色等等不会影响周围元素的位置变化时,就会发生重绘。

每次重绘后,浏览器还需要合并渲染层并输出到屏幕上。

回流的成本要比重绘高很多,所以我们应该尽量避免产生回流。

比如:display:none 会触发回流,而 visibility:hidden 只会触发重绘。

6.7. JavaScript 编译执行

大致流程

可以分为三个阶段:

1. 词法分析

JS 脚本加载完毕后,会首先进入语法分析阶段,它首先会分析代码块的语法是否正确,不正确则抛出“语法错误”,停止执行。

几个步骤:

  • 分词,例如将var a = 2,,分成vara=2这样的词法单元。
  • 解析,将词法单元转换成抽象语法树(AST)。
  • 代码生成,将抽象语法树转换成机器指令。

2. 预编译

JS 有三种运行环境:

  • 全局环境
  • 函数环境
  • eval

每进入一个不同的运行环境都会创建一个对应的执行上下文,根据不同的上下文环境,形成一个函数调用栈,栈底永远是全局执行上下文,栈顶则永远是当前执行上下文。

创建执行上下文

创建执行上下文的过程中,主要做了以下三件事:

  • 创建变量对象
  • 参数、函数、变量
  • 建立作用域链
  • 确认当前执行环境是否能访问变量
  • 确定 This 指向

3. 执行

JS 线程

虽然 JS 是单线程的,但实际上参与工作的线程一共有四个:

其中三个只是协助,只有 JS 引擎线程是真正执行的

其中三个只是协助,只有 JS 引擎线程是真正执行的

JS 引擎线程:也叫 JS 内核,负责解析执行 JS 脚本程序的主线程,例如 V8 引擎事件触发线程:属于浏览器内核线程,主要用于控制事件,例如鼠标、键盘等,当事件被触发时,就会把事件的处理函数推进事件队列,等待 JS 引擎线程执行定时器触发线程:主要控制setIntervalsetTimeout,用来计时,计时完毕后,则把定时器的处理函数推进事件队列中,等待 JS 引擎线程。HTTP 异步请求线程:通过XMLHttpRequest连接后,通过浏览器新开的一个线程,监控readyState状态变更时,如果设置了该状态的回调函数,则将该状态的处理函数推进事件队列中,等待JS引擎线程执行。

注:浏览器对同一域名的并发连接数是有限的,通常为 6 个。

宏任务

分为:

  • 同步任务:按照顺序执行,只有前一个任务完成后,才能执行后一个任务
  • 异步任务:不直接执行,只有满足触发条件时,相关的线程将该异步任务推进任务队列中,等待JS引擎主线程上的任务执行完毕时才开始执行,例如异步Ajax、DOM事件,setTimeout等。

微任务

微任务是ES6和Node环境下的,主要 API 有:Promiseprocess.nextTick

微任务的执行在宏任务的同步任务之后,在异步任务之前。

代码例子

console.log('1'); // 宏任务 同步
setTimeout(function() {
    console.log('2');     // 宏任务 异步})
new Promise(function(resolve) {
    console.log('3');     // 宏任务 同步    
    resolve();
}).then(function() {
    console.log('4')// 微任务})
    console.log('5') // 宏任务 同步

以上代码输出顺序为:1,3,5,4,2

近期热文推荐:

1.Java 15 正式发布, 14 个新特性,刷新你的认知!!

2.终于靠开源项目弄到 IntelliJ IDEA 激活码了,真香!

3.我用 Java 8 写了一段逻辑,同事直呼看不懂,你试试看。。

4.吊打 Tomcat ,Undertow 性能很炸!!

5.《Java开发手册(嵩山版)》最新发布,速速下载!

觉得不错,别忘了随手点赞+转发哦!

查看原文

赞 12 收藏 8 评论 0

jm365 发布了文章 · 2020-12-03

Markdown Syntax document(Markdown 语法文档)

  1. 根据组件文档进行开发

    1. 在src中新建组件名称对应目录,已大写字母开头
    2. js文件一个,css文件一个,可参考现有组件
    3. index.js文件中需要require对应js,在index.css中需要require对应css
    4. 可在dev.js中引入组件对应js css,然后npm run dev在开发是查看组件对应效果

Text

Here is a paragraph with bold text. This is some bold text. Here is a
paragraph with bold text. This is also some bold text.

Here is another one with italic text. This is some italic text. Here is
another one with italic text. This is some italic text.

Here is another one with struckout text. This is some struckout text.

Links

Autolink: http://example.com

Link: Example

Reference style link.

Images

Image: My image

Headers

First level title

Second level title

Third level title

Fourth level title

Fifth level title
Sixth level title

Title with link

Title with image

Code

This
  is
    code
      fence

Inline code span in a paragraph.

This is a code block:

/**
 * Sorts the specified array into ascending numerical order.
 *
 * <p>Implementation note: The sorting algorithm is a Dual-Pivot Quicksort
 * by Vladimir Yaroslavskiy, Jon Bentley, and Joshua Bloch. This algorithm
 * offers O(n log(n)) performance on many data sets that cause other
 * quicksorts to degrade to quadratic performance, and is typically
 * faster than traditional (one-pivot) Quicksort implementations.
 *
 * @param a the array to be sorted
 */
public static void sort(byte[] a) {
    DualPivotQuicksort.sort(a);
}

Quotes

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

A list within a blockquote:

  • asterisk 1
  • asterisk 2
  • asterisk 3

Formatting within a blockquote:

header

Link: Example

Html

This is inline <span>html</html>.
And this is an html block.

Column 1Column 2
fdsafsad
fdsafdsaffdsf
Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2

Horizontal rules


_


Lists

Unordered list:

  • asterisk 1
  • asterisk 2
  • asterisk 3

Ordered list:

  1. First
  2. Second
  3. Third

Mixed:

  1. First
  2. Second:

    • Fee
    • Fie
    • Foe
  3. Third

Tables:

Header 1Header 2Header 3Header 4
默认左对齐左对齐右对齐居中对齐
查看原文

赞 0 收藏 0 评论 0

jm365 发布了文章 · 2020-12-01

深入ecma-262理解JavaScript隐式转换与显示转换

JavaScript是一门弱类型语言,其灵活的设计初衷也带来了隐式转换的弊端;下面是对js数据类型转换的梳理

首先得知道js的数据类型6种基本数据类型与object

6种基本数据类型(含es6):nullundefinedstringnumberbooleansymbol(es6新增)

隐式转换js内部的相关方法

要深入理解js的隐式转换,得先知道几个js内部与隐式转换相关的方法(不需要深入理解的可以跳过)

这是js内部实现的方法,我们是无法直接调用的

ToPrimitive(input, [PreferredType])

具体处理逻辑可查看ECMA-262关于ToPrimitive的说明;此方法用于js内部将非基本数据类型数据转为基本类型数据,方法逻辑可以简单概括为:

  • 1.PreferredType的值默认为default,可选值还有string、number
  • 2.当PreferredType为number时,会先调用input的valueOf方法,如果得到了基本数据类型,就以此当返回值;如果没有,则调用toString方法
  • 3.当PreferredType为string时,会先调用toString方法,然后走类似步骤2的逻辑
  • 4.当PreferredType为default时,与为number时处理逻辑一致

ToBoolean(argument)

具体处理逻辑可查看ECMA-262关于ToBoolean的说明;此方法为js内部将数据转为boolean类型;可以概括为(感觉没啥好概括的,就把ecma的描述翻译一遍了):

原数据类型转换成boolean后的结果
undefinedfalse
nullfalse
number0-0NaN转为false,其他为true
string长度为0的转为false,其他为true
symboltrue
Object(所有非原始类型的)true

ToString(argument)

具体处理逻辑可查看ECMA-262关于ToString的说明;此方法为js内部将数据转为string类型;同样简单翻译下ecma文档:

原数据类型转换成string后的结果
undefined'undefined'
null'null'
booleanfalse => 'false', true => 'true'
symbol报错
number-0 => '0',NaN => 'NaN', 其他转换 => number对应的字符串

ToNumber(argument)

具体处理逻辑可查看ECMA-262关于ToNumber的说明;此方法为js内部将数据转为number类型;同样简单翻一下ecma文档:

原数据类型转换成number后的结果
undefinedNaN
null0
booleantrue => 1, false => 0
undefinedNaN
symbol报错
string逻辑比较多,见下面的内容
object(所有非原始类型的)ToPrimitive(object, number)
stringnumber

string首尾的空格会被忽略,所以下面不讨论首尾有空格的情况;数字部分首尾的0也会被忽略

  • 字符串里为纯数字或者带小数点的数字时,转为对应number
new Number('11') // 11
new Number('11.11') // 11.11
  • 字符串以0x(x可以是大写)开头
new Number('0x12') // 18,即将18转换成16进制
new Number('0x') // NaN
new Number('0x12z') // NaN,z无法转换成对应的16进制
  • 0b(二进制)、0o(八进制)与0x类似
  • 字符串中含有\u0031unicode码,会将unicode码转换成对应字符后处理
  • ''长度为0的字符串会转换成0
  • 纯不可见转义字符('\r''\n'等等)会转换成0
  • 其他会转换成NaN

隐式转换

转换场景

  • 抽象相等==运算符的隐式转换:
    1.类型相同时等同于===
    2.类型不相同时,会将两边转换为number进行比较
    3.一边是非原始类型的会通过ToPrimitive(input)转换成原始类型后处理

    两边都是对象时==运算符比较的是对象内存地址
    除Date外,ToPrimitive(input)会优先调用valueOf转换,Date因为内部做了特殊处理,会先调用toString,具体原理可见ecma对应文档
  • 抽象比较运算符(如>=<=等等)的隐式转换:

    1. 如果两边都是string,会从左至右一次比较字符的unicode码
    2. 否则会将两边转换为number进行比较
    3. 非原始类型的会通过ToPrimitive(input, number)转换成number后处理
  • 逻辑运算符(||&&!)的隐式转换

会将数据转换成boolean

  • 算数运算符(+-*/>>)的隐式转换

会将数据转换成number后进行处理

  1. 非原始类型的会通过ToPrimitive(input, number)转换成number后处理
这里的+不是字符串拼接+至少有一边是string时会进行字符串拼接,会将非字符串的数据转成字符串
注意:不含symbol是因为symbol不能转换

显示转换

parseInt

看mdn的api就好,简单易懂

Number.prototype.toString(rdx)

看mdn的api就好

查看原文

赞 0 收藏 0 评论 0

jm365 发布了文章 · 2020-11-30

web前端开发工程师需要掌握的知识点

作为前端开发工程师需要掌握的知识点,这里只放目录,相关知识点会有对应的文章详细说明,正在完善中

网络相关

tcp协议

http

其他

  • cdn的实现原理
  • dns协议

JavaScript

设计模式

  • 观察者模式与发布订阅模式

Vue全家桶

Vue

  • Vue性能优化
  • vue.runtime.js与vue.common.js的区别
  • vue diff算法
  • new一个Vue实例时代码的执行过程
  • 双向绑定的原理
  • computed计算属性的实现

vue-router

  • vue-router的实现原理

vuex

  • 什么时候使用vuex

vue-ssr

  • 什么情况适合用ssr

NodeJS

  • 事件循环机制

CSS

  • flex布局
  • BFC

web安全

  • xss攻击
  • csrf攻击
  • 运营商http劫持
  • dns劫持
  • DDOS攻击

工程化

webpack

  • webpack是什么
  • loader的作用与实现
  • plugin的作用与实现
  • HMR的实现原理
  • tree-shaking

rollup

  • 什么时候适合用rollup

数据结构与算法

排序

  • 快速排序
  • 冒泡排序
  • 选择排序
  • 归并排序
  • 插入排序

数据操作

  • 数组全排列
  • 树(含二叉树)的操作(遍历、搜索、路径存储、最大深度)
  • 位操作
  • 滑动窗口
  • 动态规划

其他

  • 发布至npm的组件库如何实现按需加载
查看原文

赞 0 收藏 0 评论 0

jm365 发布了文章 · 2020-11-27

vue项目性能优化方法

大概有以下几点

路由组件按需加载

一般一个项目会有多个页面(路由),利用webpack的代码分割与vue的异步组件,将代码按路由做按需加载;可以大大提高首次打开速度,页面越多效果越明显

非页面一级功能组件拆分按需加载

在刚打开页面时有些功能是不需要的,比如点击后的弹窗;可以将这些功能做拆分,结合vue的异步组件与webpack的代码分割做按需加载

每个页面都需要加载的代码存入cdn

如vue.min.js、axios、vuex.js、vue-router.js等等

sourceMap相关代码不要打入js内

sourceMap文件如果打入js内会大大增加js文件大小

大的图片不要打成base64

大的图片打成base64会增加js文件大小

图片懒加载

不打成base64的图片做懒加载处理,减少首屏加载的内容,从而提高加载的速度;vue有现成的插件可以使用

静态资源存入cdn

可以在打包后利用脚本直接上传至cdn

vue-ssr

ssr在服务器性能足够的情况下可以加快首屏的渲染,并且对seo友好

vue文件的使用

在使用构建工具时,vue文件要使用不含compiler的,比含有compiler的小30%左右;npm默认加载的是不含compiler的,但存cdn的时候需要注意

代码书写相关

列表渲染添加key

key可以在vue做diff处理的时候快速找到可以复用的dom

函数式组件使用

函数式组件可以提高组件渲染效率,但是没有状态、生命周期

v-if与v-show的使用

v-if首次不需要显示时可以减少vue对响应模块的处理,但切换时比v-show要慢;频繁切换时用v-show

Object.freeze冻结不需要变更的内容

Object.freeze冻结data中对应的对象之后,vue不会将对应数据转化成观察者,可以提高渲染速度

组件细分

vue对比新旧vnode是组件级别的,细分组件可以在视图较小变动时提高性能

查看原文

赞 0 收藏 0 评论 0

jm365 发布了文章 · 2020-11-26

前端开发工程师技术栈图谱

作为前端开发工程师需要掌握的知识点,这里只放目录,相关知识点会有对应的文章详细说明,正在完善中

网络相关

tcp协议

  • 3次握手与4次挥手
  • tcp与udp的区别
  • http1.0/1.1/1.2的区别
  • https的证书校验与秘钥交换
  • http缓存

JavaScript

  • 事件循环机制
  • 事件流(事件冒泡与捕获)
  • 继承
  • 原型链
  • 闭包
  • 柯里化

Vue全家桶

Vue

  • Vue性能优化
  • vue.runtime.js与vue.common.js的区别
  • new Vue代码执行过程
  • vue diff算法
  • vue生命周期

vue-router

vuex

vue-ssr

  • 什么时候适合用ssr

NodeJS

  • 事件循环机制

CSS

web安全

工程化

webpack

rollup

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 13 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-12-17
个人主页被 1.3k 人浏览