自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 position:sticky特性(坑)总结

1.sticky不会触发BFC,2.z-index无效,3.当父元素的height:100%时,页面滑动到一定高度之后sticky属性会失效。4.父元素不能有overflow:hidden或者overflow:auto属性。5.父元素高度不能低于sticky高度,必须指定top、bottom、left、right4个值之一...

2020-02-11 15:06:20 116

转载 export 与 export default

export 和 import 都属于 ES6 的内容。node 的 module 遵循的是 CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。ES6发布的 module 并没有直接采用 CommonJS,甚至连 require 都没有采用,也就是说 require仍然只是 node 的一个私有的全局...

2020-02-03 19:48:06 47

原创 node express 获取host出错的问题

http://xxx.cn/frontend使用req.hostname获取本地调试能正常的取到localhost可是到真实环境下取到的却是frontend_servicenginx的问题加下面一句就好了proxy_set_headerHost$host;...

2020-02-02 18:43:01 111

原创 node跨域与解决处理

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。下面先上实现代码,以node的Express框架为例:server.use('/', function(req, res, next) { console.log(r...

2020-01-31 21:21:23 94

转载 XMLHTTPRequest属性、方法、事件大全&详解

XMLHTTPRequest属性、方法、事件整理大全。xhr 对象的方法 open(method:string, url:string, async?:boolean=true, username?:string, password: string) 用于创建HTTP请求,但请求并未发送。 method, 请求类型,如GET、POST等,大小写不敏感。 url,U...

2020-01-31 17:16:43 142

转载 POST提交数据之---Content-Type的理解

Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。在网络请求中,常用的Content-Type有如下:text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, imag...

2020-01-31 16:39:57 99

转载 强缓存与协商缓存

在工作中,前端代码打包之后的生成的静态资源就要发布到静态服务器上,这时候就要做对这些静态资源做一些运维配置,其中,gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。缓存的优点:减少了不必要的数据传输,节省带宽 减少服务器的负担,提升网站性能 加快了客户端加载网页的速度 用户体验友好缺点:资源如果有更改但是客户端不及时更新会造成用户获取信息滞后,如果老版本...

2020-01-28 18:03:05 93

转载 前端缓存详解

一、前言前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存,主要在服务器代码上设置;而浏览器缓存则主要由前端开发在前端js上进行设置。缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。...

2020-01-28 17:33:05 77

转载 node中req.params,req.query,req.body三者的区别

req.params,req.query,req.body三者经常容易弄混,今天就记录一下三者的区别。req.params,req.query是用在get请求当中,而req.body是用在post请求中的req.paramsrouter.get('/modify/:articleID', function(req, res, next){ res.send('articleID ...

2020-01-27 15:44:41 83

原创 express 使用 multer 做文件上传时自定义文件名和存储路径

一、简洁multer更新到1.x之后无法直接通过app.use(multer());这样的方式去使用。multer 的 文档地址:https://github.com/expressjs/multer中文文档的翻译也是2016年10月的,不建议看中文文档。安装:yarn add multer引入:const multer = require('multer'...

2020-01-25 17:14:28 928

转载 前端异常捕获和定位

前言于前端而言,不管是开发还是生产阶段,异常的捕获和定位都是至关重要的。开发阶段,通过详细的报错信息,我们可以快速定位并解决问题。在生产,通过异常监控,根据异常埋点信息,我们可以第一时间知道异常信息,不至于造成严重后果。window.onerror全局监听异常来捕获借鉴下 MDN 的说明,当 JavaScript 运行时错误(包括语法错误)发生时候, wi...

2020-01-16 17:13:28 43

转载 H5缓存机制浅析-移动端Web加载性能优化

1 H5缓存机制介绍H5,即HTML5,是新一代的HTML标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。H5应用程序缓存为应用带来三个优势:离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更...

2020-01-02 16:58:16 41

转载 java实现高并发秒杀---简单示例 springboot+redis+rabbitmq+mybatis

前言​ 为什么要写秒杀系统呢,像现在限时秒杀已经成为电商项目中的一种常态,像现在的一些龙头电商企业都具备限时秒杀活动,这样能调动用户的购买兴趣的活动,能够给项目带来更大的活力,所以对于这个秒杀功能不说是一定能写,但是一定要了解他。原理秒杀与其他业务最大的区别在于,在秒杀的瞬间,系统的并发量和吞吐量会非常大,与此同时,网络的流量也会瞬间变大。对于系统并发量变大问题,这里的核心在于如何在大...

2019-12-30 09:33:06 108

转载 一个开箱即用,功能完善的 Express 项目

node.js 对前端来说无疑具有里程碑意义,在其越来越流行的今天,掌握 node.js 已经不仅仅是加分项,而是前端攻城师们必须要掌握的技能。而 express 以其快速、开放、极简的特性, 成为 node.js 最流行的框架,所以使用 express 进行 web 服务端的开发是个不错且可信赖的选择。但是 express 初始化后,并不马上就是一个开箱即用,各种功能完善的 web 服务端项目,...

2019-12-17 14:47:55 58

原创 css/css3实现未知宽高元素的垂直居中和水平居中

ps:不考虑兼容问题(下次会写js实现元素的水平and垂直居中 )第一种css3的transform父类设置 position:relative;子类设置如下:.ele{/*设置元素绝对定位*/ position:absolute;/*top 50%*/ top: 50%;/*left 50%*/ left: 50%;/*css3 transf...

2019-11-04 12:50:15 53

转载 一个Vue页面的内存泄露分析

什么是内存泄露?内存泄露是指new了一块内存,但无法被释放或者被垃圾回收。new了一个对象之后,它申请占用了一块堆内存,当把这个对象指针置为null时或者离开作用域导致被销毁,那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null,且代码里面没办法再获取到这个对象指针了,就会导致无法释放掉它指向的内存,也就是说发生了内存泄露。为什么代码里面会拿不到这个对象指...

2019-11-03 12:00:03 52

转载 Vuex的实战使用

vuex的实战使用写在前面我是一个看技术的文档不喜欢官方的人,觉得官方写的任何东西都是比较正式的,让人有点不想看的赶脚,我这里也不贴官方的那个图了,这里也不解释了(其实是我也不想研究)所以我一般都是百度一些别人的经验之谈,看别人的经验之谈可以让你少踩一些坑,而且是可以直接看到效果的,所以这里也是,我们不按照官方的来,那么有利有弊,利就是好理解,弊就是可能写的不够专业,会让一些人误会,总之我权衡...

2019-11-02 19:52:21 35

转载 webpack4.0入门以及使用

1. 安装webpack先新建一个文件夹(demos),然后npm init -y新建一个package.json然后在当前目录执行webpack命令webpack模块未发现或者未找到src文件,我们新建src文件夹(demos/src)mdkir src难道我们全局安装的webpack没用吗?最新官网出了一个常见的命令和一个参...

2019-08-07 21:46:17 55

转载 什么是TCP、UDP以及两者的区别

什么是TCPTCP(Transmission Control Protocol传输控制协议)是一种面向连接的,可靠的,基于字节流的传输通信协议。1、tcp(Transmission Control Protocol传输控制协议)2、传输层协议3、原因:应用层需要可靠的连接,但是IP层没有这样的流机制4、面向连接,即在客户端和服务器之间发送数据之间,必须先建立连接5、位于应用层和IP...

2019-07-16 00:15:48 45

转载 H5兼容问题及解决方法

Meta基础知识:H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一、HTML页面结构<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />// width 设置...

2019-04-22 14:00:02 934

原创 前端如何处理十万级别的大量数据

简单说明下这是一道面试题,刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀!面试官说那是从后台的角度来考虑的。从前端的角度呢?emmmmm...我思考了一下,分批加载,懒加载。监听用户的滑动分批显示数据。接着又问,如果我要对这些大量数据做计算做处理呢,同时又不能让页面崩掉、假死。该如何操作呢?顿时我就懵逼了,这。。这个要怎么操作呀。心想做计算啥的不是应该在后台做完吗!而且...

2019-04-14 22:38:03 7088 2

转载 JavaScript常用的简洁高级技巧

前言编程是一件很快乐的事,实现一个目的,我们可以有很多方法路径,在这篇文章我们介绍一些JavaScript的奇技淫巧,仅供大家参考,各路大神在平时的代码编写时,如很多简洁高效的书写方式;欢迎各位在下方留言。一、数据类型检测1.1 typeoftypeof操作符返回一个字符串,表示未经计算的操作数的类型;该运算符数据类型(返回字符串,对应列表如图)1.2 i...

2019-03-10 22:09:59 113

转载 vue 生命周期 详解

先来看看vue官网对vue生命周期的介绍Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始...

2019-03-05 23:50:49 90

转载 Vue组件中利用.sync修饰符实现对prop进行双向数据绑定

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。所以官方推荐以update:my-prop-name 的模式触发事件取而代之为了好理解,我写了一个很简单的小例子:(单击输入框,显示或隐藏下面的box)下面是完整的代码:<!DOCTYPE html>...

2018-11-15 13:26:18 191

转载 App真机 - 联调chrome、Safari调试

Android只需要四个步骤:1、先保证 是否安装了chrome浏览器2、其次 ,保证 chrome 是否 已经翻墙成功!3、最后 使用android 真机连接 电脑4、最后的最后,打开chrome ,输入:chrome://inspect即可,另外,chrome只支持 android 4.4以上手机!2017.06.27IOS只需要两步骤:1、打开手机端web...

2018-10-30 11:46:51 477

转载 超详实Git简明教程与命令大全

Git (wiki: en chs )是一个免费开源的分布式版本控制系统,由linux内核作者linus Torvalds开发,大型开源项目linux kernel、Android、chromium、mono、dotnet、UE4等都使用Git管理项目著名github网站使用Git托管所有项目代码,Git的代码也托管在github上,链接为:github.com/git与集中式版本控制系统...

2018-10-28 20:52:55 155

转载 win10配置java环境变量,解决javac不是内部或外部命令等问题

###昨天重装了win10系统,发现以前配好的java环境变量和tomcat环境变量全都清空了,在重新配置的时候总是出现问题,即在cmd命令窗口下,输入java,显示正常,输入java -version 也是显示正常,唯独输入javac,显示“javac不是内部或外部命令,布拉布拉一些的问题”,然后我就开始各种百度各种谷歌,终于在大半夜把这个问题搞定了。。。来看看我的新博客下面来说说这个问...

2018-10-18 17:30:55 87

原创 JDK安装与环境变量配置

安装JDK 选择安装目录 安装过程中会出现两次 安装提示 。第一次是安装 jdk ,第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。(不能都安装在java文件夹的根目录下,jdk和jre安装在同一文件夹会出错) 如下图所示 2 1:安装jdk 随意选择目录 只需把默认安装目录 \java 之前的目录修改即可 2:安装jre→更改→ \j...

2018-10-18 15:19:52 76

转载 Git 对已经加入版本控制的文件,修改后希望不被提交办法

问题举例:假设网站有一个数据库配置文件db.php,通过git做版本控制,已经将这个文件提交到git库中。但是本地的数据库配置是读取的本地数据库,所以希望这个db.php文件在每次提交代码的时候不被提交。说明:通过.gitignore是无法办到的,因为db.php已经加入版本控制了解决办法:# 执行命令将db.php加入不提交队列git update-index --assu...

2018-10-18 10:42:10 1133

转载 全方位理解JavaScript的Event Loop

先看段代码:console.log(1);setTimeout(function () { console.log(2); new Promise(function (resolve, reject) { console.log(3); resolve(); console.log(4); }).then(function () { console.log(5);...

2018-10-17 11:34:06 64

转载 在前后端分离的项目中,ajax跨域请求怎样附带cookie

在项目的实际开发中,我们总会遇到前后端分离的项目,在这样的项目中,跨域是第一个要解决的问题,除此之外,保存用户信息也是很重要的,然而,在后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢,通过查阅资料,我这里以angula...

2018-10-16 14:46:35 154

转载 学习笔记:gitflow解析以及工具使用

转自: http://lanhao.name/282 (谢谢楼主分享)git-flow,是一个工具,是一种规范Git Flow是构建在Git之上的一个组织软件开发活动的模型,是在Git之上构建的一项软件开发最佳实践。Git Flow是一套使用Git进行源代码管理时的一套行为规范和简化部分Git操作的工具。( http://www.ituring.com.cn/article/568...

2018-09-13 22:14:09 488

原创 格式化数字,逢千位数加逗号

var num = 98100025;function formatting(num){ num = String(num); num = num.split('').reverse().join(''); num = num.replace(/([0-9]{3})/gm, '$1,'); num = num.split('').reverse().join('...

2018-09-13 22:08:41 951 1

转载 Git基本命令和GitFlow工作流

Git基本命令和GitFlow工作流本篇博客讲解了git的一些基本的团队协作命令,和GitFlow工作流指南git 团队协作的一些命令1.开分支git branch 新分支名例如,在master分支下,新开一个开发分支:git branch dev2.切换到新分支git checkout 分支名例如,在master分支下,切换到新开的dev:git checkout...

2018-09-13 13:31:44 155

转载 深入Vue2.x的虚拟DOM diff原理

作者简介:汪玉林,高级工程师,增值产品部前端Leader,目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目,有丰富的Web前端架构经验。 一、前言Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》,vdom是树状结构,其节点为vnode,vnode和浏览器DOM中的Node一一对应,通过vnod...

2018-09-11 22:08:33 86

转载 VueSSR高阶指南

嗨 各位小伙伴好,好久没有写文章了,这次分享一下我们从使用node以来,前端架构上的一些优化 如果看过我上一篇文章B站的前端之路的小伙伴可能知道 我们从去年开始打烊 使用node 到现在已经经历了一年的迭代,承载的访问量也从百万级别 扩大到了现在的亿级别,这次补充一些干货吧~vue如何实现热更新我们都知道,对于node来说,前端vue代码的迭代节奏是很快的,可能一周要迭代几次,但是node...

2018-09-09 03:26:45 3697

原创 Flex盒模型理解

Flex布局,可以简便、完整、响应式地实现各种页面布局设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。inline-flex 和 inline-block 一样,对内部元素来说是个 display:flext 的容器,对外部元素来说是个 inline 的块。...

2018-09-06 16:11:49 139

转载 vue-ssr中造成内存和cpu泄漏的原因

在vue-ssr中造成内存和cpu泄漏的原因目前我所调查的结果就是这么两个原因:挂起的socket造成暂时性的堵塞 vue-router中的timer在某些情况下会陷入死循环 大量的模板编译,内存中会存留大量被字符串占用的内存那么如何解决呢?移除component中对于beforeRouteEnter的处理。将这里的处理移到其他地方,从vue-router代码层面分析是可以避免陷入t...

2018-09-06 15:36:57 1569

转载 Vue.js 插件开发详解

认识插件想要开发插件,先要认识一个插件是什么样子的。Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如...

2018-09-05 13:13:23 79

转载 体积减少80%!释放webpack tree-shaking的真正潜力

在上周末广州举办的feday中,webpack的核心开发者Sean在介绍webpack插件系统原理时,隆重介绍了一个中国学生于Google夏令营,在导师Tobias带领下写的一个webpack插件,webpack-deep-scope-analysis-plugin,这个插件能够大大提高webpack tree-shaking的效率。tree-shaking目前的缺陷tree-shakin...

2018-09-04 00:55:05 2175

提示
确定要删除当前文章?
取消 删除