2016年1月28日

图片格式 WebP APNG

摘要： WebP 是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。 PNG 转 WebP 的压缩率 阅读全文

posted @ 2016-01-28 15:41 迷茫小飞侠 阅读(4113) 评论(0) 推荐(0)

移动开发 meta元素

摘要： meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 SEO优化： <meta name="keywords" content="your tags" /> 关键词 <meta 阅读全文

posted @ 2016-01-28 15:40 迷茫小飞侠 阅读(122) 评论(0) 推荐(0)

rem 单位

摘要： rem（font size of the root element）是指相对于根元素的字体大小的单位。 主流的一些web app的适配解决方案： 流式布局： 流式布局在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长， 阅读全文

posted @ 2016-01-28 15:40 迷茫小飞侠 阅读(355) 评论(0) 推荐(0)

Matrix 矩阵

摘要： CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d()，前者是元素2D平面的移动变换(transform)，后者则是3D变换。2D变换矩阵为3*3, 如上面矩阵示意图；3D变换则是4*4的矩阵。 transform 里面的：斜拉(skew)，缩放(scale)，旋转(rotat 阅读全文

posted @ 2016-01-28 15:39 迷茫小飞侠 阅读(303) 评论(0) 推荐(0)

File API简介

摘要： File API让我们可以创建文件，存储在本地文件系统的一个安全沙箱里，亦可以从其他来源读取文件，并对其进行操作 Web应用通过requestFileSystem方法来访问本地文件系统，该方法是全局的： requestFileSystem(type, size, successCallback, o 阅读全文

posted @ 2016-01-28 15:38 迷茫小飞侠 阅读(1084) 评论(0) 推荐(0)

HTML5 设备上的API

摘要： 一、Vibration API ，接受两种类型参数 vibrate (unsigned long time) 当参数是unsigned long的时候 此时参数表示震动时间。 NotSupportedError 表示当time参数超过规定时间，则抛出异常。 实例： navigator.vibrate 阅读全文

posted @ 2016-01-28 15:38 迷茫小飞侠 阅读(425) 评论(0) 推荐(0)

svg snap 笔记

摘要： 路径中的字母，大写相对于左上角绝对定位，小写相对定位 M110,95,95,110M115,100,100,115 pattern 类似于图片拼贴，可以把指定位置的图案用来填充 var pattern = elem.pattern(100, 100, 10, 10); circle.attr({ f 阅读全文

posted @ 2016-01-28 15:37 迷茫小飞侠 阅读(576) 评论(0) 推荐(0)

井号的含义

摘要： #代表网页中的一个位置。其右面的字符，就是该位置的标识符： http://www.example.com/index.html#print 代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。同样，可以作为描点 #是用来指导浏览器动作的，对服务 阅读全文

posted @ 2016-01-28 15:37 迷茫小飞侠 阅读(3723) 评论(0) 推荐(0)

工作遇到问题

摘要： CSS里背景图资源位置不对不会报错 编辑器溢出：页面长度有影响！？ 表单为100%的话，里面的数据格的宽度由数据长度来相应分配 提交多个checkbox的时候，name设为同一个，并且为数组name="ids[]"，不然提交的是单个字符串 由于slide-item有3d属性，导致android上最后 阅读全文

posted @ 2016-01-28 15:36 迷茫小飞侠 阅读(212) 评论(0) 推荐(0)

jQuery 插件格式 规范

摘要： 方式一（自定义对象）： (function($, window, document) { var Plugin, defaults, pluginName;调用时的函数名： pluginName = "slidesjs"; 默认配置： defaults= { width: 940, height: 阅读全文

posted @ 2016-01-28 15:36 迷茫小飞侠 阅读(330) 评论(0) 推荐(0)

俺的交互设计理念

摘要： 1、内容为王，交互设计的核心是为了用更好的方式呈现用户需要的内容 2、交互设计基于用户需求，用户怎么进来的，进来想干嘛，之后要干嘛？ 而不是做好之后让用户去适应 阅读全文

posted @ 2016-01-28 15:35 迷茫小飞侠 阅读(211) 评论(0) 推荐(0)

Photoshop 学习中

摘要： 快捷键： f8打开信息调板，注意虽然数字最高是255，但0也是数值之一，因此共256级。 f7开启图层调板 f6调出调色板，按D还原为默认颜色 ctrl + 放大，ctrl - 缩小 f 可以切换显示模式 窗口-工作区-复位调板位置 CTRL ALT Z 撤销 CTRL SHIFT Z重做 D CT 阅读全文

posted @ 2016-01-28 15:33 迷茫小飞侠 阅读(296) 评论(0) 推荐(0)

less

摘要： 客户端使用： <link rel="stylesheet/less" type="text/css" href="styles.less"> 在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引 阅读全文

posted @ 2016-01-28 15:33 迷茫小飞侠 阅读(135) 评论(0) 推荐(0)

代码压缩原理

摘要： 1、移除注释 2、移除额外的空格 3、细微优化 4、标识符替换 YUI Compressor 包括哪些细微优化呢？ object["property"] ，如果属性名是合法的 JavaScript 标识符（注：合法的 JavaScript 标识符——由一个字母开头，其后选择性地加上一个或者多个字母、 阅读全文

posted @ 2016-01-28 15:33 迷茫小飞侠 阅读(491) 评论(0) 推荐(0)

shapes 不规则边界

摘要： CSS基本形状都是矩形，CSS shapes允许开发者用定制的路径来包裹内容，例如圆形，椭圆，多边形等。 形状可以自定义也可以从图片中推断 从图片推断，例如可以让文字按照图片形状来浮动到一边： <img class=”element” src=”image.png” /> <p>Lorem ipsu 阅读全文

posted @ 2016-01-28 15:31 迷茫小飞侠 阅读(418) 评论(0) 推荐(0)

css 3d

摘要： Perspective 透视点，视角，CSS3D 的透视点在浏览器前方 默认值为none，是作用于子元素，指定观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。 三维元素在观察者后面的部分不会绘制出来，即z轴坐标 阅读全文

posted @ 2016-01-28 15:30 迷茫小飞侠 阅读(164) 评论(0) 推荐(0)

strict 严格模式

摘要： 严格模式可以让你更早的发现错误，因为那些容易让程序出错的地方会被找出来 打开严格模式："use strict" 不支持的javascript引擎会忽略它，当作是一个未赋值字符串。如果在一个脚本使用全局使用严格模式，那么在同一个页面的其他脚本也会严格。也可以在某个函数里声明使用严格模式。 在平时，没有 阅读全文

posted @ 2016-01-28 15:29 迷茫小飞侠 阅读(223) 评论(0) 推荐(0)

浏览器允许的并发请求资源数 优化

摘要： 首先，是基于端口数量和线程切换开销的考虑，浏览器不可能无限量的并发请求，因此衍生出来了并发限制和HTTP/1.1的Keep alive。 所以，IE6/7在HTTP/1.1下的并发才2，但HTTP/1.0却是4。 而随着技术的发展，负载均衡和各类NoSQL的大量应用，基本已经足以应对C10K的问题。 阅读全文

posted @ 2016-01-28 15:29 迷茫小飞侠 阅读(454) 评论(0) 推荐(0)

AMD 和 CMD 的区别

摘要： AMD 规范在这里：https://github.com/amdjs/amdjs-api/wiki/AMD CMD 规范在这里：https://github.com/seajs/seajs/issues/242 AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD 是 Sea 阅读全文

posted @ 2016-01-28 15:28 迷茫小飞侠 阅读(150) 评论(0) 推荐(0)

Canvas

摘要： 这个标签可以制定页面上的某个区域为画板，可以使用javascript来生成图片 绘制基本图形的用2d context就可以了，3d的也称为webGL，3d浏览器实现比较慢，而且某些系统由于没有所需要的驱动，即使安装了最新的浏览器也现实不了 至少需要指定width和height： <canvas id 阅读全文

posted @ 2016-01-28 15:28 迷茫小飞侠 阅读(205) 评论(0) 推荐(0)

ie 如何判断正在执行的脚本

摘要： 1、在非ie浏览器里，script上的onload事件会准确地在脚本执行完以后触发 2、在ie浏览器里，如果脚本是在缓存里的话，那么onload事件是在你把script标签插入Dom结束时马上执行的 3、如果脚本不在缓存里的话，当调用define的时候，遍历script标签，当前正在执行的脚本会有： 阅读全文

posted @ 2016-01-28 15:27 迷茫小飞侠 阅读(304) 评论(0) 推荐(0)

visual filters 滤镜 ie

摘要： 滤镜ie9开始就废弃了，用来对ie4-8实现一些多媒体动画之类的效果。可以添加到标准的HTML控件上，例如text，图片 包含：1、界面滤镜 （Procedural Surfaces）2、静态滤镜 （Static Filters）3、过渡滤镜 （Transitions）4、滤镜属性 （Attribu 阅读全文

posted @ 2016-01-28 15:27 迷茫小飞侠 阅读(250) 评论(0) 推荐(0)

富文本编辑器

摘要： 方式一就是通过嵌入一个frame里面包含一个空白html，通过designMode 设置这个空白的HTML为可编辑，然后你就可以修改它body的内容了，但只有当前页面加载完成以后，才能设那个frame的designMode 为on <iframe name=”richedit” style=”hei 阅读全文

posted @ 2016-01-28 15:26 迷茫小飞侠 阅读(410) 评论(0) 推荐(0)

async

摘要： HTML5新增，通过给外部脚本添加async告诉浏览器，如果支持的话，异步执行该代码。无法让inline 脚本异步执行 另一种方式（这样动态创建的默认为async）： var script = document.createElement('script'); script.src = "file. 阅读全文

posted @ 2016-01-28 15:26 迷茫小飞侠 阅读(196) 评论(0) 推荐(0)

检测CSS属性 是否支持

摘要： 原理是：创建一个节点，判断其的style属性是否含有textOverflow属性，有则进一步判断是否支持ellipsis这个值。当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给textOverflow赋值“ellipsis”，如果不支持，则其值肯定为空或者其它不等于“ellips 阅读全文

posted @ 2016-01-28 15:25 迷茫小飞侠 阅读(461) 评论(0) 推荐(0)

scroll 区域滚动

摘要： 网页内都有快速滚动和回弹的效果： overflow: scroll; -webkit-overflow-scrolling: touch; 实际上，Safari用了原生控件来实现，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给 阅读全文

posted @ 2016-01-28 15:24 迷茫小飞侠 阅读(180) 评论(0) 推荐(0)

Clipboard 剪辑板

摘要： ie是最早支持剪辑板相关事件（并且允许javascript接入）的浏览器（鼠标右键复制） 相关事件： beforecopy— Fires just before the copy operation takes place. copy— Fires when the copy operation t 阅读全文

posted @ 2016-01-28 15:24 迷茫小飞侠 阅读(299) 评论(0) 推荐(0)

void 0

摘要： zepto源码中出现，this === void 0，下面就是解释： void 关键词会执行后面的表达式然会返回undefined https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void 例如： 阅读全文

posted @ 2016-01-28 15:23 迷茫小飞侠 阅读(188) 评论(0) 推荐(0)

区分window8中 ie10 window phone8

摘要： Internet Explorer 10 并没有对 屏幕的宽度 和 视口（viewport）的宽度 进行区分 @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewpor 阅读全文

posted @ 2016-01-28 15:23 迷茫小飞侠 阅读(141) 评论(0) 推荐(0)

touch pointer

摘要： 在早期的浏览器，输入的事件其实相对单纯，只有考虑到鼠标和键盘两种；而当时的鼠标事件，其实就是 click、mousedown、mouseup 等等的事件。但是当手机、平板开始流行时候，再移动装置上的主要操作界面，已经从鼠标变成是触控了～ 由于触控和鼠标的操作逻辑，算是有根本上的差异的，再加上大部分的 阅读全文

posted @ 2016-01-28 15:22 迷茫小飞侠 阅读(295) 评论(0) 推荐(0)

全局作用域 eval

摘要： eval是在caller的作用域里运行传给它的代码： var x = 'outer'; (function() { var x = 'inner'; eval('x'); // "inner" })(); 在 ES5，可以分为direct调用或者indirect调用，和是否在strict模式调用 ( 阅读全文

posted @ 2016-01-28 15:21 迷茫小飞侠 阅读(175) 评论(0) 推荐(0)

Web worker

摘要： Web worker允许异步运行大量复杂耗时长的代码，这样就不会弹出long running警告。允许你在Web页面中并行地运行JavaScript程序而不阻塞用户接口，实现了对多线程编程的支持（众所周知，JavaScript是单线程的，即便是setTimeout和setInterval等实现了对多 阅读全文

posted @ 2016-01-28 15:20 迷茫小飞侠 阅读(255) 评论(0) 推荐(0)

filereader api 类型

摘要： filereader类似XMLHttpRequest，只是它用来从文件系统读取文件，提供了不同的方法去读取文件数据：1、readAsText2、readAsDataURL3、readAsBinaryString4、readAsArrayBuffer 读取的过程是异步的，有一些事件可以监听，progr 阅读全文

posted @ 2016-01-28 15:19 迷茫小飞侠 阅读(261) 评论(0) 推荐(0)

URLs对象 blob URL

摘要： 把指向数据的URL保存到file或者blob对象里，好处就是不需要先文件读取内容然后才能用。 function createObjectURL(blob){if (window.URL){return window.URL.createObjectURL(blob);} else if (windo 阅读全文

posted @ 2016-01-28 15:19 迷茫小飞侠 阅读(2700) 评论(0) 推荐(1)

SVG

摘要： SVG(Scalable Vector Graphics)，可缩放矢量图形。由于这种特性，其成为了视网膜显示器站点中比较重要的图形图像分辨率解决方案之一，如论如何缩放，图像边缘都是平滑的 当使用SVG作为图片（如：CSS list-style-image, SVG<image> 元素，SVG <fe 阅读全文

posted @ 2016-01-28 15:18 迷茫小飞侠 阅读(298) 评论(0) 推荐(0)

geolocation h5

摘要： navigator. geolocation.getCurrentPosition()触发浏览器弹窗询问用户同意访问地址。接收三个参数：成功回调函数，可选的失败回调，可选选项对象 成功回调函数接受一个地址对象作为唯一的参数，该对象有两个属性，coords和timestamp. coords一定包含l 阅读全文

posted @ 2016-01-28 15:16 迷茫小飞侠 阅读(316) 评论(0) 推荐(0)

Page visibility 页面可见性

摘要： 一直以来，判断页面是不是当前可见标签，浏览器有没有缩小都是比较麻烦的。 通过页面可见性API可以获得相关信息document.hidden 判断页面当前是不是可见的document.visibilitystate 过得页面状态，背后的标签或者前面的标签，预览图状态(类似window的小预览图)等四种 阅读全文

posted @ 2016-01-28 15:16 迷茫小飞侠 阅读(272) 评论(0) 推荐(0)

requestAnimationFrame()

摘要： 因为settimeout和setinterval是无法保证执行时间的。加上浏览器的定时器不是精确到1毫秒：Ie8及之前版本为15.625，也就是你设定的时间为0-15的话，那么最终执行可能是0毫秒或者15毫秒后执行Ie9之后和chrome为4火狐和safari为10当该页面被切换出去，非激活，对定时 阅读全文

posted @ 2016-01-28 15:15 迷茫小飞侠 阅读(458) 评论(0) 推荐(0)

CSS fliter

摘要： Filters主要是运用在图片上，以实现一些特效。（也能运用于video上），类似滤镜效果 img { -webkit-filter:grayscale(1); } grayscale灰度 下面大部分一样，默认值都为100% sepia褐色 saturate饱和度 hue-rotate色相旋转 默认 阅读全文

posted @ 2016-01-28 15:15 迷茫小飞侠 阅读(143) 评论(0) 推荐(0)

单元测试 Qunit

摘要： http://api.qunitjs.com/category/assert/ 测试方法 选中 "Check for Globals" 会暴露全局对象，看你的代码会不会无意中输出到全局对象属性去了 选中 No try-catch 的话，出现错误testrunner就会挂掉，让你看到原生的错误提示，帮 阅读全文

posted @ 2016-01-28 15:14 迷茫小飞侠 阅读(253) 评论(0) 推荐(0)

定时器的高级运用 优化

摘要： JavaScript是单线程的，因此在JavaScript的主执行线程上，有一个需要执行的代码队列，例如当一个按钮被点击，那么他的event handle就被添加到队列并在线程让出来的时候执行。所以说并没有真正意义上的马上执行，需要等到线程空闲才可以。 定时1秒后执行某些代码，只是说把这些代码添加到 阅读全文

posted @ 2016-01-28 15:13 迷茫小飞侠 阅读(510) 评论(0) 推荐(0)

定制事件 观察者模式

摘要： 事件模型是观察者模式的一种类型 原理就是：对象在它生命周期里当一个特别状态出现的时候下可以发布事件，其他对象可以观察这个对象，等待那些特别状态出现的时候再做出反应。 观察者模式由两种类型对象组成： subject ： 就是负责发布事件的 observer： 观察者就是负责观察subject ，通过订 阅读全文

posted @ 2016-01-28 15:13 迷茫小飞侠 阅读(282) 评论(0) 推荐(0)

函数柯理化

摘要： 通常创建柯理化函数的方式： function curry(fn){ var args = Array.prototype.slice.call(arguments, 1); return function(){ var innerArgs = Array.prototype.slice.call(a 阅读全文

posted @ 2016-01-28 15:12 迷茫小飞侠 阅读(773) 评论(0) 推荐(0)

tamper-proof 对象 nonextensible对象 sealed对象 frozen对象

摘要： tamper-proof 对象JavaScript的缺点之一就是每个对象都可以被相同执行上下文的代码修改，很容易导致意外覆盖，或则一不小心把native 对象覆盖。Ecmascript 5提供了 tamper-proof 对象来解决这个问题。一旦一个对象被设为 tamper-proof 对象就无法撤 阅读全文

posted @ 2016-01-28 15:12 迷茫小飞侠 阅读(265) 评论(0) 推荐(0)

跨域 Ajax 其他可选技术 异步

摘要： 使用image pings 最早的跨域方法之一就是使用这个，任何域的<img>和<script>元素都可以随便加载。 var img = new Image(); img.onload = img.onerror = function(){ alert(“Done!”); }; img.src = 阅读全文

posted @ 2016-01-28 15:10 迷茫小飞侠 阅读(254) 评论(0) 推荐(0)

progress 相关事件 异步 ajax

摘要： loadstart — Fires when the fi rst byte of the response has been received.progress — Fires repeatedly as a response is being received.error — Fires when 阅读全文

posted @ 2016-01-28 15:09 迷茫小飞侠 阅读(256) 评论(0) 推荐(0)

Ajax 跨域 异步 CORS

摘要： HTTP access control (CORS) 核心在于使用定制（添加新的header）HTTP header让浏览器和服务器有更多的相互了解，从而决定一个请求或者响应成功还是失败 对于一个简单的请求，没有定制header并且body是text/plain的话，该请求发送的时候会带上一个hea 阅读全文

posted @ 2016-01-28 15:09 迷茫小飞侠 阅读(424) 评论(0) 推荐(0)

Ajax comet XMLHttpRequest 异步

摘要： function createXHR() { if (typeof XMLHttpRequest != “undefi ned”){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != “undefined”){ ie6及以 阅读全文

posted @ 2016-01-28 15:08 迷茫小飞侠 阅读(156) 评论(0) 推荐(0)

XMLHttpRequest2 异步 ajax

摘要： XMLHttpRequest1只是对已经存在的xhr对象细节进行规范定义， XMLHttpRequest2升级了该对象。 FormData 类型可以用在xhr传输的时候，把表单序列化或者将数据以表单格式传输Var data = new FormData()data. append("name","x 阅读全文

posted @ 2016-01-28 15:08 迷茫小飞侠 阅读(272) 评论(0) 推荐(0)

函数绑定

摘要： var handler = { message: "哈哈", handleClick: function(event){ alert(this.message); } };document.body.addEventListener("click", handler.handleClick, fal 阅读全文

posted @ 2016-01-28 15:07 迷茫小飞侠 阅读(248) 评论(0) 推荐(0)

安全的 类型检测 类型判断

摘要： typeof检测的问题： 在 Safari (through version 4) 检测正则表达式会返回 function instanceof 检测的问题： 跨全局对象（frame）问题 arr1（来自一个frame） instanceof Array; 返回false 其他问题： 检测一个对象是 阅读全文

posted @ 2016-01-28 15:07 迷茫小飞侠 阅读(167) 评论(0) 推荐(0)

Object.observe（） 观察对象

摘要： 这个对象方法可以用来异步观察对javascript对象的改动： // Let's say we have a model with data var model = {}; // Which we then observe Object.observe(model, function(changes 阅读全文

posted @ 2016-01-28 15:06 迷茫小飞侠 阅读(329) 评论(0) 推荐(0)

原生promise

摘要： 你应该会用事件加回调的办法来处理这类情况： var img1 = document.querySelector('.img-1'); img1.addEventListener('load', function() { // 啊哈图片加载完成 }); img1.addEventListener('e 阅读全文

posted @ 2016-01-28 15:06 迷茫小飞侠 阅读(152) 评论(0) 推荐(0)

xml

摘要： 当创建的Dom文档放进了XML内容，那么就可以像对Dom进行交互一样使用所有的方法和属性 如果直接访问一个对象会调用它的valueof方法，如xmldom.parseError 对onreadystatechange事件的函数赋值一定要在调用load()之前，确保函数能够及时被触发调用，同时需要注意 阅读全文

posted @ 2016-01-28 15:05 迷茫小飞侠 阅读(150) 评论(0) 推荐(0)

scrolling 优化 避免卡顿

摘要： 让我们来瞧瞧在滚动时到底发生了什么。在理解这个问题之前，我们先简要的介绍下浏览器是如何向屏幕绘制内容的。这一切都是从 DOM 树(本质上就是页面中的所有元素)开始的。浏览器先检查拥有了样式的 DOM，然后找到那些它认为在滚动时不会改变的元素，然后将这些元素分组并对它们拍照(也就是层)。这些层都需要绘 阅读全文

posted @ 2016-01-28 15:04 迷茫小飞侠 阅读(218) 评论(0) 推荐(0)

grunt

摘要： grunt能够自动执行配置好的任务 命令行： 切换根目录直接： f: 切换路径 cd cw 返回上一层 cd.. 安装使用grunt： npm install -g grunt-cli 安装 注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfi 阅读全文

posted @ 2016-01-28 15:02 迷茫小飞侠 阅读(225) 评论(0) 推荐(0)

cross-document message 跨文档通信 HTML5

摘要： 跨域通信HTML5提供了XDM（cross-document message）安全简单接口： 核心是 postMessage（）方法，用来向另一个地址传送信息： var iframeWindow = document.getElementById(“myframe”).contentWindow; 阅读全文

posted @ 2016-01-28 15:01 迷茫小飞侠 阅读(437) 评论(0) 推荐(0)

原生 drag drop HTML5

摘要： drag事件（ dragstart -- drag -- dragend ） 当按下鼠标开始drag一个可以拖动的对象时，触发dragstart事件，如果元素是不可拖动的话，会出现一个不可拖动的图标，圆环里面一条斜杠 dragstart事件触发以后，当你拖动元素，就会持续触发drag事件，直到你放开 阅读全文

posted @ 2016-01-28 15:01 迷茫小飞侠 阅读(328) 评论(0) 推荐(0)

高性能 内存 事件优化

摘要： 为什么要优化： 1、每一个函数都是一个对象，会占用内容 2、需要添加事件的Dom节点越多，就要花更多的时间去给那些节点添加处理函数，延迟整个页面的交互，因为先得把事件都加上去 : ( 优化1：使用事件代理 <ul id=”myLinks”> <li id=”goSomewhere”>Go somew 阅读全文

posted @ 2016-01-28 15:00 迷茫小飞侠 阅读(201) 评论(0) 推荐(0)

高性能 AJAX

摘要： 请求数据的常用的五种方式 1、XMLHttpRequest (XHR) var url = '/data.php'; var params = [ 'id=934875', 'limit=20' ]; var req = new XMLHttpRequest(); req.onreadystatec 阅读全文

posted @ 2016-01-28 14:59 迷茫小飞侠 阅读(152) 评论(0) 推荐(0)

高性能 建议 实践

摘要： 1、避免双重判断 var num1 = 5, num2 = 6, result = eval("num1 + num2"), sum = new Function("arg1", "arg2", "return arg1 + arg2"); setTimeout("sum = num1 + num2 阅读全文

posted @ 2016-01-28 14:59 迷茫小飞侠 阅读(160) 评论(0) 推荐(0)

判断是否为整数 整数判断

摘要： 1、取余数判断，整数除以1都为0 function isInteger(obj) { return typeof obj === 'number' && obj%1 === 0 } 2、使用Math.round、Math.ceil、Math.floor判断 function isInteger(ob 阅读全文

posted @ 2016-01-28 14:57 迷茫小飞侠 阅读(524) 评论(0) 推荐(0)

获取图片原始尺寸

摘要： 前提：图片设置了别的width值 1、新建一个Image()对象，然后把图片的src赋给该对象 function getNaturalWidth(img) { var image = new Image() image.src = img.src var naturalWidth = image.w 阅读全文

posted @ 2016-01-28 14:56 迷茫小飞侠 阅读(254) 评论(0) 推荐(0)

判断图片是否加载完成

摘要： 1、load事件 img.onload = function() { alert('loaded'); } 2、readystatechange事件 img1.onreadystatechange = function() { if(img1.readyState=="complete" || im 阅读全文

posted @ 2016-01-28 14:56 迷茫小飞侠 阅读(193) 评论(0) 推荐(0)

indexed database IndexedDB

摘要： Indexed Database API 目的是提供一个可供javascript存储和检索对象，并且还能进行查询，搜索等数据库操作 设计为几乎完全异步，因此绝大部分操作都稍后执行，因此每次操作都应该提供onerror和onsuccess来处理结果 目前还没有完全支持，因此：var indexedDB 阅读全文

posted @ 2016-01-28 14:55 迷茫小飞侠 阅读(155) 评论(0) 推荐(0)

web storage 离线存储

摘要： 用来保存键值对数据，数据以属性的方式保存在storage实例对象上 可以用storage1.length来决定键值对的数量，但是无法决定数据的大小，storage1.remainingSpace可以获得剩余空间大小 只能以string的形式保存数据，非string数据会被转化为string再存储 1 阅读全文

posted @ 2016-01-28 14:54 迷茫小飞侠 阅读(260) 评论(0) 推荐(0)

font-face 在 Firefox无法正常工作问题

摘要： @font-face存在的问题： 1、不同浏览器支持不同格式 2、Firefox默认情况下不允许跨域font-face，除非你可以添加“Access-Control-Allow-Origin” header to the font. 一个暂时的解决方案： 1、去fontsquirrel.com下载需 阅读全文

posted @ 2016-01-28 14:53 迷茫小飞侠 阅读(180) 评论(0) 推荐(0)

离线缓存 manifest

摘要： 程序的离线缓存由一个叫做manifest的文本文件控制，把需要离线缓存的文件列在里面即可，这个列表还可以控制需要缓存的情况，甚至当用户从缓存地址进入到没有缓存的地址应该显示什么 当浏览器下载解析了manifest文件之后，就会换取这些资源并且保存起来无网络使用 ，格式如下： CACHE MANIFE 阅读全文

posted @ 2016-01-28 14:53 迷茫小飞侠 阅读(202) 评论(0) 推荐(0)

事件 event

摘要： 添加移除函数(removeEventListener)时三个参数保持一致，否则会失败，而且不会有错误提示 var btn = document.getElementById(“myBtn”); btn.addEventListener(“click”, function(){ alert(this. 阅读全文

posted @ 2016-01-28 14:52 迷茫小飞侠 阅读(195) 评论(0) 推荐(0)

源码学习

摘要： IE (11 and under) 会触发input事件即使placeholder的值改变了，甚至会在一些和input无关的动作时触发input事件，例如focusing 在一个表单控件，select等 IE9对input 事件实现混乱，按backspace键、delete键或者cut不会触发 ie 阅读全文

posted @ 2016-01-28 14:52 迷茫小飞侠 阅读(96) 评论(0) 推荐(0)

调试

摘要： 错误时Error（）的实例，当你明确知道错误出现之后应该怎么处理才try catch语句，catch 错误的目的是避免浏览器用默认的方式去处理错误，而throw error的目的是提供更多关于错误的信息。 function divide(num1, num2){ if (typeof num1 != 阅读全文

posted @ 2016-01-28 14:51 迷茫小飞侠 阅读(113) 评论(0) 推荐(0)

Icon font font face

摘要： font-face自定义字体，iconfont就是把各种图片做成字体。iconfont优势： 字体文件小，一般20-50kb； 容易编辑和维护，尺寸和颜色可以用css来控制； 透明完全兼容IE6； http://www.qianduan.net/zai-shuo-iconfont-he-font-f 阅读全文

posted @ 2016-01-28 14:50 迷茫小飞侠 阅读(842) 评论(0) 推荐(0)

aria-label

摘要： 元素中的 aria-label用来命名一个元素 它的值可以是任何字符 读屏软件就会读出aria-label里的内容 <div role=”form” aria-labelledby=”form-title”> <span id=” form-title”>使用手机号码注册</span> <form> 阅读全文

posted @ 2016-01-28 14:50 迷茫小飞侠 阅读(1755) 评论(0) 推荐(0)

range

摘要： range可以无视node节点范围来选择需要的部分 创建一个range的时候，类似创建了一个fragment ，但是在range里面即使像上面那样格式残缺的片段，能够自动识别缺少的结构，因此才能恢复并且进行一系列javascript Dom交互 上图中的range会把Dom结构修改成： <p><b> 阅读全文

posted @ 2016-01-28 14:48 迷茫小飞侠 阅读(344) 评论(0) 推荐(0)

节点遍历 element traversal

摘要： 任何一个node节点都可以作为遍历的根（traversal root），然后遍历该节点本身以及后代元素，不能遍历祖先或者兄弟元素，方向可以反转 <div id=”div1”> <p><b>Hello</b> world!</p> <ul> <li>List item 1</li> <li>List 阅读全文

posted @ 2016-01-28 14:47 迷茫小飞侠 阅读(724) 评论(0) 推荐(0)

position：sticky 定位 position:fixed

摘要： 它的表现类似position:relative和position:fixed的合体，当目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 .sticky { position: -web 阅读全文

posted @ 2016-01-28 14:45 迷茫小飞侠 阅读(408) 评论(0) 推荐(0)

多列布局

摘要： 目前只有ie支持http://samples.msdn.microsoft.com/iedevcenter/MultiColumn/default.html column-count 分割的列数 默认auto，可由其他属性来计算 column-width 设置每一列的宽度 默认值为auto，由其他属 阅读全文

posted @ 2016-01-28 14:45 迷茫小飞侠 阅读(191) 评论(0) 推荐(0)

通用的contain函数

摘要： 用来检测节点所属关系：document.documentElement.contains(document.body) function contains(refNode, otherNode) {if (typeof refNode.contains == “function” && (!clie 阅读全文

posted @ 2016-01-28 14:44 迷茫小飞侠 阅读(836) 评论(0) 推荐(0)

overflow:hidden

摘要： 修复塌陷问题的核心： Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, 阅读全文

posted @ 2016-01-28 14:43 迷茫小飞侠 阅读(210) 评论(0) 推荐(0)

Visual formatting model 可视化格式模型

摘要： 在可视化格式模型里，每个元素都是由一个或者多个盒子组成，这些盒子的布局由下面规则控制： box dimensions and type.（块元素和行内元素） positioning scheme (normal flow, float, and absolute positioning). rela 阅读全文

posted @ 2016-01-28 14:43 迷茫小飞侠 阅读(181) 评论(0) 推荐(0)

检测一个对象方法是否存在

摘要： function isHostMethod(object, property) { var t = typeof object[property]; return t == ’function’ || (!!(t==’object’ && object[property])) || t == ’un 阅读全文

posted @ 2016-01-28 14:42 迷茫小飞侠 阅读(161) 评论(0) 推荐(0)

非堵塞 延迟脚本 高性能

摘要： 1、延迟解析 <script type="text/javascript" src="file1.js" defer></script> defer告诉解析器该脚本不会修改Dom，可以迟点再解析执行 也可以写在网页内脚本 <script defer> alert("defer"); </script 阅读全文

posted @ 2016-01-28 14:40 迷茫小飞侠 阅读(152) 评论(0) 推荐(0)

移动开发 相关 备忘

摘要： .game { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } 使游戏容器绝对定位之后，上下左右四边都与手机屏幕贴紧 http://isux.tencent.com/html5-game-de 阅读全文

posted @ 2016-01-28 14:39 迷茫小飞侠 阅读(145) 评论(0) 推荐(0)

元素透明 渐变函数

摘要： var testObj = document.getElementById("你想要渐变的元素"); function setOpacity(value) { testObj.style.opacity = value/10; testObj.style.filter = 'alpha(opacit 阅读全文

posted @ 2016-01-28 14:02 迷茫小飞侠 阅读(182) 评论(0) 推荐(0)

cookie

摘要： 在头部设置cookie，所有cookie都会作为request header发送 HTTP/1.1 200 OK Content-type: text/html Set-Cookie: name=value; domain=.wrox.com; path=/; secure //secure表示只有 阅读全文

posted @ 2016-01-28 14:01 迷茫小飞侠 阅读(127) 评论(0) 推荐(0)

media query 单位

摘要： 使用em 判断的media query 在用户缩放的时候不会被破坏，使用em更加合适内容为王的页面趋势 内容的容器需要根据内容而按比例设置，就像line-height：1.14em，文字大小的1.14倍 100% = 1 em ~= 16px ~= 14pt ，这是默认浏览器baseline为16p 阅读全文

posted @ 2016-01-28 14:00 迷茫小飞侠 阅读(137) 评论(0) 推荐(0)

JSONP

摘要： 由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通，而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式 阅读全文

posted @ 2016-01-28 14:00 迷茫小飞侠 阅读(141) 评论(0) 推荐(0)

iPad web APP 开发相关

摘要： 1、移除 browser chrome，全屏启动 <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" 阅读全文

posted @ 2016-01-28 13:58 迷茫小飞侠 阅读(333) 评论(0) 推荐(0)

单页面 历史状态管理

摘要： 历史状态管理API可以让你改变URL而不用载入一个新的页面 history.pushState({name:”Nicholas”}, “Nicholas’ page”, “nicholas.html”); 执行了这个方法以后，新的地址会被加到历史记录状态里，而且location.href也会反映新的 阅读全文

posted @ 2016-01-28 13:57 迷茫小飞侠 阅读(274) 评论(0) 推荐(0)

关于viewports 设备像素比 密度

摘要： 首先追溯到像素，第一个麻烦事像素的总量问题，同样的大小的屏幕像素可以差很远，像素大小更小的导致内容也变小 在小屏幕上如果展示巨大的桌面网页，诺基亚的做法是首先载入完整的桌面网页，然后缩放至设备屏幕大小（通过点击操纵杆放大缩小内容，左右移动位置，这里是通过虚拟的viewPort完成） 苹果在这基础上开 阅读全文

posted @ 2016-01-28 13:55 迷茫小飞侠 阅读(383) 评论(0) 推荐(0)

脚本检测 media query 分界点

摘要： 当需要为不同屏幕大小添加不同脚本的时候，首先需要检测对应的media query 是否起效 也就是CSS（ @screen only and (min-width: 40em) {}）和javascript（ if (window.matchMedia( "screen and (min-width 阅读全文

posted @ 2016-01-28 13:53 迷茫小飞侠 阅读(294) 评论(0) 推荐(0)

chrome Web开放 字体格式不能显示问题

摘要： /** * Chrome 32/33 webfont issue fix. * Requires jQuery. * More info: http://blog.cloudfour.com/chrome-webfont-issues/ */ (function($, window){ // onl 阅读全文

posted @ 2016-01-28 13:49 迷茫小飞侠 阅读(330) 评论(0) 推荐(0)

响应式图片

摘要： 使用media query 处理响应式图片最考虑三方面 1、图片需要的渲染大小 2、屏幕的密度 3、规划好的各尺寸图片大小 当知道这三个方面后，只需要从规划好的各尺寸图片里选择比 图片渲染面积*屏幕密度 大的图片文件就可以 但在响应式布局里面图片需要的渲染大小是无法确定的（通常图片设为max-wid 阅读全文

posted @ 2016-01-28 13:48 迷茫小飞侠 阅读(152) 评论(0) 推荐(0)

ECMAScript 6 proxies

摘要： 在ECMAScript 5里面，可以通过（writable 和 configurable）内部属性把属性设置为不可修改和不可删除的，可以通过（Object.preventExtensions() ）让对象不允许被拓展新的属性，可以通过（Object.freeze（））让对象的所有属性变为只读和不可删 阅读全文

posted @ 2016-01-28 13:46 迷茫小飞侠 阅读(166) 评论(0) 推荐(0)

大小不固定 文字图片居中

摘要： 1、透明图片+背景定位 background-position: center; <img src="transparent.jpg" style="background-image:url(need.jpg);"> 2、在IE下使用 font-size 使图片垂直居中显示，firefox,chro 阅读全文

posted @ 2016-01-28 13:45 迷茫小飞侠 阅读(260) 评论(0) 推荐(0)

prototype

摘要： 在prototype上有一个叫做constructor的属性，Person.prototype.constructor指向Person，当new Person的时候，每个实例会有一个[[prototype]]指向该对象构造函数的prototype，在chrome里面就是__proto__属性可以查看 阅读全文

posted @ 2016-01-28 12:11 迷茫小飞侠 阅读(309) 评论(0) 推荐(0)

简单类型对象 String

摘要： 简单值不是对象，因此也没有属性方法，因此运行下面代码时 var s1 = “some text”; var s2 = s1.substring(2); 实际上是运行在read模式，字符串的值会被直接从内存读取，会触发如下步骤 - Create an instance of the String ty 阅读全文

posted @ 2016-01-28 09:51 迷茫小飞侠 阅读(127) 评论(0) 推荐(0)

函数对象 函数

摘要： 把函数看作一个对象，而函数名看作指针，指向该函数，因此有可能多个函数名指向同一个函数 如下 function sum(num1, num2){ return num1 + num2; } alert(sum(10,10)); //20 var anotherSum = sum; alert(anot 阅读全文

posted @ 2016-01-28 09:48 迷茫小飞侠 阅读(190) 评论(0) 推荐(0)

grid 布局

摘要： display：grid 是一种新的布局方式，旧的布局方式通常有副作用，例如float（需要额外修复浮动）或者inline-block（两个元素之间的空格问题） 把父元素定义为grid，就像表格一样，然后就可以给他的子元素定义各自占的行和列 不需要改动标签就可以通过纯css实现表格布局 目前只有ie 阅读全文

posted @ 2016-01-28 09:17 迷茫小飞侠 阅读(103) 评论(0) 推荐(0)

数组对象

摘要： 通常情况下使用 instanceof 检测是否为数组都是有效的 但是当页面内有多个frames，并且数组创建在全局上下文，那么就会有问题 因为不同frame里的全局上下文不同，构造函数并不是同一个 因此当你把一个frame里面的数组传递到别的frame用instanceof Array判断就会返回f 阅读全文

posted @ 2016-01-28 09:16 迷茫小飞侠 阅读(130) 评论(0) 推荐(0)

导航