- 博客(60)
- 收藏
- 关注
RSS订阅原创 html5 manifest 离线缓存
干什么用的？ 离线缓存为的是第一次请求后，根据manifest文件进行本地缓存，并且在下一次请求后进行展示（若有缓存的话，无需再次进行请求而是直接调用缓存），最根本的感觉是它使得WEB从online可以延伸到了offline领域。应用场景h5游戏及一些页面内容不经常会变动，相对较为固定的内容。怎么用的？若想使用manifest功能，需要在需要进行缓存功能的html文件之中写入
2017-04-08 11:14:49
4007
1
转载 Promise ES6
Promise 基础知识，Promise 应用场景，Promsie 模块中如何使用 —— 由遇见波同学分享Promise：高手必备Promise的重要性我认为我没有必要多讲，概括起来说就是必须得掌握，而且还要掌握透彻。这篇文章的开头，主要跟大家分析一下，为什么会有Promise出现。在实际的使用当中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最重要
2017-04-07 20:02:15
307
原创 JS：指定FPS帧频，requestAnimationFrame播放动画
Flash制作动画，最基础的概念就是帧，但在Flash中，帧频的控制比较简单，只需要编译前指定一下目标帧频就可以了。实际运行时，不需要我们关心定时器的问题，flash player会定时触发EnterFrame消息，推动Movieclip播放。在js这一侧，需要我们设定一个定时器，并推动相应的绘制逻辑执行。 最简单：var FPS = 60;setInt
2017-03-10 20:41:23
1129
转载 CSS动画的性能优化
CSS动画的性能优化在Web页面中使用动画效果已经不是什么稀奇的事情了。但凡优秀的UI界面都会有一些点缀用的动画效果。举个例子，Stripe Checkout小组通过UI动画效果来增强支付体验。图片来自@michaelvillar的Improve the payment experience with animations可见通过UI动画来优化用户体验是
2017-03-10 20:38:56
860
转载 高性能 CSS3 动画
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种
2017-03-10 20:34:03
350
转载 CSS3实现60帧的动画
在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话。虽然现在每个人都会使用CSS3实现动画，但许多人用的都不够恰当。很多应加以考虑的最佳实践常在移动端上实现动画很简单。在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话。虽然现在每个人都会使用 CSS3 实现动画，但许多人用的都不够恰当。很多应加以考虑的最佳实践常常被忽略，因为仍然有人不明白这
2017-03-10 20:27:50
1620
原创 css动画性能优化
引言随着网页功能变得愈发复杂和精细，以及手机端H5发展中所遇到的硬件性能瓶颈，网页的运行时性能问题变得越来越突出。而用户对于网页运行时性能最直观的感受，莫过于UI操作的流畅程度。流畅或卡顿，爽或不爽，皆在于每个UI动画细节之间。本文旨在帮助理解动画卡顿与流畅的原因，卡顿问题的调试方法，以及从实践中总结出实现流畅动画的规律。为构建操作流畅的网页提供参考。索引量化动画的流畅
2017-03-10 20:24:53
2730
原创 Flex 布局语法教程
由于老是记不住单词，哎，或者是老了网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得
2017-03-06 22:53:15
207
原创 vuex快速上手
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。以上是vuex的官方文档对vuex的介绍，官方文档对vuex的用
2017-03-05 09:31:55
1553
2
原创 JS高级程序
11.DOM拓展11.1选择符API：SelectorsAPI的核心两个方法，：querySelector（）和querySlelctorAll（），在兼容的浏览器中，可以通过Domcument及Element类型的实例可以调用他们。11.1.1 querySelector（）方法：querySelector（）方法接收一个css选择符，返回与该匹配的第一个元素，如
2017-03-04 22:54:08
531
转载 Vue服务端渲染业务入门实践
背景最近， 产品同学一如往常笑嘻嘻的递来需求文档， 纵使内心万般拒绝， 身体倒是很诚实。 接过需求，好在需求不复杂， 简单构思 后决定用Vue， 得心应手。 切好图， 挽起袖子准备撸代码的时候， SEO同学不知何时已经站到了背后。"听说你要用Vue?""恩...""SEO考虑了吗?整个SPA出来，网页的SEO咋办?""奥..."
2017-03-04 11:11:32
5098
1
原创 优化CSS重排重绘与浏览器性能
浏览器的渲染机制浏览器渲染展示网页的过程，大致分为以下几个步骤：解析HTML(HTML Parser)构建DOM树(DOM Tree)渲染树构建(Render Tree)绘制渲染树(Painting)慎重选择高消耗的样式什么 CSS 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。box-shadowsbord
2017-02-23 21:48:22
780
翻译 回流与重绘
关于回流(reflows)与重绘(repaints)，我已经在twitter和delicious上发布，但是并没有在演讲中提到或是以文章形式发布。第一次让我开始思考关于回流(reflows)与重绘(repaints)的问题是在和ParisWeb上的Mr. Glazman做一个firey交换的时候。我可能有一些顽固，但是我确实听了他的一些理论。Stoyan和我开始讨论如何量化这个问题。
2017-02-23 21:44:43
532
原创 1px像素的实现
.border{ position: relative; } .border::after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top:1px solid rgba(7,17,27,0.1); conten
2017-02-03 13:04:40
1079
原创 sublime插件集合 – sublime推荐必备插件
Package Control功能：安装包管理简介：sublime插件控制台，提供添加、删除、禁用、查找插件等功能使用：https://sublime.wbond.net/installation安装方法：CTRL+` ，出现控制台粘贴以下代码至控制台sublime2：1import urllib2,os; pf='P
2016-12-23 21:15:08
380
原创 HTML5的 input:file上传类型控制
一、input:file属性属性值有以下几个比较常用：accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。1、accept只能选择png和gif图片 id="fileId1" type="file" accept="
2016-12-20 14:59:15
289
原创 AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mas
2016-12-15 09:38:02
279
原创 URL转码escape() encodeURI() encodeURIComponent()
escape() 方法：采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。unescape方法与此相反。不会被此方法编码的字符： @ * / + encodeURI() 方法：把URI字符串采用UTF
2016-12-13 15:13:32
234
原创 参数类型
声明值的类型，类型不符合则保错，语法类似javavar isBoolean:boolean = true; //布尔console.log(isBoolean)var isString:string = "jiaChao"; //字符串console.log(isString)var isNumber:number = 123; //数字console.log(isNumber
2016-12-12 19:46:34
254
原创 字符串新特效
一、多行字符串采用反单引号的写法 ` ---在ESC键下方var myName = `i-am-jiaChao` ;等同于 var myName = 'i\n-am-\njiaChao' ; 加 \n 换行符二、字符串引入变量（字符串模板）采用在反单引号中,使用${}表达式中可以添加变量（表达式）var myVal = "jiaCh
2016-12-12 19:42:35
297
原创 ionic2初始化项目
mac正常流程：1、安装Node.js。（最新版本4.1一定是集成了npm 这个包管理工具的）2、终端上执行命令，$sudo npm install -g cordova 安装cordova3、终端上执行命令，$sudo npm install -g ionic 安装ionic当然你可以两行命令合在一起，$sudo npm install -g corvoda io
2016-12-10 11:28:57
1272
转载 经验分享
目录介绍10个JavaScript的开发技巧性能优化-预加载与懒加载gulp，bower环境搭建someet首页无线滚动实战聊聊someet架构项目自动部署分享几个自己工作生活中总结的观念 分享几个js技巧我们在使用js的时候一些常用方法我们以为已经掌握它了，但是有些细节，我们可能没注意到！ 我们习惯使用
2016-12-07 16:00:47
840
原创 2.9 AMD 规范
AMD 规范AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。AMD 定义了一套 JavaScript 模块依赖异步加载标准，来解决同步加载的问题。模块通过 define 函数定义在闭包中，格式如下：define(id?: String, dependencies?: String[], fact
2016-12-05 17:49:02
168
原创 2.8 CommonJS 规范
CommonJS 规范CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。这个项目最开始是由 Mozilla 的工程师 Kevin Dangoor 在2009年1月创建的，当时的名字是 ServerJS。我在这里描述的并不是一个技术问题，而是一件重大的事情，让大家走到一起来做决定，迈出第一步，来建立一个更大更酷的东
2016-12-05 17:48:30
175
原创 2.7 故障处理
故障处理Webpack 的配置比较复杂，很容出现错误，下面是一些通常的故障处理手段。一般情况下，webpack 如果出问题，会打印一些简单的错误信息，比如模块没有找到。我们还可以通过参数--display-error-details 来打印错误详情。$ webpack --display-error-detailsHash: a40fbc6d852c51fceadbVersion
2016-12-05 17:47:46
346
原创 2.6 开发环境
开发环境当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。$ webpack --progress --colors如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。$ webpack --progress --color
2016-12-05 17:47:17
143
原创 2.5 插件
插件插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。修改 webpack.config.js
2016-12-05 17:36:56
362
原创 2.4 配置文件
配置文件Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。继续我们的案例，在根目录创建 package.json 来添加 webpack 需要的依赖：{
2016-12-05 17:36:04
251
原创 2.3Loader
LoaderWebpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。先来看看 loader 有哪
2016-12-05 17:35:32
179
原创 2.2使用
安装首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。用 npm 安装 Webpack：$ npm install webpack -g此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。通常我们会将 We
2016-12-05 17:34:15
160
原创 2.1安装
安装首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。用 npm 安装 Webpack：$ npm install webpack -g此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。通常我们会将 Webpack 安装到项
2016-12-05 17:33:28
186
转载 使用 Chrome Timeline 来优化页面性能
有时候，我们就是会不由自主地写出一些低效的代码，严重影响页面运行的效率。或者我们接手的项目中，前人写出来的代码千奇百怪，比如为了一个 Canvas 特效需要同时绘制 600 个三角形，又比如 Coding.net 的任务中心需要同时 watch 上万个变量的变化等等。那么，如果我们遇到了一个比较低效的页面，应该如何去优化它呢？优化前的准备：知己知彼在一切开始之前，我们先打开 F12 面板，
2016-12-02 15:37:09
368
转载 AngularJS 2.0入门指南
AngularJS 2.0学习 Angular 2当越来越多的 web app 使用 Angular 1构建的时候，更快更强大的 Angular 2 将会很快成为新的标准。Angular的新约定使得它更容易去学习、更快的去开发 app。通过本教程学习更快速。更强大的 Angular 版本。Angular 一个跨移动和桌面的框架快速开始本指南指
2016-11-29 17:54:17
3692
原创 web workers（应用缓冲）
HTML5 是目前正在讨论的新一代 HTML 标准，它代表了现在 Web 领域的最新发展方向。在 HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发的支持。在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能：离线资源缓存：需要一种方式来指
2016-11-17 23:00:25
261
原创 深入 HTML5 Web Worker 应用实践：多线程编程
W3C 在 HTML5 的规范中提出了工作线程（Web Worker）的概念，工作线程允许开发人员编写能够长时间运行而不被用户所中断的后台程序， 去执行事务或者逻辑，并同时保证页面对用户的及时响应。本文深入 HTML5 多线程规范，讲述多线程实现原理、方法，同时以实例的形式讲解 HTML5 中多线程编程以及应用。HTML5 中工作线程（Web Worker）简介
2016-11-17 22:58:05
2551
转载 如何处理CSS3属性前缀
Grunt中配置Autoprefixer假设你的环境中已具备了Grunt的运行环境，如果没有请先移步Grunt官网了解，这里不做过多阐述。在Github中有一个grunt-autoprefixer的插件，按照其官方提示，我在命令行中执行了下面的语句：npm install grunt-autoprefixer --save-dev命令终端提示：似乎没有
2016-11-13 19:54:17
1083
原创 ionic配置
谣传最近IT领域异常火热，而IT中的移动端领域更是如日中天。 做为一名程序猿的我，也不甘Out；于是雄心勃勃参加一个教育平台移动端项目开发；之前有人做了第一版，现在我们需要重构。【基本情况】 1、本次开发用到相关东西： 技术选型——Hybrid_APP； 框架——Angulajs；
2016-11-11 16:44:52
695
转载 webpack实战
webpack实战阅读目录一：什么是webpack? 他有什么优点？二：如何安装和配置三：理解webpack加载器四：理解less-loader加载器的使用五：理解babel-loader加载器的含义六：了解下webpack的几个命令七：webpack对多个模块依赖进行打包八：如何独立打包成样式文件九：如何打包成多个资源文件十：关于对图片的打包十一：React开发神器：react-
2016-11-10 15:57:55
243
原创 JavaScript常用API总结
目录元素查找class操作节点操作属性操作内容操作css操作位置大小事件DOM加载完毕绑定上下文去除空格AjaxJSON处理节点遍历元素查找// Nodedocument.getElementById(id)
2016-11-08 17:48:57
680
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人