cynwang的博客

原创 浏览器缓存机制

浏览器缓存机制浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的节点中加入标签，代码如下：html code上述代码的作用是告诉浏览器当前页面不被缓存，每次访问

原创 Promise简单实现

Promise看了些promise的介绍，还是感觉不够深入，这个在解决异步问题上是一个很好的解决方案，所以详细看一下，顺便按照自己的思路实现一个简单的Promise。Promise/A+规范：首先重新阅读了下A+的规范:promise代表了一个异步操作的最终结果，主要是通过then方法来注册成功以及失败的情况，Promise/A+历史上说是实现了Promise/A的

原创 Promise.js with AJAX

使用 Promise.timeout(f1(), 2000).then(f2, function () { alert("timeout"); }).wait(5000).then(f3); function f1() { var promise = Promise();

原创 两列自适应布局的3种思路

两列自适应布局的3种思路前面的话　　前面已经介绍过单列定宽单列自适应的两列布局，而两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。 思路一: float　　在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。但由于m

原创 两列布局中单列定宽单列自适应布局的5种思路

前面的话　　说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float　　说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。如果各浮动元素的高

原创 JS中bind方法与函数柯里化

原生bind方法不同于jQuery中的bind方法只是简单的绑定事件函数，原生js中bind()方法略复杂，该方法上在ES5中被引入，大概就是IE9＋等现代浏览器都支持了（有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table），权威指南上提到在ES3中利用apply模拟该方法的实现（JS权威指南中函数那章）， 但无法真实还原该方法， 这也是

原创 排序算法总结

概述排序有内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。我们这里说说八大排序就是内部排序。      当n较大，则应采用时间复杂度为O(nlog2n)的排序方法：快速排序、堆排序或归并排序序。   快速排序：是目前基于比较的内部排序中被认为是最好的方法，当待排序的关键字是随

原创 ES5对Array增强的9个API

为了更方便的对Array进行操作，ES5规范在Array的原型上新增了9个方法，分别是forEach、filter、map、reduce、reduceRight、some、every、indexOf 和 lastIndexOf，本文将对这几个方法进行详细的讲解，并对每一个方法进行原型扩展，以兼容不支持ES5的浏览器。forEach(callback[,thisArg])在ES5

原创 JS核心系列：浅谈原型对象和原型链

在Javascript中，万物皆对象，但对象也有区别，大致可以分为两类，即：普通对象（Object）和函数对象（Function）。一般而言，通过new Function产生的对象是函数对象，其他对象都是普通对象。举例说明：function f1(){ //todo}var f2 = function(){ //todo};var f3 = ne

原创 JS核心系列：浅谈函数的作用域

一、作用域（scope）所谓作用域就是：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。 1 function scope(){ 2 var foo = "global"; 3 if(window.getComputedStyle){ 4 var a = "I'm if"; 5 console.log(

原创 JS核心系列：理解 new 的运行机制

和其他高级语言一样 javascript 中也有 new 运算符，我们知道 new 运算符是用来实例化一个类，从而在内存中分配一个实例对象。 但在 javascript 中，万物皆对象，为什么还要通过 new 来产生对象？ 本文将带你一起来探索 javascript 中 new 的奥秘...一、认识new运算符： 1 function Animal(name){ 2

原创 HTTP/2 与 WEB 性能优化（一）

HTTP/2 与 WEB 性能优化（一） SPDY 协议，也就是 HTTP/2 的前身。Google 宣布将在 16 年初放弃对 SPDY 的支持，随后 Google 自家支持 SPDY 协议的服务都切到了 HTTP/2。2015， 5 月 14 日，HTTP/2 以 RFC 7540 正式发布。目前，浏览器方面，Chrome 40+ 和 Firefox 36+ 都正式支持了 HT

原创 HTTP/2 与 WEB 性能优化（二）

HTTP/2 与 WEB 性能优化（二）在「HTTP/2 与 WEB 性能优化（一）」这篇博客中，我主要写了 HTTP/2 中的 Server Push 给 WEB 性能优化带来的便利，今天继续来聊一聊 HTTP/2 其他方面的改变。我们知道，HTTP/2 并没有改动 HTTP/1 的语义部分，例如请求方法、响应状态码、URI 以及头部字段等核心概念依旧存在。HTTP/2 最大

原创 Javascript 严格模式详解

一、概述除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的，主要有以下几个：　　- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;　　- 消除代码运行的一些不安全之处，保证代码运行的安全；

原创 JavaScript之模块化编程

前言模块是任何大型应用程序架构中不可缺少的一部分，模块可以使我们清晰地分离和组织项目中的代码单元。在项目开发中，通过移除依赖，松耦合可以使应用程序的可维护性更强。与其他传统编程语言不同，在当前JavaScript里，并没有提供原生的、有组织性的引入模块方式。本文就来探讨一下目前的常见几种模块化解决方案。1.对象字面量表示法对象字面量可以认为是包含一组键值对的对象，每一对键和值由冒号分隔

原创 CSS 中类 (classes) 和 ID 的区别

1.CSS 中类 (classes) 和 ID 的区别。在样式表定义一个样式的时候，可以定义id也可以定义class。在CSS文件里书写时，ID加前缀“#”；CLASS用“.”id一个页面只可以使用一次；class可以多次引用。ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；

原创 Normalize vs Reset

综述Normalize.css是一种CSS reset的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。我们创造normalize.css有下面这几个目的：保护有用的浏览器默认样式而不是完全去掉它们一般化的样式：为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性：用一

原创 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

Web Storage有两种形式：　　LocalStorage（本地存储）和sessionStorage（会话存储）。　　这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。　　　（1）与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存

原创 减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

1. 尽量减少页面中重复的HTTP请求数量比较直接的理解就是要减少调用其他页面、文件的数量。我们在使用css格式控制的时候，经常会采用background载入很多图形文件，而每个background的图像都会产生1次HTTP请求，一般我们为了让页面生动活泼会大量使用background来加载背景图，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景

原创 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁原因有：1、使用@import方法导入CSS时，例如： @import "../fouc.css";此方式由于IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。2、将样式表

原创 你如何对网站的文件和资源进行优化？

1、文件合并（目的是减少http请求）：Web性能优化最佳实践中最重要的一条是减少HTTP 请求，它也是YSlow中比重最大的一条规 则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题

原创 HTTP状态吗详解

原创 webWorker

一、webWorker之初体验在"setTimeout那些事儿"中，说到JavaScript是单线程。也就是同一时间只能做同一事情。也好理解，作为浏览器脚本语言，如果JavaScript不是单线程，那么就有点棘手了。比如，与用户交互或者对DOM进行操作时，在一个线程上修改某个DOM，另外的线程删除DOM，这时浏览器该如何抉择呢?所以，JavaScript是单线程也是有背景的。如下：

原创 HTTP/2 新特性浅析

HTTP/2 源自 SPDY/2SPDY 系列协议由谷歌开发，于 2009 年公开。它的设计目标是降低 50% 的页面加载时间。当下很多著名的互联网公司都在自己的网站或 APP 中采用了 SPDY 系列协议（当前最新版本是 SPDY/3.1），因为它对性能的提升是显而易见的。主流的浏览器（谷歌、火狐、Opera）也都早已经支持 SPDY，它已经成为了工业标准，HTTP Working-Grou

原创 常见的web安全问题及防御

sql注入原理就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。总的来说有以下几点：1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。3.永远不要使用管理员权限

原创 一个经典的JavaScript面试题

题目如下：function Foo() { getName = function () { alert (1); }; return this;}Foo.getName = function () { alert (2);};Foo.prototype.getName = function () { alert (3);};var getName = functio