2016年04月_Hello 程序猿

12月 11月 10月 09月 08月 07月 06月 05月 04月

转载世界顶级Web性能专家带你优化出高性能网站

摘要：造成Web性能缓慢的原因多种多样，在用户端的主要表现就是访问延迟，这里的延迟指的是从用户通过浏览器、APP点击发起请求到得到反馈所经历的时间，由于Web页面承载的功能越来越多，为了页面效果而使用的多媒体元素也越来越丰富，这些都会造成页面访问的延迟。作者： Brian Jackson宽带的普及，让网速变得越来越快的同时也让网页越来越复杂，用户的耐心越来越少，网页打开时间稍

2016-04-26 03:26:08 1326

转载 JS跨域调用之document.domain--相同基础域名页面之间的调用

最近项目需要跨域调用JS，整理一下相关知识，写几个帖子记录一下学习历程。例子只需要1个tomcat即可，这里我的tomcat端口都改成80了。背景：浏览器在执行Javascript时，出于对安全性的考虑，禁止两个或者多个不同域的页面进行互相操作。相同域的页面在相互操作的时候不会有任何问题。如下例子：文件放置于%TOMCAT_HOME%/webapps/domai

2016-04-26 02:15:18 2478

转载我所知道的几种display:table-cell的应用

总结：1、display：table-cell可以让不固定大小的元素垂直居中2、table-cell可以做两栏自适应布局，且table-cell中的元素给定width也是自适应3、table-cell的等高属性4、table-cell做一行多列布局5、table-cell既有块级元素特性又有td元素特性一、display:table-cell属性简述

2016-04-20 16:39:15 1548

转载 CSS3实现32种基本图形

CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三

2016-04-19 13:10:12 10897 1

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希

2016-04-19 12:22:51 534

原创 call、aplly、caller、callee分别是什么？

call和aplly的区别：概念：call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的，换句话说，就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。二者的作用完全一样，只是接受参数的方式不太一样。例如：有一个函数

2016-04-19 01:06:22 1212

原创比较正宗的验证邮箱的正则表达式js代码详解

