- 博客(48)
- 资源 (14)
- 收藏
- 关注
转载 nodejs-异步I/O
为什么要异步I/O 在跨网络结构下,I/O具体到实处可以从用户体验和资源分配两方面说起。用户体验采用异步请求,在下载资源期间,JavaScript和UI的执行都不会处于等待状态,可以继续响应用户的交互行为。同步与异步时间消耗对比,前者时间为M+N,后者为max(M+N)同步代码如下:// 消耗时间为MgetData('from_db');// 消耗时间为NgetData('from_r
2015-12-25 09:55:44
1471
翻译 HTTP 2.0 协议详解
HTTP 2.0 协议详解一、HTTP 2.0:改进传输性能 HTTP 2.0 的主要目标是改进传输性能,实现低延迟和高吞吐量。从另一方面看,HTTP 的高层协议语义并不会因为这次版本升级而受影响。所有HTTP 首部、值,以及它们的使用场景都不会变。现有的任何网站和应用,无需做任何修改都可以在HTTP 2.0 上跑起来。不用为了利用HTTP 2.0 的好处而修改标记。HTTP 服务器必须运行H
2015-12-04 20:25:52
38678
原创 TCP(传输控制协议)
TCP(传输控制协议) 传输控制协议(Transmission Control Protocol,TCP)是一种面向连接的、可靠的、基于字节流的传输层通信协议,由IETF的RFC 793定义。 在因特网协议族(Internet protocol suite)中,TCP层是位于IP层之上,应用层之下的中间层。一、TCP/IP协议族 TCP/IP(TCP/IP Protocol Suit
2015-11-17 21:43:15
3963
1
原创 下一代javascript
javascript-future下一代javascript同步。异步!协作程?同步与异步(同步编码代码量小(简单),符合人类理解方式(好写))同步XHR示例代码: var xhr = new XMLHttpRequest(); xhr.open('get', '/', false); try { xhr.send(); } catch (e) {
2015-11-09 22:50:27
755
原创 SPDY协议
SPDY接入服务概述 SPDY是Google开发的下一代网络协议,它并不是一种用于替代HTTP的协议,而是对HTTP协议的增强。谷歌表示,引入SPDY协议后,在实验室测试中页面加载速度比原先快64%,并且应用到Gmail中,目前业界支持SPDY的服务器有Netty和Nginx。SPDY增加了一个帧层用于多路复用,多个并发流通过一个TCP连接(或者其他可靠传输流)。这个帧层为类似HTTP的请求响应
2015-11-08 14:12:04
5731
1
原创 保护HTTP的安全
security-http1、保护HTTP的安全需要提供下列功能的HTTP安全技术:1、服务器认证(客户端感知是与可信任的服务端通信)2、客户端认证(服务端感知是与可新人的客户端通信)3、完整性(客户端和服务器的数据不可被篡改)4、加密(客户端和服务端通信不被窃取)5、效率(运行效率快的算法,支持低端客户端和服务端使用)6、普适性(支持所有客户端和服务器通信协议)7、适应性(能够支持目前最知名的安
2015-11-01 18:33:20
1916
原创 移动端页面性能探究
一、背景: 智能终端的普及改变了人们对互联网的使用习惯,终端环境对页面性能有更高的要求,接下来以一张图来分析:1s内渲染一个移动页面网络整体消耗来分析: 1、服务器响应应该小于200ms 2、尽量少的重定向 3、尽量少的第一次渲染的请求 4、避免过多堵塞的js和css堵塞j
2015-04-06 22:07:48
2976
1
原创 前端能力模型-动画类型及动画库的介绍
一、背景: 合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。二、动画技术分类: 按技术类型来进行分类,分为三类:JS动画,CSS3动画,html5动画,接下来分别对三类动画进行讲解。 1)JS动画 通过一个定时器setInte
2015-04-06 17:50:03
4724
翻译 前端能力模型-V8 JS引擎
一、webkit内核与V8在chrome浏览器中,用webkit来进行html渲染,用v8作为js引擎。 虽说Chrome和Webkit都是开源的,但是Chrome始终保持和Webkit距离,Chrome在WebKit上封装了一层称为WebKit Glue。Glue层中,大部分类型的结构和接口都和WebKit类似,Chrome中依托WebKit组件,都只是调用Webkit
2015-04-05 17:40:28
3695
原创 前端能力模型-负载均衡各种方式
负载均衡有以下几种方式:一、基于客户端方式: 每个客户程序都具有一定的服务器集群的知识,进而把以负载均衡的方式将请求发到不同的服务器。这种方式比较原始,现在一些老系统还在使用这种方式,客户端简单的使用轮询实现负载均衡。这种方式的可靠性,可维护性都很低,加重客户端开发的难度。 结构图如下:二、基于DNS(DNS服务器)
2015-03-28 18:12:07
2849
转载 websocket-php
下面先用一个图例来演示clinet和server之间建立websocket连接时握手部分,这个部分在nodejs中可以十分轻松的完成,因为node提供的net模块已经对socket套接字做了封装处理,开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而php没有,从socket的连接、建立、绑定、监听等,这些都需要自己去操作,如下1和2实际上就是一个HTTP
2015-03-18 09:33:18
1350
原创 SHA1算法
密码加密简介:密码存储的主要形式: 明文存储:肉眼就可以识别,没有任何安全性。 加密存储:通过一定的变换形式,使得密码原文不易被识破。密码加密的几类方式: 明文转码加密:BASE64, 7BIT等,这种方式只是个障眼法,不是真正的加密。 对称算法加密:DES,RSA等。 签名算法加密:也可以理解为单向哈希加密,比如MD5,SHA1
2015-03-15 11:48:22
4303
2
转载 OSI7层模型与TCP/IP协议栈4层
osi(Open System Interconnection Reference Model)osi7层模型,分别是第7层 应用层(Application Layer)提供为应用软件而设的界面,以设置与另一应用软件之间的通信。例如:HTTP,HTTPS,FTP,TELNET,SSH,SMTP,POP3等。第6层 表示层(Presentation Layer
2015-03-14 20:54:17
4948
转载 前端能力模型-CSRF漏洞
一、CSRF概念: CSRF(Cross-Site Request Forgery):中文名称:跨站请求伪造,也被称为:one click attack/ session riding,缩写为CSRF/XSRF。XSS是实现CSRF的诸多途径中的一条,但绝对不是唯一的一条。一般习惯上把通过XSS来实现的CSRF称为XSRF。CSRF是伪造请求,,冒充用户在站点正
2015-03-11 22:02:11
1167
转载 前端能力模型-数据结构-栈
一、栈的基本定义1、栈是一种特殊的线性表,只能从固定的方向进出,而且栈进出的基本原则是:先进栈的元素后出栈。2、栈顶栈底的定义:栈顶:允许操作的一端。栈底:不允许操作的一端。二、栈的基本实现方式1、使用顺序存储的方式实现栈在这种方式下,我们采用顺序表的复用方法来实现栈的数据存储。2、使用链式存储来实现栈
2015-03-07 21:44:54
996
转载 https协议文件加密
SSL(https)中的对称加密与非对称加密在网站通过SSL来与用户建立安全的通信中,对称加密算法和非对称加密算法起到了很大作用。密码学最早追溯到古希腊,那时加密方法:替换字母。早期密码学1、scytale工具加密:把羊皮纸卷在圆木上,写下信息,羊皮纸展开后,这些信息就加密。2、Caesar's cipher位移字母加密方法,如:AES加密后为XBP
2015-03-01 16:45:45
1067
原创 http协议文件压缩
一、HTTP协议头:服务端根据客户端发送的请求头中某些字段自动发送最合适的版本。可以用于这个机制的请求头字段分为两种:Accept字段、其他字段。请求头字段说明响应头字段Accept-Encoding告知服务器采用何种压缩方式Content-Encoding比如客户端发送的请求头:Accep
2015-02-28 14:47:38
3069
原创 requireJS源码分析
RequireJS是一款遵循AMD规范协议的JavaScript模拟加载器。业界常见模块加载器(labjs、requirejs、seajs)LABjs的核心是LAB(Loading and Blocking):核心价值是性能优化
2015-02-01 20:16:14
6484
原创 Zepto源码分析之二~三个API
由于时间关系:本次只对这三个API($.camelCase、$.contains、$.each)方法进行分析第一个方法变量转驼峰:$.camelCase('hello-world-welcome');源码:var camelize;/** * 字符串替换 * 使用replace第二个参数带回调 */camelize = function(str) {
2014-11-02 17:49:10
1722
原创 Zepto源码分析一~核心方法
今天抽空复习了一下Zepto的源码,按照自己的理解进行注释。欢迎大家拍砖。源码版本:v1.1.4源码下载地址:http://zeptojs.com/分析整体代码之后,整理出架构图:本次只针对获取核心方法$()进行拨离,并用demo测试api。var Zepto = (function() { // 变量初始化 var $;
2014-10-12 21:47:29
3117
原创 seajs构建web应用
随着开发项目不断膨胀,发现代码依赖关系变得复杂,维护比较蛋疼,想起seajs有这方面之功效,果断尝鲜,用来解决两个问题:1)命名冲突 2)文件依赖关系由于所在BG使用TAF服务,基于C++开发一套WSP web服务框架。下面所讲的都是基于该框架下测试验证。分成三个阶段:开发->改进->构建第一阶段:开发模板目录结构:--wsp --
2014-09-29 21:40:36
2032
原创 Grunt实现自动化单元测试
直奔主题:一、安装grunt-contrib-qunitnpm install grunt-contrib-qunit --save-dev (前提先安装nodejs和npm)自动下载grunt-lib-phantomjs库,安装phantomJSphantomjs实现了一个无界面的webkit浏览器。虽然没有界面,但dom渲染、js运行、网络访问、canvas/s
2014-09-27 11:38:09
3497
原创 grunt模块化配置
一、简介 构建工具的作用: 在项目部署上线前,通常要将源文件压缩,合并,并拷贝到bch或trunk中。 在将js模块化后,又多了一个分析,提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具,称之为构建工具。 任务流程: task:clean
2014-08-29 09:32:55
3807
翻译 JavaScript使用正则表达式
2.0 简介正则表达式是可以用来查找与给定模式匹配的文本的搜索模式。例如,在上一章中,我们在一个较长的字符串中查找子字符串Cookbook:var testValue = "This is the Cookbook's test string";var subsValue = "Cookbook";var iValue = testValue.indexOf(subsVal
2014-05-11 18:49:55
1452
转载 构建高性能web站点
一般而言,人们评估一个web站点的性能如何,通常先置身于用户的角度,来访问该站点的一系列页面,体验等待时间。 当用户输入页面地址后,浏览器获得了用户希望访问该地址的意图,便向站点服务器发起一系列的请求。注意,这些请求不仅包括对页面的请求,还包括对页面中许许多多组件的请求,比如图片、层叠样式表(CSS)、脚本(JavaScript)、内嵌页面(iframe)等。接下来的一段时间,浏览器等
2014-05-09 22:12:46
1279
转载 javascript闭包详解
概念:闭包是指在JavaScript中,内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回了之后,这意味着当前作用域总是能够访问外部作用域中的变量。因为函数是javascript中唯一拥有自身作用域的结构,因此闭包的创建依赖于函数。接下来我们开始进行分析,上代码:function init() { var name = "Hello
2014-05-03 11:04:43
753
翻译 nodejs详解
目录javascript与node.js javascript与你 由于javascript真正意义上有两种,甚至可以说是三种形态(从最早的作为DHTML进行增强的小工具,到像jQuery那样严格意义上的前端技术,再到现在的服务端技术),因此,比较难找到一个”正确“的方式来学习JavaScript,使得让你书写Node.js应用的时候感觉自己是在真正开发它而不仅仅是使用它。
2014-05-01 13:04:40
2205
1
翻译 web页面布局
随着Web上不同布局技术的数量激增,似乎每个CSS都用自己的技术创建多列的布局,而且新的CSS开发人员常常使用一种技术却不真正了解它的工作原理。这种进行css布局的“黑盒”方式可能给会迅速地得到想要的结果,但是最终会阻碍开发人员理解这种语言。 所有css布局技术都依赖于三个基本概念:定位、浮动和空白边操纵。不同的技术其实没有本质的差异,而且如果理解了核心概念,那么创建自己的布局是相当容
2014-04-12 13:17:46
2317
转载 CSS选择器的权重详解
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .classCSS优先级权重计算法CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!根据这四个级别出现的次数计算得到CSS的优先级。CSS优先级的
2014-04-12 12:50:38
2954
转载 浏览器渲染原理
浏览器渲染工作流程如图:第一步、浏览器会解析三个东西(左边三个浅绿色底区块):1、HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。2、CSS,解析CSS会产生规则树。3、JavaScript,脚本,主要是通过DOM API和CSS DOM API来操作DOM Tree和CSS R
2014-04-04 12:34:31
1208
翻译 浏览器兼容性问题与解决方案
一、不同浏览器的标签默认的外边界和内填充不同问题表现:不加样式控制下,margin和padding差异较大出现概率:100%解决方案:css里 *{margin:0; padding:0;}备注:这是最常见也是最易解决的一个兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0二、块属性标签float后,又有横向的margin情况下,在IE6显
2014-04-02 13:46:51
1447
转载 JavaScript原型面向对象构造
1 封装先使用构造函数声明一个类,在构造函数中给this添加本地属性,并实例化一个对象,这种方式可以为对象声明一个公共的本地属性:function Animal(name) { this.name = name; this.sleep = function() { alert(this.name + ' sleep'); };}
2014-03-30 12:30:56
721
转载 基于原型的JavaScript面向对象
1、前言从JavaScript开始流行到今天,学习它的人都会有个疑惑——JavaScript是不是面向对象语言?其实,ECMA-262早就给出了答案,在ECMAScript的第一个版本中就明确指出,ECMAScript是一种面向对象的语言,从JavaScript开始流行到今天,学习它的人都会有个疑惑——JavaScript是不是面向对象语言?其实,ECMA-262早就给出了答案,在ECMASc
2014-03-30 12:28:10
1277
翻译 jquery事件绑定详解
jquery事件绑定有三类,分别如下:.bind()、live()、delegate() 三者之间没有的区别不是很明显,但是理解它们的具体使用场景,有助于我们写出简洁的代码,并防止我们的交互程序出现没有预料的bug。事件绑定首先先看来dom树结构下面提供一个示例图:事件冒泡(也称作事件传递)(Event bubbling aka event propagat
2014-03-22 19:46:42
1151
转载 javascript继承机制
javascript继承可以通过call、apply、prototype实现。一、call:在子类中,用父类.call(this, arg0, arg1, arg2..)可以继承父类。注意call的位置,尽量在子类的第一行(js按顺序执行,放在后面可能对子类的其它属性、方法有影响。比如子类和父类有相同名字的方法,后面的覆盖前面的)。马上代码: ca
2014-03-21 13:57:50
874
翻译 addEventListener详解
addEventListener是一个侦听事件并处理相应的函数。原型: public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false)
2014-03-06 11:40:06
4124
翻译 IE6实现无抖动固定定位
概述: IE6不支持固定定位(position:fixed)是众所周知的事情,所以我们要想在IE6做出固定定位的效果就只能用JS,但是用js会出现“跳动”的效果,所以有没有不用JS而且不跳动的办法呢?这是怎么做到的呢?今天说说CSS中的行为expression。什么是行为-expression: 就是CSS属性后面可以是一段JS表达式,CSS属性的值等于JS表达式计算的
2014-03-02 17:03:52
1174
转载 iframe高度自适应
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此。 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便。于是自动调整iframe高度就成为本文的重点。 采用javascript来控制iframe元素的高度是i
2014-03-02 15:43:25
1283
转载 ajax交互原理
ajax:异步javascript和xml,是指一种创建交互式网页应用的网页开发技术,ajax技术的核心操作是用xmlHttpRequest(简称XHR)对象进行异步数据处理,所谓异步,即通过ajax,javascript无需等待服务器的响应,而是在等待服务器响应时执行其它脚本,当响应就绪后对响应进行处理作用:在ajax中主要利用javascript的XHR对象来传递用户界面上的数据到服务端并
2014-02-19 18:32:39
5532
JS匿名函数、闭包
2012-02-16
JavaScript继承
2011-12-13
脚本化浏览器窗口
2011-12-07
富有表现力的JavaScript
2011-12-04
脚本化Java
2011-11-16
使用正则表达式的模式匹配
2011-11-14
模块和名字空间
2011-11-08
javascript函数
2011-10-27
对象和数组
2011-10-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人