隐冬-CSDN博客

原创 JavaScript 垃圾回收机制

1. 概述随着软件开发行业的不断发展，性能优化已经是一个不可避免的话题，那什么样的行为才能算得上是性能优化呢？本质上任何一种可以提高运行效率，降低运行开销的行为，都可以看做是一种优化操作。这也就意味着，在软件开放行业必然存在着很多值得优化的地方，特别是在前端开发过程中，性能优化可以认为是无处不在的。例如请求资源时所用到的网络，以及数据的传输方式，再或者开发过程中所使用到的框架等都可以进行优化。本章探索的是JavaScript语言本身的优化，是从认知内存空间的使用到垃圾回收的方式，从而可以编写出高效的

2021-11-03 15:04:38 531

原创 React源码分析（这次终于弄明白了）

JSX是什么弄清JSX对理解虚拟DOM有很重要的作用JSX只是看起来像是HTML，但它却是JavaScript,在React代码执行之前，Babel会将JSX编译为React API。// 编译前<div className="content"> <h3>Hello React</h3> <p>React is great</p></div>// 编译后React.createElement( 'di

2021-05-26 09:30:12 2079

原创程序员如何做好职业规划

你好，我是隐冬职业规划这篇文章最初是我写给自己的，那时候还不知道原来这就叫职业规划，后来大二的时候再一次演讲中我又把他整理成文稿送给了我的同学。如果你喜欢，现在我同样送给你。个人理解职业规划就是你对自己职业的一个计划，首先你要知道自己要做什么，最终做到什么程度，你不可能一步到位的达到这个目标所以你要制定计划什么时间达到什么样层次。比如五年做到技术专家，十年做到架构师，十五年做到CTO。首先你要有这个想法，这非常重要，很多人都缺乏独立思考的能力，他们在一个级别打转了很多年到了瓶颈却不知道如何提升，这就是

2021-03-02 09:53:22 1339

原创精心准备的前端面试题