这个比较简单的，应付个面试基本足够：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ 拿代码去测试一下吧： function isEmail(str){ var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; return reg.tes

2016-04-18 12:02:44 5643

原创介绍一个性能飞快的移动端滑屏组件iSlider.js

islider功能介绍：/** * iSlider 高性能全屏滑动组件 * @class iSlider * @param {object} opts * @param {string} opts.wrap='.wrap' 容器 * @param {string} opts.item='.item' 滚动单元的元素 * @param {string} opts.pla

2016-04-17 23:27:04 8890

转载 HTML5 实现橡皮擦的擦除效果

最近项目刚好用到这种效果，也就是有点像刮刮卡一样，在移动设备上，把某张图片刮掉显示出另一张图片。效果图如下：扫描下方二维码查看DEMO演示这种在网上还是挺常见的，本来就想直接网上找个demo套用下他的方法就行了，套用了才发现，在android上卡住了，因为客户要求，在android不要求特别流畅，至少要能玩，但是网上找的那个demo实在太卡，根本就是没法玩的情况。于是就想自

2016-04-17 19:39:49 505

转载 HTML5 Canvas图片马赛克模糊动画

经常可以在网上或者电视上看到被马赛克模糊的图片或者视频，今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果。在演示中我们可以拖动滑竿来设置马赛克模糊的程度，你可以在不同的值下观察图片被马赛克后的效果。HTML5的确非常强大。HTML代码如下定义了一个滑竿和3张待模糊的图片。JavaScript

2016-04-17 19:24:19 1798

转载 H5动效的常见制作手法

众所周知，一个元素，动往往比静更吸引眼球；一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效

2016-04-16 19:43:11 2179

转载 Three.js打造H5里的“3D全景漫游”秘籍

近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。 QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手Q实时观看到世界各地最佳观测点的日食，流星等天体现象。承载整个“星球计划”活动的运营页面，经多方讨论，我们决

2016-04-16 19:29:40 32632 2

转载打造H5动感影集的爱恨情仇(动画性能篇)

“你听说过动感影集么?”动感影集是QQ空间新功能，可以将静态的图片轻松转变为动态的视频集，且载体是HTML5（简称H5）页面，意味着可以随时分享到空间或朋友圈给好友欣赏！移动端区别于PC年代的相册视频，由于设备性能限制，每一个动画细节都需要认真优化，今天就来说说动感影集开发过程中的动画性能检测与优化的问题。1.先利其器 – Chrome Timeline&Renderi

2016-04-16 19:15:15 1213

转载经验分享：多屏复杂动画CSS技巧三则

当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动：感谢shirley帮忙录制上面的视频，虽然视频内容是手机上的显示效果，但是，这个“企业新年祝福活动”原本只针对桌面端，移动端是后来辅助增强（增加了相当于活动页面UV 5.7%的点击）。而目前

2016-04-16 15:42:42 637

转载 CSS Sprite、CSS雪碧图应用实例

CSS Sprites技术被国内一些人称为CSS雪碧图，其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。CSS 雪碧图技术不是什么新东西，在网

2016-04-15 23:20:58 2734

转载浏览器~加载，解析，渲染

昨天为了了解浏览器是怎么处理（.html、.css、.js）这些文件，我看了网上的好多资料，这好多资料中，有很多是通过转载、或是转载后加之自己的理解，但是因为自己对专业的词汇理解不好，还有一些作者将不同浏览器的处理过程混着说，总之，看完了，还是有很多疑虑的地方。我先根据昨天了解到的内容总结一下，日后随着学的深了，再回过来补充。why为什么要了解浏览器加载、解析、渲染这个过程？

2016-04-15 16:38:54 541

转载移动HTML5前端性能优化指南

移动H5前端性能优化指南[托尼托尼研究所]概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点，首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点6. 基于第

2016-04-15 04:49:31 557

转载移动端web开发技巧

META相关1. 添加到主屏后的标题（IOS） name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） name="apple-mobile-web-app-capable" content

2016-04-15 04:34:09 1550

转载 CSS弹性盒子Flexbox布局详解

2016-04-15 04:17:13 739

原创总结几个关于web浏览器缓存资料，非常经典

[1] 浏览器缓存机制http://www.cnblogs.com/skynet/archive/2012/11/28/2792503.html[2] Web 开发人员需知的 Web 缓存知识http://www.oschina.net/news/41397/web-cache-knowledge[3] 浏览器缓存详解:expires,cache-control

2016-04-15 03:37:49 602

转载让我们再聊聊浏览器资源加载优化

几乎每一个前端程序员都知道应该把script标签放在页面底部。关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and Execution中，他之所以建议这么做是因为：Put all tags at the bottom of the page, just inside of the closing

2016-04-15 02:46:00 1803

转载浏览器详谈及其内部工作机制 —— web开发必读

浏览器介绍如今，浏览器格局基本上是五分天下，分别是：IE、Firefox、Safari、Chrome、Opera，而浏览器引擎就更加集中了，主要是四大巨头：IE的浏览器排版引擎Trident，目前随IE10发布了Trident6.0；Mozilla的排版引擎Gecko，今年4月2号发布了Gecko21预览版，稳定版本为Gecko20；Google Chrome和Apple Safari使用

2016-04-14 19:52:05 797

原创 innerHTML、innerText和outerHTML、outerText的区别

1、区别描述如下： innerHTML 设置或获取位于对象起始和结束标签内的 HTMLouterHTML 设置或获取对象及其内容的 HTML 形式innerText 设置或获取位于对象起始和结束标签内的文本outerText 设置(包括标签)或获取(不包括标签)对象的文本innerText和outerText在获取时是相同效果，但在设置时，innerText仅设

2016-04-14 17:54:48 625

转载 js中top、clientTop、scrollTop、offsetTop的区别文字详细说明版

网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWid

2016-04-14 17:00:02 441

转载 Javascript闭包（Closure）

作者：阮一峰原文链接：http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html日期： 2009年8月30日闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很

2016-04-14 03:19:08 439

原创 JavaScript 移动和触摸框架

jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。

2016-04-14 03:13:18 7014 1

转载实例分析JavaScript中的事件委托和事件绑定

我们在学习JavaScript中，难免都会去网上查一些资料。也许偶尔就会遇到“事件委托”（也有的称我“事件代理”，这里不评论谁是谁非。以下全部称为“事件委托”），尤其是在查JavaScript的事件处理的时候。但是，大多数时说的是“事件绑定”，对于“事件委托”，或是不提，或是浅尝辄止。对于我这个比较好奇的人来说，实在很蛋疼。尤其是想更多的了解“事件委托”的时候。　　这次干脆一劳永逸，自己把

2016-04-14 03:05:37 2117

转载 JavaScript浅析闭包和内存泄露的问题

JavaScript使用一种称为垃圾收集的技术来管理分配给它的内存。这与C这样的底层语言不同，C要求使用多少借多少，用完再释放回去。其他语言，比如 Objective-C，实现了一个引用计数系统来辅助完成这些工作，我们能够了解到有多少个程序块使用了一个特定的内存段，因而可以在不需要时清除这些内存段。JavaScript是一种高级语言，它一般是通过后台来维护这种计数系统。当J

2016-04-14 01:24:29 567

转载大部分人都会做错的经典JS闭包面试题

由工作中演变而来的面试题这是一个我工作当中的遇到的一个问题，似乎很有趣，就当做了一道题去面试，发现几乎没人能全部答对并说出原因，遂拿出来聊一聊吧。先看题目代码：function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); }

2016-04-14 00:51:44 2774 2

原创 ES6 JavaScript Promise的初识

如果要实现一个并发的异步操作，执行A、B、C三件事情，但是又要按照顺序来执行，先A再B再C的顺序。以前做法：$.ajax({ url: "A.html", context: document.body, success: function(){ //这里是A事情，先执行 $.ajax({ url: "B.html", context: document.body, s

2016-04-12 23:35:17 657

转载 JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember

2016-04-12 13:55:45 663

原创 jQuery知识体系梳理

1. 环境搭建下载jQuery文件库在jQuery的官方网站（http://jquery.com）中。引入jQuery文件库 2. jQuery 基础选择器2-1 #id 选择器 2-2 element 选择器2-3 .class 选择器2-4 * 选择器2-5 sele1,sele2,se

2016-04-12 02:59:19 1093

原创 grunt基础思路+运行于中型项目实战

grunt基础思路+运行于中型项目实战

2016-04-11 02:50:16 852

原创 js模块化之require.js

js模块化之require.js没有模块化，之前如何写js的？<script src='a.js'></script><script src='b.js'></script><script src='c.js'></script>如上图所示，这样加载会出现两个问题： 1、必须按顺序加载，从a到c，而且是同步加载，也就是a没有加载完毕，b和c就不能执行，以及其他文件都不能执行。 2、c如果调用

2016-04-10 01:28:11 561

Python机器学习及实践-从零开始通往Kaggle竞赛之路

本书面向所有对机器学习与数据挖掘的实践及竞赛感兴趣的读者，从零开始，以Python编程语言为基础，在不涉及大量数学模型与复杂编程知识的前提下，逐步带领读者熟悉并且掌握当下最流行的机器学习、数据挖掘与自然语言处理工具，如Scikitlearn、NLTK、Pandas、gensim、XGBoost、Google Tensorflow等。全书共分4章。第1章简介篇，介绍机器学习概念与Python编程

2017-09-13

终极算法:机器学习和人工智能如何重塑世界

比尔·盖茨年度荐书！《终ji算法》近20年人工智能领域具轰动性的著作！揭秘机器学习的终ji逻辑，全景勾勒人工智能的商业未来。《乔布斯传》作者沃尔特·艾萨克森、图灵奖得主朱迪亚·珀尔、中国大数据领航人车品觉、今日头条首席算法架构师曹欢欢倾力推荐！　　Google X、微软研究院密切关注！　　如果你先想了解人工智能，那么推荐佩德罗·多明戈斯所著的《终ji算法》，非常值得一读。——比尔·盖茨