- 博客(49)
- 收藏
- 关注
RSS订阅原创 试着探索高并发下的系统架构面貌
前言以前端入行编码，但是对后端架构也非常感兴趣。一直以来都觉得那些做到在洪水流量面前保持系统提供高可靠，高性能的服务的小哥哥们都很厉害。总想着去学习一番，因此大半年来不断学习后端相关的知识，试图去理解高并发架构的面貌。当然，本文仅仅是试着探索而已，并没有相关实践的经历，也只能从理论的角度去推演，从现有可参考的资料中去堆砌一个在我看来合理的架构方案。限于作者水平有限，因此难免行文难免有误，亦或是对整
2017-05-23 18:55:39
471
原创 聊聊这一年从技术麻瓜开始的奋斗史
技术麻瓜的大三狗，从初创公司唯一一个前端，到独自北漂在去哪儿进行寒假实习，最后南下腾讯暑期实习并成功转正。 作为一只野生的程序员，经历了一年的野蛮生长。将这一年的经历记录下，回味这一年的成长。背景介绍华科，通信工程专业学渣一枚，目前大四。 大三暑假开始决定工作，便开始了一只技术麻瓜的技术学习史。 想过做产品(没有项目跟进，不容易入门)，去实验室跟着看过大数据(门槛高，毕业的时候也难以有所小
2016-12-15 10:53:32
6041
23
原创 前端也该了解的一些后端知识
前言作为一个有追求的前端，在学有余力的同时，不应该把自己仅仅局限于前端的世界中的。 而后端的知识是与前端工作最密切相关的一部分内容，多了解些后端的知识也是大有裨益的。本文简单叙述了三种构建大型架构的必备知识。也是我做前端这么久以来，一直想知道的如何突破现有的性能瓶颈做到 高并发，高性能，高可靠。文中如有错误，欢迎指正。优化数据库负载均衡缓存技术优化数据库对于使用数据库的Web站点来说，数
2016-12-14 11:16:04
3653
原创 H5数据推送
WilsonLiu’s blog 首发地址前言众所周知，AJAX的出现是前端快速发展的一个标志，同时也是前后端得以分离的重要基础。作为一个C/S网络的web系统，网络通信在发挥着举足轻重的作用。 大部分的场景下，我们是主动触发AJAX去调取后端数据，但是总有那么些场景是后端数据更新了再推送给前端。 本文则试着和读者一起对这个数据推送的需求进行技术方案的探究。首先，列一个常用可选的技术清单 -
2016-12-07 11:10:55
4357
原创 JavaScript函数式编程
JavaScript函数式编程摘要以往经常看到”函数式编程“这一名词，却始终没有花时间去学习，暑期实习结束之后一直忙于边养老边减肥，81天成功瘦身30斤+ ，开始回归正常的学习生活。 便在看《JavaScript函数式编程》这本书，以系统了解函数式编程的知识。本文试图尽可能系统的描述JavaScript函数式编程。当然认识暂时停留于本书介绍的程度，如有错误之处，还请指正。注：本书采用的函数式库Un
2016-12-03 15:58:03
3736
原创 漫话前端缓存
漫话前端缓存背景说明缓存一直是前端性能优化中，浓墨重彩的一笔。了解前端缓存是打造高性能网站的必要知识。 之前，对于缓存的认知一直停留在看《HTTP权威指南》和一些相关帖子的深度，过了一段时间，又总是忘记，正好最近不是很忙，结合内网上的一些参考资料，结合实践，试着全面解析一下缓存以及其最佳实践。前后端交互中涉及到的缓存前端我们日常所见最多的也是我们最常利用的就是浏览器对于HTTP规范实现所进行的资源
2016-08-21 20:19:27
1085
原创 认识前端安全
前端安全一直是一个蛮严苛的问题，特别如果设计到money更是如此。 了解前端安全，在平时的coding中主动考虑，防范于未然，是一个有追求的程序猿应该做的。未登录我们从弱弱的基本开始，第一步当然是登录鉴权了，如果一个需要用户身份鉴权的应用系统没有登录过滤那简直是没法想像的，方案基本都是用户输入用户名 密码、或是三方 openID 授权后在 session 里保存用户此次登录的凭证来确保每次请求的
2016-08-16 11:10:59
3050
2
原创 漫话密码存储
背景密码是用来进行鉴权(身份认证)一种手段,说白了就是证明你是谁。一般鉴权都可以总结为下面3种形式:你知道什么? (如密码,密码提示问题等)你有什么? (如信用卡,token卡等)你是什么?(如指纹识别，瞳孔识别等)常见攻击方式常见的针对密码的攻击方式有: 暴力破解(Brute-force)字典攻击(Dictionary Attack)彩虹表攻击(Rainbow table attac
2016-08-15 20:51:41
405
原创 前后端交互过程中的编码
前后端交互过程中的编码起因最近在写PHP，本身对PHP不太熟练。然后遇到编码这个问题，困扰了大半天，索性，系统探索解决一番。前后端交互过程中涉及的编码Browser cilent: 首先，浏览器的设置里有设置编码格式，一般设置为UTF-8。AJAX request: AJAX异步请求的过程中可以设置编码，contentType:"application/x-www-form-urlencoded
2016-07-25 13:32:51
2108
原创 深入阅读gulp源码小结
深入阅读gulp源码小结gulp源码简介gulp源码核心部分寥寥60+行。但是通过这60+行代码，gulp给我们带来的确是前端自动化构建的便利。以往以为其源码肯定蛮复杂， 却没想到却是这么60+行，这60+行的背后，是来自于模块化的支撑。gulp的四个接口分别来源于orchestrator,vinyl-fs两个模块。 所以gulp的所有特性都来自于这两个模块。 Orchestrator是用来任
2016-07-18 21:54:46
1193
原创 阅读sea.js源码小结
sea.js想解决的问题恼人的命名冲突烦琐的文件依赖对应带来的好处 Sea.js 带来的两大好处：通过 exports 暴露接口。这意味着不需要命名空间了，更不需要全局变量。这是一种彻底的命名冲突解决方案。通过 require 引入依赖。这可以让依赖内置，开发者只需关心当前模块的依赖，其他事情 Sea.js 都会自动处理好。对模块开发者来说，这是一种很好的 关注度分离，能让程序员更多地享受
2016-06-26 12:00:59
986
原创 shell script编程小结--附带实例
shell script编程小结前言shell作为编程中不可或缺的一部分，平日里，我们经常会在shell中输入一些命令。有时候也需要完成一些复杂的操作，重复的输入多条相同的命令，过于费时和无趣。所以掌握shell script就显得非常有必要了，可以让你用编程的方式调用繁多的命令行工具。最近，正好碰上一个一直拖着的需求，便抄起了shell解决掉了，写了人生中第一段shell script代码。需求如
2016-05-20 15:45:08
3579
原创 基本视觉格式化
基本视觉格式化基本框内容区，内边距，边框，外边距。 边框的颜色如果没有设置，将取元素内容的前景色，同时边框与内容和内边距具有相同的背景。包含块每个元素都相对于其包含块摆放，可以这么说，包含块就是一个元素的“布局上下文”。块级元素水平格式化正常流中块级元素框的水平部分总和就等于父元素的width(width是指内容区的宽度)。水平属性水平格式化的“7大属性”是： margin-left marg
2016-05-20 13:50:44
543
原创 结构和层叠
结构和层叠继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。另外还需要考虑声明的特殊性与声明本身的来源。这个过程称为层叠(cascade)。特殊性对于每个规则，浏览器都会计算选择器的特殊性(specificity)。 选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如： 0,0,0,0。一个选择器的具体特殊性如下确定。 - 对于内联样式的特殊性，加1,0
2016-05-19 21:48:32
578
原创 CSS选择器
选择器规则结构选择器 声明块(属性:值;)h1 {color:red;}分组分组分为选择器分组和声明分组。h1,h2 {color:red} //选择器分组h1 {color:red;background:yellow;} //声明分组两者的结合，可以让代码更加简洁。选择器分类元素选择器，类选择器，ID选择器，属性选择器。类选择器.warning {font-style: italic;
2016-05-17 16:29:50
659
原创 端到端的数据
端到端的数据 第七章从网络的观点看，应用程序间彼此发送信息。每个消息只是一个未解释的字符串。然而，从应用程序的观点看，这些消息包含各种类型的数据——整型数组，视频帧，文本行，数字图像等。因此，我们需要考虑如何更好地对应用程序要转换成字符串的各种不同类型数据进行编码。编码实质上涉及两个问题。第一是接收方能从信号中提取出于传送方发送的消息相同的消息，这就是组帧的问题。第二是尽可能地提高编码效率。第一个问
2016-04-28 13:47:08
3063
原创 PHP字符串
字符串正则表达式PHP支持POSIX和Perl两种正则表达式实现的特性和语法。POSIX略perlperl与JavaScript的正则表示风格一致，故采用perl版的正则表达式。preg_grep()<?php$a=array("pasta","steak","fish","potatoes");$food = preg_grep("/^p/",$a,1); //当传入第三个参数1时，输出不
2016-04-27 18:17:54
631
原创 PHP数组
数组创建函数list(a,b,c)=$a,$b,$c;range(low,high,step);is_array($array);添加和删除数组元素array_push($array,$a);array_pop($array);array_shift($array);array_unshift($array,$a);定位数组元素in_array(val,$array);array_key
2016-04-27 18:17:29
557
原创 面向对象的PHP
面向对象的PHPOOP的好处OOP的三个基本概念：封装，继承，多态。封装通过众所周知的接口将用户与实际应用程序的内部工作原理分离，这种方法叫做封装。 通过这些定义良好的接口进行交互的组件称为对象，对象是通过一个称为类的模板创建的，类用于定义某个实体所应具有 的数据和行为。继承通过类来继承，子类会继承父类的所有性质和行为。多态多态是指OOP能够根据使用类的上下文来重新定义或改变类的性质或行为。关键
2016-04-27 18:16:17
554
原创 DOM扩展
11.1 选择符querySelector()querySelectorAll()11.2 元素遍历对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样就导致了使用childNodes与firstChild等属性时的行为不一致。为了弥补这一差异，而同时又保证DOM规范不变，Element Traversal 规范新定义了一组属性。 childEle
2016-04-27 18:13:02
628
原创 表单脚本
表单的基础知识获取表单的方式： 1. 通过id等方式找到 2. 通过document.forms获取文档对象上所有的表单。提交表单用户点击提交按钮或者图像按钮的时候，就会提交表单。 <input type="image" src="./ionic.png">只要表单上存在提交按钮或者图像按钮，那么在相应表单拥有焦点的时候，按下回车键就可以提交表单。（textarea是例外，会换行） 以上
2016-04-27 18:11:52
407
原创 DOM2
DOM2的模块划分DOM2级核心DOM2级视图DOM2级事件DOM2级样式DOM2级遍历和范围DOM2级HTML样式HTML中定义样式的方式有3种：<link>引入外部样式表文件，使用<style>元素定义嵌入式样式,以及使用style特性定义针对特定元素的样式。访问元素的样式style属性 任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。包
2016-04-27 18:10:25
527
原创 DOM
10.1 结点层次10.1.1 Node类型文档结点document是每个文档的根节点，document只有唯一子节点元素。 每个结点都有一个nodeType属性，用于表明节点的类型。 例：document.getElementsByTagName('html')[0].nodeType节点的有12个类型，分别由1-12这12个数字表示。 例：Node.ELEMENT_NODE这个值为1。
2016-04-27 18:10:07
557
原创 BOM对象
8.1 window 对象全局作用域全局变量不能通过delete删除，而直接在window上定义的的属性可以var age =29;window.color ="red";console.log(delete window.age); //在IE<9时抛出错误，在其他浏览器中返回falseconsole.log(delete window.color); //在IE>9时抛出错误，在其他浏览器
2016-04-27 18:09:44
450
原创 JavaScript 最佳实践
最佳实践24.1 可维护性24.1.1 什么是可维护性可理解性直观性可适应性可扩展性可调试性24.1.2 代码约定可读性 注释，合理的缩进有意义的变量和函数命名 一般命名规则：变量名应该为名词；函数名应该动词开始；24.1.3 松散耦合解耦html与JavaScript解耦css与JavaScript解耦应用逻辑与事件处理程序24.1.4 编程实践尊重对象所有权（如果
2016-04-27 18:08:34
452
原创 JavaScript 事件
事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流。 事件冒泡流：嵌套最深的结点最先接收事件。 事件捕获流：document对象最先接收事件。var test = function (el){ el.addEventListener('click', function() { console.log(el.id);
2016-04-27 18:08:06
592
原创 Javascript 函数表达式
定义函数的方式第一：函数声明 第二：函数表达式函数声明提升sayHi();function sayHi(){ alert("Hello world!")}7.1 递归递归函数是在一个函数通过名字调用自身的情况下构成的。function fac(num) { if (num <=1) { return 1; } else { return
2016-04-27 18:07:20
5028
1
原创 JavaScript面向对象的程序设计
面向对象的程序设计6.1 理解对象Object.defineProperties与Object.defineProperty 1. 数据属性 - configurable - enumerable - writable - value 2. 访问器属性 - get - set - configurable - enumerable"use strict";var book =
2016-04-27 18:06:33
543
原创 HTTP内容分发
内容分发Web主机托管对内容资源的存储协调以及管理的职责统称为Web主机托管。虚拟服务器请求却反主机信息HTTP/1.0中的一个设计缺陷会使虚拟主机托管者疯狂。HTTP/1.0中没有为共享的Web服务器提供任何方法来识别要访问的是所托管的哪个虚拟网站。 HTTP/1.0请求在报文中只发送URL的路径部分，如果要访问http://www.baidu.com/index.html，浏览器会连接到服务器
2016-04-27 17:26:07
916
原创 HTTP实体和编码
实体和编码每天都有数以亿计的各种媒体对象经由HTTP传送，如图像，文本，影片以及软件程序等。HTTP会确保它的报文被正确的传送，识别，提前以及适当的处理，则需要满足以下条件。 1. 可以被正确的识别(通过Content-Type首部说明媒体格式，Content-Language首部说明语言)，以便浏览器和其他客户端能够正确的处理内容 2. 可以被正确的解包(通过Content-Length首部和
2016-04-27 17:09:41
919
原创 HTTP的识别,认证与安全
识别,认证与安全第三部分的4章提供了一系列的技术和机器，可用来跟踪身份，进行安全性检测，控制对内容的访问。客户端识别与cookie机制 第十一章HTTP最初是一个匿名，无状态的请求/响应协议。服务器处理来自客户端的请求，然后向客户端回送一条响应。web服务器几乎没有什么信息可以用来判定是哪个用户发送的请求，也无法记录来访用户的请求序列。用户识别机制承载用户身份信息的HTTP首部客户端IP地址跟踪
2016-04-27 16:51:40
6137
原创 HTTP结构
HTTP结构第二部分的5章主要介绍了HTTP服务器，代理，缓存，网关和机器人应用程序，这些都是Web系统架构的构造模块。Web服务器 第五章Web服务器会对HTTP请求进行处理并提供响应。术语”web服务器”可以用来表示Web服务器的软件，也可以用来表示提供Web页面的特定设备或计算机。实际的Web服务器会做些什么建立连接—-接受一个客户端连接，或者如果不希望与这个客户端建立连接，就将其关闭接收
2016-04-27 16:17:51
3276
原创 HTTP:Web基础
概述HTTPHTTP协议是因特网的多媒体信使。HTTP可以从遍布世界的Web服务器上将这些信息快迅速，便捷，可靠地搬移到人们桌面上的Web浏览器上去。HTTP协议主要分Web客户端和服务器。其中Web服务器是Web资源的宿主。Web资源可以包含任意媒体类型内容，HTTP协议为了标识各种媒体类型，会给通过Web传输的对象都打上MIME类型的数据标签格式。(MIME科普:最初设计MIME(Multipu
2016-04-27 14:07:46
2204
原创 JavaScript 高级技巧
22.1 高级函数22.1.1 安全的类型检测typeof，instanceof并非完全可靠。解决办法，利用 Object.prototype.toString.call(value)22.1.2 作用域安全的构造函数function Person(name,age,job){ "use strict"; if(this instanceof Person){ //防止绑定到错误的作
2016-04-27 09:37:01
428
原创 calc与box-sizing的替代
背景：之前发现calc这个布局新属性之后就非常喜欢，爱不释手。在公司的实习的时候，开发微信端的页面，使用了几次calc，后来发现在Android的上的不支持～蛋疼。于是到处找替代方案，终于在stackoverflow上找到一个满意的答复，好～接下来进入正文～calc 与box-sizing 简单介绍* calc 属性*calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和
2016-04-27 09:35:14
852
原创 前端面试资料总结——附上大量优质资料链接
介绍3，4月份暑期实习招聘~准备了许久，看了网上不少的总结帖子，准备过程中，学习到了许多。 看过一句话~ 技术水平涨的最快的有两个阶段，一个面试前几个月，一个是入职后几个月~想想还是很有道理的。 拿到offer了~把自己复习时做的一些总结，给大家分享一下，希望能够对大家有些帮助~CSS部分常问问题： 1. 两种盒模型 2. 选择器优先级计算 3. 有哪些伪类 4. 纯css实现对话框带
2016-04-24 16:12:08
737
原创 排序算法——javascript算法实现
排序 Sorting排序基本概念排序是计算机程序设计中的一种重要操作，他的功能是将一个数据元素(或记录)的任意排列，重新排列成一个按关键字有序的序列。 待排序的记录序列中可能存在两个或两个以上的关键字相等的记录，且在排序前Ri在Rj前面(即i插入排序直接插入排序 O(n2)最为简单的一种排序，基本操作为将一个记录插入到已经排好序的有序表中，从而得到一个新的，记录增1的有序表。//直接插入排序，更为
2016-04-24 15:58:40
367
原创 查找算法——javascript算法实现
查找表 search table查找表相关概念查找表是由同一类型的数据元素(或记录)构成的集合。由于”集合”中的数据元素之间存在着完全松散的关系，因此查找表是一种非常灵便的数据结构。静态查找表 static search table动态查找表 dynamic search table关键字 key 关键字是数据元素中某个数据项的值，用它可以标识一个数据元素。静态查找表顺序表的查找顺序查找的过程：从表
2016-04-24 15:56:25
782
原创 串
串 sring串(string)(或字符串)是由零个或者多个字符组成的有限序列。串的表示和实现定长顺序存储表示类似于线性表的顺序存储结构，用一组地址连续的存储单元存储串值的字符序列。 在串的定长顺序存储结构中，按照预定义的大小，为每个定义的串变量分配一个固定长度的存储区。 串的实际长度可在这预定义长度的范围内随意，超过预定义长度的串值则会被舍弃，称之为”截断”。堆分配存储表示以一组地址连续的存储单元
2016-04-24 15:55:46
514
原创 端到端协议
端到端协议 第五章从前几章研究的主机到主机的分组传递服务到转向进程到进程之间的通信信道，这正是网络体系结构中传输层(transport)的任务，由于它支持端点应用程序之间的通信，因此传输层协议有时也被称为端到端(end to end)协议。因特网提供尽力而为(best-effort)的服务，为满足应用程序所需的高级服务，不同传输层协议用于不同的算法组合。代表性的4种有：一个简单的异步多路分解服务，一
2016-04-24 10:32:36
5101
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人