1. DOM性能DOM操作是非常昂贵的，所谓昂贵就是指DOM操作会耗费CPU，重复的重排和重绘也就是重复渲染，比较耗时耗费CPU的计算比较多。如果频繁操作可能会造成卡顿的问题，所以我们需要注意这些地方。1.对DOM查询做缓存用变量存储获取到的页面元素，避免频繁查询页面dom。2.将频繁操作改为一次性操作。多个dom操作建议合并统一操作。for (var i = 0; i < 10; i++) { var div = document.createElement('div')

2021-02-23 16:36:02 1778

原创 17条前端面试题总结

1. marginmargin-top为负，元素向上移动margin-left为负，元素向左移动margin-right为负，布局单元向左，元素自身不动，后面元素向左。margin-bottom为负，布局单元上移，自身元素展示不变。下面元素向上。2. 什么是HTML语义化html众多的标签中每一种标签都会代表一种单独的意思，比如h1-h6表示标题，ul和ol表示列表，p标签表示段落，strong标签表示强调。a标签表示超链接，img标签表示媒体图片。每一种标签都有自己的一种意思，html是给计

2021-02-23 16:35:32 1307

原创网站配置https

https证书有四种，这里我们只介绍最简单并且免费的，域名证书。写这篇文章的原因很简单，上一篇文末我说要使用WebRTC进行屏幕录制或者是远程桌面分享，必须要使用https，可能有很多人还不太会配置https，今天就来介绍一下。这里会介绍两种服务器的https配置，一种nginx，一种node。nginx的安装和配置不了解的同学可以参考我之前写的nginx文章，还是比较通俗易懂的。首先需要准备https域名证书和服务器环境，如何获取证书和配置我们下面会详细介绍https证书获取这里我们介绍三种ht

2021-01-12 19:11:45 2019

原创浏览器录屏工具开发

WebRTC是谷歌于2011年开源的一个音视频处理引擎可以实时的进行视频数据的采集，也就是说可以做直播，也可以做桌面录屏，桌面分享。使用起来还是比较简单的。这里我们来开发一个屏幕录制工具。首先我们在页面中创建一个video标签，用于展示录屏的内容，再创建四个按钮，一个屏幕分享，一个开始录制，一个停止录制，一个下载。<button id="start">屏幕分享</button><button id="record">开始录制</button><

2021-01-08 15:37:26 3622 4

原创给你的代码加点规范|ESLint

ESLint介绍我们知道，当下采用工具去完成项目代码的校验工作是更加高效和合理的，在这里我们使用的就是ESLint。他是目前最为主流的javascrit lint工具，专门用于监测javascript代码的质量。通过ESLint就可以很容易的去统一不同开发者的编码风格。例如缩进，换行，分号以及空格之类的使用。不仅如此，ESLint还可以帮助我们找出代码当中一些不合理的地方，例如我们定义了一个从未使用的变量，或者说我们在一个变量使用之后才去他进行声明。再或者说我们在进行比较的时候往往总是选择==的符号。

2021-01-07 18:50:39 2222

原创一文学会Webpack实用功能|核心实用配置

Webpack 体验 Tree ShakingTree-shaking的字面意思就是摇树。一般伴随着摇树这样一个动作我们树上的这些枯树枝和树叶就会掉落下来。那我们这里要说的Tree-shaking也是相同的道理，不过我们这里摇掉的使我们代码当中那些没有用到的部分，那这部分代码更专业的说叫未引用代码（dead-code）。webpack生产模式优化中就有这么一个非常有用的功能，那他可以自动检测出我们代码中那些未引用的代码，然后移除掉他们，那我们这里先来体验一下这样一个功能的效果。我们这里的代码也非常

2021-01-05 15:33:25 2247

原创一文学会Webpack实用功能|针对不同环境的配置

Webpack 自动刷新的问题在此之前呢我们已经简单了解了webpack-dev-server的一些基本用法和特性，那他主要就是为我们使用webpack构建的项目提供了一个比较友好的开发环境，和一个可以用来调试的开发服务器。那使用webpack-dev-server就可以让我们的开发过程更加专注于编码。因为他可以监视到我们代码变化，然后自动进行打包，最后再通过自动刷新的方式，同步到浏览器，以便于我们可以及时的预览。但是当你实际去使用这样的特性去弯沉具体的开发任务时那你会发现，这里还是会有一些不舒服的地

2021-01-05 15:32:17 3135 4

原创一文学会Webpack实用功能|source-map

Source Map通过构建编译之类的操作我们可以将开发阶段的源代码转换为能够在生产环境当中运行的代码。这是一种进步，但是这种进步的同时也就意味着我们在实际生产环境当中运行的代码与我们开发阶段所编写的代码之间会有很大的差异。那在这种情况下如果我们需要去调试我们的应用，又或是我们运行应用的过程中出现了意料之外的错误，那我们将无从下手。这是因为我们无论是调试还是报错，那他都是基于转换过后的代码来运行的。那Source Map就是解决这一类问题最好的一个办法。他的名字就已经表述了他的作用叫做源代码地图，那

2021-01-05 15:30:19 3169 8

原创一文学会Webpack实用功能|自动刷新

Webpack 开发体验问题在此之前我们已经了解了一些webpack的相关概念和一些基本的用法，但是如果以目前的状态去应对日常的开发工作还远远不够，那是因为编写源代码，再通过webpack打包，然后运行应用，最后刷新浏览器这周周而复始的方式过于原始。如果说我们在实际的开发过程中还按照这种方式去使用必然会大大降低我们的开发效率。那究竟该如何去提高我们的开发效率呢，那这里呢我们先对我们理想的开发环境做出设想。首先我们希望这样一个开发环境他必须能够使用http的服务去运行而不是以文件的形式去预览，那这样我们

2021-01-05 15:29:20 2515 2

原创一文学会Webpack实用功能|加载器篇

Webpack 资源模块加载通过探索我们知道可以把css文件作为打包的入口，不过webpack的打包入口一般还是JavaScript, 因为他的打包入口从某种程度来说可以算是我们应用的运行入口。而就目前而言，前端应用当中的业务是由JavaScript去驱动的，我们只是尝试一下，正确的做法还是把js文件作为打包的入口。然后在js代码当中通过import的方式去引入css文件。这样的话css-loader仍然可以正常工作，我们再来尝试一下。我们在js中import我们的css文件import creat

2021-01-05 15:27:58 4098 2

原创一文学会Webpack实用功能|核心工作原理

Webpack 核心工作原理webpack官网的首屏图片就已经很清楚的描述了他的工作原理，这里我们来简单理解一下webpack打包的核心工作过程。我们以一个普通的前端项目为例，在我们的项目中一般都会散落着各种各样代码及资源文件，webpack会根据我们的配置找到其中的一个文件作为打包的入口，一般情况这个文件都会是一个JavaScript文件。然后他会顺着我们入口文件当中的代码根据代码中出现的import或者require之类的语句解析推断出来这个文件所依赖的资源模块，然后分别去解析每个资源模块，对应的

2021-01-05 15:27:07 447 1

原创模块化打包工具的由来

模块化打包工具的由来模块化确实是很好的解决了我们在复杂应用开发中的代码组织问题，但随着我们引入模块化，我们的应用又会产生一些新的问题。第一个就是我们所使用的ES Modules这样一款模块系统本身就存在环境兼容问题，尽管现如今主流浏览器最新版本都已经支持这样一个特性了。但是我们目前还没办法做到统一所有用户浏览器的使用情况，所以我们还是需要去解决兼容问题。其次就是通过模块化的方式，划分出的模块文件会比较多，而我们前端应用又是运行在浏览器当中的。那每一个我们在应用中所需要的文件，都需要从服务器当中请求

2021-01-05 15:22:45 2082

原创 Webpack入口文件分析

概述webpack 作为目前最主流的代码打包工具，他提供了一整套的前端项目模块化方案，而不仅仅是局限于对JavaScript的模块化。通过webpack提供的前端模块化方案，我们就可以很轻松的对我们前端项目开发过程中涉及到的所有的资源进行模块化，因为webpack的想法比较先进，而且早之前的使用过程也比较繁琐，再加上他的文档也比较晦涩难懂，所以说在最开始的时候他显得对我们开发者不是十分友好。但是随着版本的迭代官网的文档也在不断的更新，目前webpack已经非常受欢迎，基本上可以说覆盖了绝大多数现代化的

2021-01-05 15:17:41 1641

原创 base64数据是如何实现的

base64Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。对于前端来说，一切可以放路径的地方，都可以使用base64来替代。node中的buffer对象可以通过toString(‘base64’)将buffer对象输出为base64。我们这里来简述一下汉字是如何转换成为base64的实现原理。比如我们来探索一下汉子"哈"通过base64的转换结果为"5ZOI"是如何实现的。首先我们利用nodejs中Buffer对象

2021-01-03 21:58:11 2850 1

原创函数式编程中的Functor详解

函子的英文叫做Functor，在了解函子之前我们先来说一下容器，容器包含值和值的变形关系，变性关系指的就是函数。所以容器是包含值和处理值的函数。其实函子就是一个特殊的容器，我们可以把函子想象成一个盒子，那这个盒子里面有一个值，并且这个盒子对外要公布一个方法，这个方法我们叫做map，map方法会去接收一个参数，这个参数是一个对值进行处理的函数。这就是函子的基本概念。首先说一下为什么要学习函子，我们知道，函数式编程是建立在数学思想上的，比如说我们的纯函数其实就是数学中的函数，那我们要学习的函子也是建立在数学

2021-01-03 12:41:11 1901

原创十分钟理解函数组合|函数式编程

纯函数和柯里化的概念请观看我前面两篇文章，如果不了解这两个概念，本文的内容很可能看不懂。我们在使用纯函数和柯里化时很容易写出洋葱代码，h(g(f(x)))，也就是一层包一层的代码，比如我们要获取数组的最后一个元素，然后在转换成大写字母。我们可以先去调用数组对象的reverse方法反转数组，然后调用first方法获取数组第一个元素，再调用toUpper方法将获取的第一个元素转为大写。const _ from 'lodash';const array = ['a', 'b', 'c', 'd'];_

2021-01-02 14:27:17 1357

原创如何理解柯里化|函数式编程

这里我们来谈论下函数式编程中另一个重要的概念，柯里化首先，我们先通过下面的方式将上节代码中不纯的函数变成纯函数。就是将mini拿到函数内部去。function checkAge (age) { let mini = 18; return age >= mini;}但是当我们把这个mini拿到函数内部的时候还有一个问题，因为这个变量的值等于一个具体的数字，就出现了硬编码，我们都知道，在写程序的时候要尽量避免硬编码。我们要解决硬编码也比较简单，只是需要把18提取到参数位置就可以了

2021-01-02 14:26:47 2231

原创如何理解函数式中纯函数

函数式编程中的函数，指的就是纯函数，纯函数的概念就是对于一个函数来说，使用相同的输入始终会得到相同的输出，而且没有可观察到的副作用。关于副作用我们后面在解释。这里我们只讨论相同的输入始终会得到相同的输出。纯函数其实就是数学中函数的概念，他是用来描述输入和输出的映射关系。y=f(x);我们这里通过数组的两个方法slice和splice演示一下纯函数和不纯的函数。slice是返回数组中的指定部分，不会改变原数组，splice是对数组进行操作，会改变原数组。我们这里调用了三次slice，注意纯函数的定义，相

2021-01-02 14:26:13 1252

原创为什么要去学习函数式编程

函数式编程比较复杂比较枯燥，但是为了了解react和redux，如果没有函数式编程的理论铺垫，很难学好他们。函数式编程在js当中是一个比较抽象的概念，大家在以前可能听说过函数式编程，但是可能并没有系统的去了解过他们。函数式编程和面向对象编程一样，是一套编程范式，你可以根据函数式编程的理论为你的代码设计这个过程。只不过但是函数式编程要求相对比较高一些为什么要去学习函数式编程函数式编程其实相对于计算机的历史而言是一个非常古老的概念，甚至早已第一台计算机的诞生。他的演算并非设计在计算机上执行，而是在20世

2020-12-31 14:58:53 2709

原创前端工程化概述

工程化出现的原因从广义上来讲，前端工程化其实就是遵循一定的标准和规范，通过工具去提高生产效率，降低开发成本的一种方式。工程化在近些年被广泛的关注和探讨，其主要原因主要是因为现代化前端应用功能要求在不断提高，业务逻辑变得日益复杂。前端技术作为当下互联网时代唯一不可或缺的技术，前端可以说是占据了整个开发行业的半壁江山。从传统的网站，到现在的H5, 小程序，移动App, 桌面应用等等。前端技术几乎是无所不能的全面覆盖。尤其是Node的发展，更是将前端推向了前所未有的高度。抛开这些表象问题深入到本质，也是

2020-12-30 11:50:46 773

原创小型前端脚手架工具Plop

小型的脚手架工具，是一款主要用于去创建项目中特定类型文件的小工具，类似于Yeoman中的sub generator, 不过它一般不会独立去使用，一般我们会把Plop集成到项目当中。接下来我们来通过两个案例的对比，去体会一下Plop的真正作用及他的优势。日常开发中经常会遇到这样的问题，我们在开发当中，经常需要重复去创建相同类型的文件，例如每一个组件都会有三个文件去组成。分别是js，css，test.js, 如果我们需要创建一个组件，就要去创建三个文件，并且每一个文件中都要有一些基础代码，这就比较繁琐，而且

2020-12-30 11:45:07 979 3

原创 js写的一款前端小游戏

拖延症晚期的我原本计划趁着周末写个年终总结，但是一直没有什么思路，想来想去也没想到要写啥就胡乱写了这么一个小东西。一直比较痴迷游戏行业，可能我不太适合做前端，应该去学C++…首先当然是选择一张背景图，作为整个场景中的地图，而且要大要高清。布局到页面中。然后通过可视区值展示这张图片的一小部分。我这里用的是宽600，高420的，超出直接隐藏掉。width: 600px;height: 420px;这样一个简单的场景就写好了，接着我们需要在这个场景中加入我们的人物。也就是游戏中的角色。不过游戏

2020-12-30 11:44:28 2238 8

原创基于NW实现的前端桌面应用

众所周知前端大多是基于命令行的cli工具，比如常见的脚手架工具，其实使用JS也可以编写很多具有UI界面的应用软件。这里我要介绍的是nwjs，为什么介绍他，因为他用起来真的很简单，可以让你快速入门，火速开发出属于自己的桌面应用。nwjs 是基于Chromium和Node.js运行的, 我们可以通过html+css来编写UI页面，使用js来实现功能。可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和Node.js的跨平台，那么你的应用也是可以跨平台的。现在已经有很多知名的应用

2020-12-30 11:43:42 1720

原创全链路前端性能优化方案

通常来讲前端性能优化是指从用户开始访问我们的网站到整个页面完整的展现出来的过程中，通过各种优化策略和优化方法让页面加载的更快，让用户的操作响应更及时，给用户更好的使用体验。这里我们介绍的是前端性能优化知识的解决方案，从静态资源优化开始入手，从表象深入体系化的讲解页面渲染架构，掌握搞笑的技术方案。本文并非细节的讲述如何实现性能优化，而是从各个方面介绍性能优化的方式方法，并且不仅限于H5，因为当今的前端也不仅仅只有H5。图片资源优化图片格式介绍jpeg: 一种针对彩色照片而广泛使用的有损压缩图形格

2020-12-30 11:35:32 1922

原创手写Promise源码实现

我们根据Promise的使用方式，实现一个自己的Promise，以此来了解Promise的源码思想。下面的代码是一个简单的Promise的使用案例，我们基于这个案例来实现一个自己的Promise。首先创建一个Promise对象，在接收的函数中同时调用失败和成功，然后再then方法中打印传入的参数。let p = new Promise(funcion(resolve, reject) { reject('失败啦'); resolve('成功啦');});p.then(functi

2020-12-30 11:34:41 478

原创前端存在哪些安全性

本文不是一个大而全的课程，只是我们日常中常见的问题，因为网络安全是一个很大的话题，我们这里只介绍前端工程师应知应会的东西。大概包括 XSS, CSRF, 点击劫持，SQL注入，OS注入，请求劫持，DDOS，以及简单的防范策略。1.XSSXSS的英文是Cross Site Scripting也就是常说的跨站脚本攻击，因为缩写和CSS重叠，所以只能叫XSS，跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或JavaScript进行的一种攻击。那么XSS一般是如何进行攻击

2020-12-30 11:33:46 1014

原创浏览器事件循环解析

同步模式异步模式想要了解事件循环，我们首先要说明白JavaScript的同步模式和异步模式。众所周知，目前主流的javaScript环境，都是以单线程的模式去执行的javaScript代码，那javaScript采用单线程工作的原因与他最早的设计初衷有关。最早javaScript这门语言就是一门运行在浏览器端的脚本语言，那他的目的是为了实现页面上的动态交互。而实现页面交互的核心就是dom操作，那这也就决定了，他必须使用单线程模型，否则就会出现很复杂的线程同步问题。我们可以设想一下，假定我们在jav

2020-12-30 11:32:15 451

原创 H5和微信小程序直播开发

大前端这几年算是一个热词，对于前段来说如果不是大前端，技术相对来说就已经算是落后了。如果还停留在对ES6，Vue这些基本技能的学习只能说处于一个及格线。如果想做的卓越必须必备另一些大前端技能，比如说NodeJS，express.js, koaJs服务类，或者three.js这类3d数据图像，还有二维图像处理，比如d3,raphael, echart, 最后hls, flv视频行业。如果只会ES6,Vue，React, Webpack这只能算是前端，大前端是至少要掌握上面的一项技能的。这篇文章就是介绍大前

2020-12-30 11:31:30 5109 8

原创你应该知道的前端小知识

1.JS为什么单线程一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具体以哪个线程为主就是个问题了，线程的调度问题是一个比较复杂的问题。HTML5新的标准中允许使用new Worker的方式来开启一个新的线程，去运行一段单独的js文件脚本，但是在这个新线程中严格的要求了可

2020-12-30 11:30:37 435

原创 ES6常用特性整理(三)

PromisePromise同样也是ECMAScript2015当中提供的一个内置对象，那他提供了一种全新的异步编程解决方案，通过链式调用的方式解决了我们在传统异步编程过程中回调函数嵌套过深的问题。不过关于Promise的细节有很多内容，所以说我们这里先不做详细介绍在JavaScript异步编程的文章中已经专门针对Promise进行了详细的分析。这里简短介绍的目的是为了让你对ECMAScript2015新增的所有的特性有一个系统化的认识。class类在此之前ECMAScript中都是通过定义函数以及

2020-12-22 21:55:18 297

原创 ES6全部常用特性整理(二)

文章概述这里我们要介绍的是ECMAScript以及他这几年发布的新特性，可能你会说，这不就是ES6么，我天天用的就是这个，的确，就目前而言一个合格的前端开发都应该对他比较熟悉。那为什么我们这里还是要再次说起ECMAScript呢，具体的原因也很简单。第一点就是结合面试过程中的经验，我们发现很多开发者并没有理解语言和平台之间的关系。以javascript为例，我们日常编写的代码，哪些属于语言层面，哪些属于平台层面，这一点，很多人都回答不出来。在以前，不了解这些一样可以写代码，但是在node平台发展的

2020-12-22 21:43:30 302

原创前端应该了解的nginx

反向代理反向代理说起来也很简单，比如你拨打一个电话号码，对方问你要找谁，然后帮你转接到对应的人的分机上。每个人拨打的都是相同的号码，但也都会通过转接找到对应的人，如果有人拨打错了，也会有友好的提示。你没有直接拨打对应人的号码，而是拨打了统一转接人的电话，这个人所做的事情就是反向代理, 反向代理是他会把你的问题转述给对应的人，并且把对应人的回答再转述给你。反向代理对服务器的要求很高，nginx是这方面的专家，所以大部分我们的服务器都使用nginx作为入口服务器，起到门卫的作用。举例来说一个web请求走

2020-12-21 16:45:11 1372

原创昨天面试的6道面试题

今天被抓差给候选者进行初面。在这里记录一下面试中涉及的几个知识点。每次面试我都会递给候选者一瓶水，这样可以让候选者没那么紧张，有更好的状态进行面试，毕竟面试是双向选择，公司也需要尽快找到合适的人，没那么多网上说的心理战。这里我还想吐槽一下面试造火箭工作拧螺丝，尤其是开发行业，很多面试官针对自己擅长的方向大问特问，完全忽略了候选人的优势，从而给候选人带来一个极差的面试体验。面试最好还是要通过候选人身上的优点来判断对方是否适合加入你的团队。正常的面试应该是按照候选人简历中涉及的技术点发问，不然面试时给你一

2020-12-21 16:20:27 1190

原创 ES6全部常用特性整理(一)