- 博客(164)
- 收藏
- 关注
RSS订阅原创 深入理解Nodejs单线程实现高并发原理
一直都说nodejs是可以支持高并发的，但是是nodejs不是单进程单线程模式吗？那它的高并发到底是怎么回事呢？nodejs单进程单线程事件驱动Node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理IO等异步操作。node的单线程模式，只维持一个主线程，大大减少了线程间切换的开销，但是会有多个worker线程，用于执行异步操作。但是node的单线程使得在主线程不能进行CPU密集型操作，否则会阻塞主线程。对于CPU
2021-01-25 15:07:33
1426
原创 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
265
原创 实现一个小型打包工具
本文是基于webpack原理，实现一个几十行代码的小型打包工具，可以加深对打包工具原理的理解。该工具可以实现以下两个功能：将 ES6 转换为 ES5支持在 JS 文件中 import CSS 文件实现深入Babel，这一篇就够了因为涉及到 ES6 转 ES5，所以我们首先需要安装一些 Babel 相关的工具npm i babylon babel-traverse babel-co...
2020-02-07 07:12:42
458
原创 Nginx初探
Nginx简介作为代理服务器，主要作用是反向代理服务器（有多台服务器的情况下）：只需要一个入口，屏蔽n个服务器，提供唯一一个入口。Nginx作用1）负载均衡：将请求转发到后端服务器（有多个服务器），至于选择哪个可以修改规则。2）动静分离：动态资源（如接口）和静态资源（如js、css文件）进行分离，分别请求到对应的动态或静态资源服务器。3）缓存：http缓存，就是和浏览器对应的强缓存和协商...
2020-01-15 15:34:31
187
原创 service-worker工作原理浅析
前言之前有写过一篇文章，对service-worker做了简单的介绍：Service Worker初探这篇文章主要是对service-worker工作原理做一个浅析浅析，使得对service-worker有一个更深入的了解~...
2020-01-08 02:38:34
493
原创 博客搬家通知
即日起，本人博客搬家到掘金，谢谢各位的关注！欢迎大家继续关注我的新博客，地址：https://juejin.im/user/5b0919e151882538b1096f08
2019-08-09 09:27:43
201
转载 浏览器的多线程
前言JavaScript是单线程，这个应该都有了解。那么，对于JavaScript的宿主环境，浏览器，浏览器的内核是多线程的。在内核控制下各线程相互配合以保持同步，一个浏览器通常由以下常驻线程组成：GUI 渲染线程JavaScript引擎线程定时触发器线程事件触发线程异步http请求线程而常驻的线程至少有3个：1、GUI 渲染线程2、JavaScript引擎线...
2019-08-05 22:17:04
3266
转载 React调度器原理解析
Fiber在React16的新版本，使用了Fiber重新实现了React的核心算法，带来了杀手锏增量更新功能。它有能力将整个更新任务拆分为一个个小的任务，并且能控制这些任务的执行。这些功能主要是通过两个核心的技术来实现的：•新的数据结构 fiber•调度器这篇文章主要对调度器原理进行解析。调度器简介为什么需要调度？大家都知道 JS 和渲染引擎是一个互斥关系。如果 JS 在执行代码，...
2019-08-05 15:02:23
791
转载 js函数前面加分号的作用
;function($,undefined) 是什么用处 ？;(function($){$.extend($.fn...现般在一些 JQuery 函数前面有分号在前面加分号可以有多种用途:1、防止多文件集成成一个文件后，高压缩出现语法错误。2、这是一个匿名函数，一般js库都采用这种自执行的匿名函数来保护内部变量 (function(){})()...
2019-05-10 11:46:39
1335
原创 总结移动端video视频播放的坑
1、x5同层播放器移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。只要给普通的video元素加上X5的自定义属性x5-video-...
2019-04-17 07:21:52
996
原创 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
572
原创 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
249
转载 webpack 的 loader 和 plugin的区别
https://blog.csdn.net/wp270280522/article/details/51496436
2018-10-29 14:17:16
7654
原创 Lazy Load的实现
前言在对前端性能优化实践的时候，图片的获取是需要http请求的。如果我们在首屏加载的时候，就将所有的图片请求回来，这样会很费性能，也没有必要。如果图片很多，会造成卡顿、白屏的现象。因此，使用lazy load是优化的方法之一，让暂时看不到的图片先不加载，当我们需要看到的时候才去请求，减轻了性能的压力，也不影响用户体验。当然现在有很多现场的组件库可以使用，jq和react都有。但是懒加载的原理是...
2018-10-28 00:12:24
1553
原创 CSS中translate和position: relative设置的偏移有什么区别？
从页面布局的角度看transform 和 position:relative 的效果是一样的。差别在于，transform 可以简单地作用于 position:absolute 的元素上面，而 position:relative; 还得加额外的 html从动画角度来说使用 transform 或 position 实现动画效果时是有很大差别。使用 transform 时，可以让...
2018-10-09 14:01:12
3062
原创 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
7670
原创 前端页面性能优化
前言最近参加了两次社招，发现社招面试都会问到性能优化以及框架原理。当中性能优化即使我知道好几种，然而我面试时总是很容易想不起来，只答出了两三种。因此，写一篇博客来对性能优化做一下研究，加深理解。1、压缩 合并对于 前端性能优化 自然要关注 首屏 打开速度，而这个速度，很大因素是花费在网络请求上，那么怎么减少网络请求的时间呢？减少网络请求次数 减小文件体积 使用 CDN 加速所...
2018-09-27 17:52:47
253
原创 封装一个判空方法
//判断空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
521
原创 React服务端渲染store和router的同步
前言store采用的是mobx作为状态管理，mobx使用起来确实是比redux简单，没有那么多繁琐的配置。router是react-router4.2。其实实现简单的服务端渲染并不难，react服务端渲染的简单配置这里之前有简单介绍了一下。我个人认为主要的难点是在实现store和router在服务端和客户端的同步。服务端渲染的路由在实现服务端渲染的路由比较简单，因为官方都给我们提供了a...
2018-08-27 14:37:07
1892
原创 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
3159
原创 React-视图更新策略
setStatereact的一个组件很明显的由dom视图和state数据组成，两个部分泾渭分明。 state是数据中心，它的状态决定着视图的状态。这时候发现似乎和我们一直推崇的MVC开发模式有点区别，没了Controller控制器，那用户交互怎么处理，数据变化谁来管理？然而这并不是react所要关心的事情，它只负责ui的渲染。与其他框架监听数据动态改变dom不同，react采用setState...
2018-08-13 14:52:38
2449
原创 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
524
原创 Vue-数据响应式系统的实现
前言在我们使用vue的时候，我们知道，如果我们修改vue实例当中data里面的值，那么对应该数据的视图也会很快得到更新，这就是响应式系统。响应式系统，实现原理就是Object.defineProperty(obj, prop, descriptor)。具体讲讲怎么实现，下面只是讲一个简单的例子，实现了依赖的收集和触发。Object.defineProperty(obj, prop, des...
2018-07-26 15:36:10
367
原创 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
455
原创 webpack-DllPlugin优化工程构建速度
前言如果我们的webpack工程变得越来越大，我们会发现，我们工程打包的速度会变得越来越慢。为了提升我们的开发效率，我们应该要做一些优化。CommonsChunkPlugin 一般来说，如果我们的工程涉及了很多的第三方库，而我们的第三方库一般来说都是不会被修改的，因此，我们的做法就是把第三方库作为一个文件提取出来，避免每次修改代码都会对第三方库重新构建，而且业务代码本身的模块体积也会小...
2018-07-22 17:32:16
1436
原创 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
3929
原创 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
6411
原创 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
14111
原创 bundle-loader实现按需加载
前言如果我们不进行按需加载， 把所有js加载到一个文件里面，会造成首屏加载慢的问题，毕竟把当前页面不需要的js也加载进来，因此我们要进行按需加载操作。在react-router4之前，按需加载使用的是require.ensure的方法，异步加载组件。在react-router4，官方推荐使用webpack的bundle-loader进行按需加载。bundle-loader原理npm i --sav...
2018-06-14 19:08:45
5524
原创 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
772
原创 redux的使用
前言想要在react里面使用状态管理，redux就是最好的选择。更加详细的介绍：http://cn.redux.js.org/docs/basics/Reducers.htmlActionAction 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下，type 会被定义成字符串常量。当应用规模越来越大时，建...
2018-06-13 19:00:24
1968
原创 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
1704
原创 浏览器判断规则
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
185
原创 输入框里面的值通过正则匹配改变导致的光标问题(坑！！)
前言需求是这样的，输入加油卡号，每隔输入4位自动加上一个横杠，如图：这个光标问题是个坑，，加班到10点还没解决好。。。解决方法首先，这里我使用的方法是监听输入，使用正则匹配。 <p className="addcard_tip">卡号：</p> <input type="tel" id="cardNum" value={this.state.cardid} clas...
2018-06-11 18:24:02
1024
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
2310
原创 async/await
前言之前，可以利用promise来解决地狱回调的问题，但是，如果回调的嵌套层数过多的话，会造成then链过长，这也不是我们想要的。于是，es6中出现Generator函数，然而，async/await是对Generator函数的再进一步优化。async/await是什么顾名思义，async表示的是异步。而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明...
2018-06-03 18:13:06
211
原创 Generator异步化同步
前言Generator这个异步化同步的说法我真的理解了很久，结合js的事件队列来联想，我一直想不懂。。JS的运行规则首先，我们先简单回顾一下JS的运行规则：JS是单线程的，只有一个主线程函数内的代码从上到下顺序执行，遇到被调用的函数先进入被调用函数执行，待完成后继续执行遇到异步事件，浏览器另开一个线程，主线程继续执行，待结果返回后，执行回调函数。那么，Generator函数是如何进行异步化为同步操...
2018-06-02 19:07:51
1125
转载 Vue的filters
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><...
2018-05-27 16:57:49
447
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人