摘要：
1. 网站架构的伸缩性设计 1.1. 不同功能进行物理分离实现伸缩 纵向分离（分层后分离）：将业务处理流程上的不同部分分离部署，实现系统伸缩性。 横向分离（业务分割后分离）：将不同的业务模块分离部署，实现系统伸缩性。 1.2. 单一功能通过集群规模实现伸缩 将不同功能分离部署可以实现一定程度的伸缩性 阅读全文
摘要：
目前前端三杰 Angular、react、vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 DOM，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。它们都有自己的典型路由解决方案，@angular/router、react-router、vue-r 阅读全文
摘要：
下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果，更多效果大家可以自行发挥。 1.前言 由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canvas的优缺点： 动画自由度：canva 阅读全文
摘要：
package.json 在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块的描述文件，被称为 package.json。 package.json 属性说明： na 阅读全文
摘要：
我酷爱模块化设计。长期以来我都热衷于将网站分离成组件，而不是页面，并且动态地将那些组件合并到界面上。这种做法灵活，高效并且易维护。 但是我不想我的设计看上去是由一些不相关的东西组成的。我是在创造一个界面，而不是一张超现实主义的照片。 很幸运的是，已经有一项叫做 css 的技术，就是特意设计用来解决这 阅读全文
摘要：
一. js动画和css动画区别。 css实现动画：animation transition transform js实现动画：setInterval setTimeout requestAnimationFrame JS动画： 优点： 1. 过程控制，可以在动画播放过程中对动画进行控制：开始、暂停、 阅读全文
摘要：
首先简单说下思路：本地git仓库与远程仓库关联（github、码云等平台），然后pm2按照指定配置登录服务器，拉取远程仓库的代码更新，再执行一些指定的命令（如打包等）。 创建本地项目并关联到远程仓库 本地新建名为web的项目，进入项目并创建一个简单的Nodejs文件app.js， mkdir web 阅读全文
摘要：
css3的过渡属性，给web应用带来了简单优雅的动画，但是比起初次相见，他（transition）有许多细则。在这片文章中，我将会专研css3的过渡（transition）中更加复杂的部分，从链式和事件到硬件加速和动画函数。让浏览器控制动画序列，通过改变帧率，减少绘画和减少GPU的工作，能够优化性能 阅读全文
摘要：
如果你在日常工作中使用css，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注css的实现原理。 你可能还没有意识到，但CSS的视觉效果通常是操纵隐藏属性的间接结果。一些CSS属性（如 background-colo 阅读全文
摘要：
1.前言 在上家公司开发后台管理系统的时候，频繁要处理各种数据显示的问题，一开始是实现就好。后来写多了，自己看得也难受了。就想着怎么优化代码和复用了。下面就通过一个简单的例子，怎么让 API 更加的实用，更好的复用。 1.代码的实用性，只能尽量，尽量再尽量。不会出现完美的API，或者是一次编写，永不 阅读全文
摘要：
项目需求写完有一段时间了，但是还是想回过来总结一下，一是对项目的回顾优化等，二是对坑的地方做个记录，避免以后遇到类似的问题。 需求 利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。生成的海报如下 需求分析 1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序2、利用小程序生成 阅读全文
摘要：
本文将会从一个大型的网站发展历程出发，一步一步的探索这个网站的架构是如何从单体架构，演化到分布式架构，然后演化到高并发架构的。 一、单块架构 一般一个网站刚开始建立的时候，用户量是很少的，大概可能就几万或者几十万的用户量，每天活跃的用户可能就几百或者几千个。 这个时候一般网站架构都是采用单体架构来设 阅读全文
摘要：
需求 最近在做一个项目需求，分享领好书活动，获取用户的个人信息以及unionID，并诱导用户分享给好友或朋友圈，达到裂变拉新的目的。在做的过程中遇到了一些坑的地方，所以回过来总结一下 技术方案 使用微信js-SDK自定义分享到好友和分享到朋友圈 实现步骤 1、要实现微信H5网页自定义分享功能，必须先 阅读全文
摘要：
编写css是前端工作中，一项普通而又频繁的劳动，由于css并不是一门语言，所以在程序设计上显得有些简陋。对于小型项目来说，css的量还不至于庞大，问题没有凸显，而如果要开发和持续维护一个较为大型的项目，那就需要对css进行管理和规范了，否则会发生不可挽回的后果（吓唬谁呢？？）。 背景 css谈模块化 阅读全文
摘要：
命名禁止缩写 精简扼要地对class命名，请勿使用自定义缩写。 class name的命名必须是行为、有语意的。 禁止在非特殊情况下写！important css本身有权重设计，任意地使用!important会造成权重混乱而无法维护。 不可轻易限定宽高 用户可以自行设定自己的浏览器，例如Androi 阅读全文
摘要：
属性选择器非常神奇。它们可以使你摆脱棘手的问题，帮助你避免添加类，并指出代码中的一些问题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。 通常将 html 属性放在方括号中，称为属性选择器，如下： [href 阅读全文
摘要：
一. 跨站脚本攻击（XSS，Cross-site scripting） 是最常见和基本的攻击WEB网站的方法。攻击者在网页上发布包含攻击性代码的数据。当浏览者看到此网页时，特定的脚本就会以浏览者用 户的身份和权限来执行。通过XSS可以比较容易地修改用户数据、窃取用户信息，以及造成其它类型的攻击，例如 阅读全文
摘要：
为什么说能使用html/css解决的问题就不要使用js呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点css技巧就 阅读全文
摘要：
在手机上使用css动画时很多时候会感到卡顿，然后网上很多教程说开启GPU加速 transform: translate3d(0,0,0); 可解决，但是为什么开启GPU加速就能让动画顺滑呢? 我们从浏览器内部去理解下 js是单线程的，但是浏览器可以开启多个线程，渲染一个网页需要两个重要的线程来共同完 阅读全文
摘要：
明白何谓Margin Collapse 不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习: .square { width: 80px; h 阅读全文