- 博客(164)
- 收藏
- 关注
原创 深入理解Nodejs单线程实现高并发原理
一直都说nodejs是可以支持高并发的,但是是nodejs不是单进程单线程模式吗?那它的高并发到底是怎么回事呢?nodejs单进程单线程事件驱动Node遵循的是单线程单进程的模式,node的单线程是指js的引擎只有一个实例,且在nodejs的主线程中执行,同时node以事件驱动的方式处理IO等异步操作。node的单线程模式,只维持一个主线程,大大减少了线程间切换的开销,但是会有多个worker线程,用于执行异步操作。但是node的单线程使得在主线程不能进行CPU密集型操作,否则会阻塞主线程。对于CPU
2021-01-25 15:07:33
1493
原创 Node学习笔记——模块
创建模块在 Node.js 中,创建一个模块非常简单,如下我们创建一个 main.js 文件,代码如下:var hello = require('./hello');hello.world();复制代码以上实例中,代码 require('./hello') 引入了当前目录下的 hello.js 文件(./ 为当前目录,node.js 默认后缀为 js)。Node.js 提供了 expor...
2020-04-19 16:09:06
271
原创 实现一个小型打包工具
本文是基于webpack原理,实现一个几十行代码的小型打包工具,可以加深对打包工具原理的理解。该工具可以实现以下两个功能:将 ES6 转换为 ES5支持在 JS 文件中 import CSS 文件实现深入Babel,这一篇就够了因为涉及到 ES6 转 ES5,所以我们首先需要安装一些 Babel 相关的工具npm i babylon babel-traverse babel-co...
2020-02-07 07:12:42
543
原创 Nginx初探
Nginx简介作为代理服务器,主要作用是反向代理服务器(有多台服务器的情况下):只需要一个入口,屏蔽n个服务器,提供唯一一个入口。Nginx作用1)负载均衡:将请求转发到后端服务器(有多个服务器),至于选择哪个可以修改规则。2)动静分离:动态资源(如接口)和静态资源(如js、css文件)进行分离,分别请求到对应的动态或静态资源服务器。3)缓存:http缓存,就是和浏览器对应的强缓存和协商...
2020-01-15 15:34:31
198
原创 service-worker工作原理浅析
前言之前有写过一篇文章,对service-worker做了简单的介绍:Service Worker初探这篇文章主要是对service-worker工作原理做一个浅析浅析,使得对service-worker有一个更深入的了解~...
2020-01-08 02:38:34
511
原创 博客搬家通知
即日起,本人博客搬家到掘金,谢谢各位的关注!欢迎大家继续关注我的新博客,地址:https://juejin.im/user/5b0919e151882538b1096f08
2019-08-09 09:27:43
207
转载 浏览器的多线程
前言JavaScript是单线程,这个应该都有了解。那么,对于JavaScript的宿主环境,浏览器,浏览器的内核是多线程的。在内核控制下各线程相互配合以保持同步,一个浏览器通常由以下常驻线程组成:GUI 渲染线程JavaScript引擎线程定时触发器线程事件触发线程异步http请求线程而常驻的线程至少有3个:1、GUI 渲染线程2、JavaScript引擎线...
2019-08-05 22:17:04
3293
转载 React调度器原理解析
Fiber在React16的新版本,使用了Fiber重新实现了React的核心算法,带来了杀手锏增量更新功能。它有能力将整个更新任务拆分为一个个小的任务,并且能控制这些任务的执行。这些功能主要是通过两个核心的技术来实现的:•新的数据结构 fiber•调度器这篇文章主要对调度器原理进行解析。调度器简介为什么需要调度?大家都知道 JS 和渲染引擎是一个互斥关系。如果 JS 在执行代码,...
2019-08-05 15:02:23
812
转载 js函数前面加分号的作用
;function($,undefined) 是什么用处 ?;(function($){$.extend($.fn...现般在一些 JQuery 函数前面有分号在前面加分号可以有多种用途:1、防止多文件集成成一个文件后,高压缩出现语法错误。2、这是一个匿名函数,一般js库都采用这种自执行的匿名函数来保护内部变量 (function(){})()...
2019-05-10 11:46:39
1372
原创 总结移动端video视频播放的坑
1、x5同层播放器移动端浏览器中的video元素是比较特别的,早期无论是在iOS还是Android的浏览器中,它都位于页面的最顶层,无法被遮盖。后来这个问题在iOS下得到了解决,但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎,它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。只要给普通的video元素加上X5的自定义属性x5-video-...
2019-04-17 07:21:52
1021
原创 Service Worker初探
前言service worker是PWA(Progressive Web App,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。)的重要组成部分,W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API ,主要用来做持久的离线缓存,也是Web Worker的升级版。科普 Service WorkerService...
2019-03-07 00:15:01
587
原创 js获取url的参数
getUrlParams(variable) { var query = window.location.search.substring(1); var vars = query.split('&'); for (var i = 0; i < vars.length; i++) { var pair ...
2019-01-25 11:22:44
260
转载 webpack 的 loader 和 plugin的区别
https://blog.csdn.net/wp270280522/article/details/51496436
2018-10-29 14:17:16
7670
原创 Lazy Load的实现
前言在对前端性能优化实践的时候,图片的获取是需要http请求的。如果我们在首屏加载的时候,就将所有的图片请求回来,这样会很费性能,也没有必要。如果图片很多,会造成卡顿、白屏的现象。因此,使用lazy load是优化的方法之一,让暂时看不到的图片先不加载,当我们需要看到的时候才去请求,减轻了性能的压力,也不影响用户体验。当然现在有很多现场的组件库可以使用,jq和react都有。但是懒加载的原理是...
2018-10-28 00:12:24
1570
原创 CSS中translate和position: relative设置的偏移有什么区别?
从页面布局的角度看transform 和 position:relative 的效果是一样的。差别在于,transform 可以简单地作用于 position:absolute 的元素上面,而 position:relative; 还得加额外的 html从动画角度来说使用 transform 或 position 实现动画效果时是有很大差别。使用 transform 时,可以让...
2018-10-09 14:01:12
3137
原创 React里面的constructor()、super()、super(props)具体使用
前言在写React的时候,有时候会被constructor()搞懵,不知道什么时候该写super(),super(props)。现在来总结一下。class由于,React是依赖于es6的Class,就是es5对象的语法糖。里面的constructor想当于对对象的初始化。例如:class Point { constructor(x, y) { this.x = x...
2018-10-03 13:08:32
7805
原创 前端页面性能优化
前言最近参加了两次社招,发现社招面试都会问到性能优化以及框架原理。当中性能优化即使我知道好几种,然而我面试时总是很容易想不起来,只答出了两三种。因此,写一篇博客来对性能优化做一下研究,加深理解。1、压缩 合并对于 前端性能优化 自然要关注 首屏 打开速度,而这个速度,很大因素是花费在网络请求上,那么怎么减少网络请求的时间呢?减少网络请求次数 减小文件体积 使用 CDN 加速所...
2018-09-27 17:52:47
267
原创 封装一个判空方法
//判断空export const isNull = (data) => { // 解决处理判断数字0=''的问题 if (data == 0) { data = data.toString(); } return data == null || data == '' || data == 'undefined' || data.lengt...
2018-09-19 11:37:36
540
原创 React服务端渲染store和router的同步
前言store采用的是mobx作为状态管理,mobx使用起来确实是比redux简单,没有那么多繁琐的配置。router是react-router4.2。其实实现简单的服务端渲染并不难,react服务端渲染的简单配置这里之前有简单介绍了一下。我个人认为主要的难点是在实现store和router在服务端和客户端的同步。服务端渲染的路由在实现服务端渲染的路由比较简单,因为官方都给我们提供了a...
2018-08-27 14:37:07
1986
原创 mobx observer导致react-router路由失效的问题
问题描述在个人项目当中,我使用了mobx作为状态管理,react-router作为前端路由。在这两者配合使用时,我发现了在点击Link进行路由切换的时候,url已经改变了,但是并没有渲染对应的组件,路由切换无效。原代码:router.jsximport React from 'react'import { Route, Redirect,} from 'react...
2018-08-22 17:00:36
3212
原创 React-视图更新策略
setStatereact的一个组件很明显的由dom视图和state数据组成,两个部分泾渭分明。 state是数据中心,它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别,没了Controller控制器,那用户交互怎么处理,数据变化谁来管理?然而这并不是react所要关心的事情,它只负责ui的渲染。与其他框架监听数据动态改变dom不同,react采用setState...
2018-08-13 14:52:38
2468
原创 React工程的服务端渲染简单配置
创建服务端渲染打包的入口文件server-entry.jsimport React from 'react';import App from './App.jsx';export default <App />;创建服务端渲染的webpack配置文件webpack.config.server.jsconst path=require('path');m...
2018-07-30 10:32:46
543
原创 Vue-数据响应式系统的实现
前言在我们使用vue的时候,我们知道,如果我们修改vue实例当中data里面的值,那么对应该数据的视图也会很快得到更新,这就是响应式系统。响应式系统,实现原理就是Object.defineProperty(obj, prop, descriptor)。具体讲讲怎么实现,下面只是讲一个简单的例子,实现了依赖的收集和触发。Object.defineProperty(obj, prop, des...
2018-07-26 15:36:10
375
原创 sockte.io基本使用
服务端io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socketio.sockets.emit(‘String’,data);//给所有客户端广播消息io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息socket.on(‘String’,...
2018-07-23 15:02:18
468
原创 webpack-DllPlugin优化工程构建速度
前言如果我们的webpack工程变得越来越大,我们会发现,我们工程打包的速度会变得越来越慢。为了提升我们的开发效率,我们应该要做一些优化。CommonsChunkPlugin 一般来说,如果我们的工程涉及了很多的第三方库,而我们的第三方库一般来说都是不会被修改的,因此,我们的做法就是把第三方库作为一个文件提取出来,避免每次修改代码都会对第三方库重新构建,而且业务代码本身的模块体积也会小...
2018-07-22 17:32:16
1449
原创 Object.prototype.toString方法的原理
前言我们在判断一个对象的内置类型时,我们一般可以使用以下方法:var arr = [];console.log(Object.prototype.toString.call(arr)) //"[object Array]"那么,这个方法的原理是什么呢?ECMAScript 3在toString方法被调用时,会执行下面的操作步骤:1. 获取this对象的[[Class]]属性的值.2. 计算出三...
2018-07-05 23:48:41
3953
原创 Hot-Module-Replacement详细配置说明
前言在react工程中要实现热加载,就是只更新局部的修改,我们可以使用react-hot-loader。安装依赖npm install --save-dev react-hot-loader修改.babelrc配置文件 { plugins: ["react-hot-loader/babel"] }开启webpack-dev-server的HMR因为react-hot-loa...
2018-06-30 14:40:30
6447
原创 webpack加入 babel-plugin-transform-runtime 和 babel-polyfill
先来说说babel-plugin-transform-runtime在转换 ES2015 语法为 ECMAScript 5 的语法时,babel 会需要一些辅助函数,例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里,这样文件多的时候,项目就会很大。所以 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-run...
2018-06-22 18:00:19
14135
原创 bundle-loader实现按需加载
前言如果我们不进行按需加载, 把所有js加载到一个文件里面,会造成首屏加载慢的问题,毕竟把当前页面不需要的js也加载进来,因此我们要进行按需加载操作。在react-router4之前,按需加载使用的是require.ensure的方法,异步加载组件。在react-router4,官方推荐使用webpack的bundle-loader进行按需加载。bundle-loader原理npm i --sav...
2018-06-14 19:08:45
5554
原创 webpack的css loader
前言webpack里面,其实只能识别js,如果要对css进行处理,我们要安装一些loader。css-loader当然,如果你想用sass、less之类的,安装对应的scss-loader即可,我这里使用的是css-loader。如果想要把css文件作为<style>的内容插入到模板文件当中,首先要安装css-loader,可以让js加载css,通过import即可把css引入进来。如...
2018-06-14 14:32:10
792
原创 redux的使用
前言想要在react里面使用状态管理,redux就是最好的选择。更加详细的介绍:http://cn.redux.js.org/docs/basics/Reducers.htmlActionAction 本质上是 JavaScript 普通对象。我们约定,action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。当应用规模越来越大时,建...
2018-06-13 19:00:24
2001
原创 webpack代码分离ensure(同步加载及异步)
前言首先,webpack里的引入是使用require,导出是使用module.exports,也就是common.js规范。例如:const path = require('path');module.exports = { /*入口*/ entry: [ 'react-hot-loader/patch', path.join(__dirna...
2018-06-12 17:35:53
1737
原创 浏览器判断规则
var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsUc = sUserAgent.m...
2018-06-12 11:29:52
206
原创 输入框里面的值通过正则匹配改变导致的光标问题(坑!!)
前言需求是这样的,输入加油卡号,每隔输入4位自动加上一个横杠,如图:这个光标问题是个坑,,加班到10点还没解决好。。。解决方法首先,这里我使用的方法是监听输入,使用正则匹配。 <p className="addcard_tip">卡号:</p> <input type="tel" id="cardNum" value={this.state.cardid} clas...
2018-06-11 18:24:02
1043
2
原创 JS 小数自动取两位,不足自动补全
function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { alert('function:changeTwoDecimal->parameter error'); ...
2018-06-05 15:52:06
2328
原创 async/await
前言之前,可以利用promise来解决地狱回调的问题,但是,如果回调的嵌套层数过多的话,会造成then链过长,这也不是我们想要的。于是,es6中出现Generator函数,然而,async/await是对Generator函数的再进一步优化。async/await是什么顾名思义,async表示的是异步。而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明...
2018-06-03 18:13:06
237
原创 Generator异步化同步
前言Generator这个异步化同步的说法我真的理解了很久,结合js的事件队列来联想,我一直想不懂。。JS的运行规则首先,我们先简单回顾一下JS的运行规则:JS是单线程的,只有一个主线程函数内的代码从上到下顺序执行,遇到被调用的函数先进入被调用函数执行,待完成后继续执行遇到异步事件,浏览器另开一个线程,主线程继续执行,待结果返回后,执行回调函数。那么,Generator函数是如何进行异步化为同步操...
2018-06-02 19:07:51
1144
转载 Vue的filters
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><...
2018-05-27 16:57:49
458
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人