- 博客(57)
- 收藏
- 关注
RSS订阅
原创 基于GruntJS的前端性能优化
本文主要如何使用GruntJS来作简单的前端性能优化的自动化处理，主要有图片的压缩，JS和CSS的合并、压缩，对所有静态文件的文件根据其内容加上hash，然后把CSS、HTML等文件中对所有的静态文件名替换成加上hash的新文件名。
2014-08-14 18:35:43
2854
原创 响应式设计介绍
2013年，智能机上网时间已经超过PC机了，并且这种趋势是不可逆的，设计移动设备将成为Web开发人员的首要任务。针对移动用户，一种方案是开发Native App，如分别给IOS和Anroid开发应用，但是这种方案成本非常高，更新比较困难；另外一种是建立一个专门的移动网站，通常是m.*.com，例如m.qian.com，这种方式需要维护2套代码，成本也比较高；还有一种方案就是响应式设计，好处是一套代码打天下，维护相对来说方便多了，成本较低，开发速度较快，适合大部分的情况。
2014-01-16 15:11:49
4123
转载 CSS架构
对于想踏入前端开发的工程师来说，通晓CSS（Cascading Style Sheets）则是最基本的要求。而擅长CSS的Web开发人员不仅可以从视觉上复制实物原型，还可以用代码进行完美的呈现。无需使用表格、尽可能少的使用图片。如果你是个名副其实的高手，你可以快速把最新和最伟大的技术应用到你的项目中，比如媒体查询、过渡、滤镜、转换等。虽然这些都是一个真正的CSS高手所具备的，但CSS很少被人单独拿
2013-07-31 19:03:38
4627
原创 前端知识体系及修炼攻略
前端简介Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是Table布局，后来发展到所谓的Div + CSS网站重构，再到现在的让人眼花缭乱的各
2013-03-15 10:29:12
48481
11
原创 Web前端开发人员实用Chrome插件收集
越来越多的前端开发人员喜欢在Chrome里开发调试代码，Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。尤其Chrome本身是可以登录的，登录后你所有的插件都会自动同步到每一个登录后的Chrome的，非常方便啊。Postman - REST ClientPostman是Ajax开发的神器，对于Restful开发方式特别有帮助，可以用来模拟各种请求来测试API的正确性，比
2013-01-23 10:58:27
28102
14
转载 jQuery中attr和prop方法的区别
p>相比attr，prop是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。prop应运而生了。之前看网上对比两者的文章，更是列出一个表来区分什么标签下使用prop，什
2014-08-13 17:15:13
1746
原创 移动Web开发实践
移动设备的快速发展给用户带来了很大的便利。用户使用Android、iPhone和其它移动设备很容易接入互联网。移动设备对网页的性能要求比较高，下面就说说Mobile Web开发的一些心得。
2014-08-12 14:24:35
2378
转载 为什么每个前端开发者都要理解页面的渲染？
今天我要将关注点放到页面渲染以及其重要性上。虽然已经有很多文章提到过这个主题了，但大部分信息都是零碎的片段。为了思考这件事情，我需要研究很多信息的来源。这也就是为什么我觉得我应该写这篇文章的原因。我相信这篇文章对新手会很有用，并且对想刷新和巩固他们已经了解的东西的高手也同样适用。渲染应该从最开始当页面布局被定义时就进行优化，样式和脚本在页面渲染中扮演着非常重要的角色。专业人员知道一些技巧以避免
2014-07-04 10:49:32
2374
转载 可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。那 CSS 框架是什么呢，它通常是一些 CSS 文件的集合，这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。当然对于一些大型的项目，可能会很难照搬某些框架直接使用的，因为直接使用会带来一些限制或者冗余的问题。但在 CSS 框架已经日趋成熟的今天，在我们设计项目架构、规范的时候，现时
2014-04-16 11:21:18
1853
转载 JavaScript程序员必备的5个debug技巧
我一直使用printf调试程序，一般来说都是比较顺利，但有时候，你会发现需要更好的方法。下面几个JavaScript技巧相信你一定会觉得十分有用：1. debugger;我以前也说过，你可以在JavaScript代码中加入一句debugger;来手工造成一个断点效果。需要带有条件的断点吗？你只需要用if语句包围它：if (somethingHappens) {d
2014-03-04 10:00:26
2772
原创 jQuery Animation实现CSS3动画
CSS3好多效果因为它的值不是数值的，所以是没有办法直接通过jQuery animate()方法实现动画的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。
2013-08-13 22:34:43
7131
翻译 HTML语义和前端架构
语义学是研究符号和意义之间的关系以及它们表示的内容。在语言学中，则主要是研究符号（例如单词，短语或者语音）在语言中所表达的意义。而在前端开发时，语义学则更多的关注HTML元素，属性以及它的值所表达的含义。而这些规范的语义可以帮助开发人员更好的理解网站上的信息。但是即使是以非常正式的形式来规范这些语义，程序员仍然会去修改这些语义。
2013-07-31 19:12:40
2815
原创 Web页面Repaint和Reflow
1. Repaintrepaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生，如改变visibility、outline、前景色。当repaint发生时，浏览器会验证DOM树上的所有其它结点的visibility属性。2. Reflow如果变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程
2013-03-14 10:41:02
3082
原创 CSS性能优化探讨
大部分前端开发人员都不关心CSS性能优化，其实对于一个复杂的页面来说，高效的选择器还是可以带来一定的性能提升的。1. CSS 选择器浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的，因此最右边的选择符就是关键选择符。Descendant selector#toc > li {font-weight: bold}浏览器首先会查找页面上所有的“
2013-03-14 10:34:07
4929
2
转载 CSS选择器笔记
原文网址：http://www.ruanyifeng.com/blog/2009/03/css_selectors.html作者： 阮一峰一、基本选择器序号选择器含义1.* 通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infoclass选择器，匹配所有class属性中包含in
2013-03-05 09:13:44
1983
原创 深入理解JavaScript运算符
++运算符可以进行加法运算或字符串连接。如果你想要的是加法运算，请确保两个表达式的值都是数字。typeof好多人认为typeof是一个函数，其实它是一个操作符，调用方法是typeof hello, 当然函数式的调用方法也可以： typeof(hello)，这里还是推荐操作符式的调用方式。typeof运算符用来判断变量的类型，它的返回值有"number", "string", "bo
2013-02-26 13:51:13
2079
原创 如何在HTTPS里调用HTTP资源不出现提示框
什么是HTTPS？HTTPS（全称：Hypertext Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。htt
2013-01-30 17:32:53
15100
1
原创 Web前端技术聚会收集
学习前端的一种方式就是参考各种前端聚会，活动。因为每个公司的前端开发人员数量相对较少，每个项目就更少了，很多项目甚至有只有一个前端开发人员，这就导致了前端人员之间交流学习比较困难。参加聚会的人通常都来自不同的公司，大家互相交流经验，了解业界动态，很多时候大牛们还会做一些演讲。当然还可以认识好多同行，以后行走江湖也会更方便些。1. W3CtechWEB标准化交流会 是由“WEB标准化联盟”（
2013-01-22 13:31:42
5941
2
原创 Notepad++使用教程
Notepad++是Windows平台上一款强大的文本编辑器，主要特点就是轻轻，可定制性强，再加上无数功能强大的插件，完全可以胜任绝大部分工作。作为程序员来说是必备工具。功能对比Windows的记事本强大很多，但比Vim，Emacs还是有很大不如，当然EditPlus，UltraEdit也是非常好的选择，可惜这两个是收费软件。不在此文中介绍。安装配置可以手动去notepad++插件的官
2013-01-16 17:18:53
52819
3
原创 Notepad++前端开发常用插件介绍
Notepad++除了自身的功能强大之外，更是有许多非常的优秀的插件，下面就总结一下前端开发过程一些比较常用的插件。Zen CodingZen Coding一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件，是前端开发神器。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML
2013-01-16 17:14:00
41398
1
原创 Notepad++配合FingerText打造快速高效的前端开发文本编辑器
Finger Text是Notepad++的一个标签代码替换和文本自动完成插件。Notepad++配合标签替换功能可以极大的提升编码速度，提高工作效率。也许有人使用过QuickText插件，它们的功能类似，在早期尤其是Xp版本上是非常好用的，不过已经停止更新了，在Win7版本上没有办法使用，在XP上还是可以接着用的，不过已经被Notepad++从官方的插件列表里移除了。安装Finger T
2013-01-16 17:11:52
12416
2
转载 首选 inline-block
描述作为 CSS2 visual formatting model 规范的成员之一，display: inline-block 其实并不是什么新鲜玩意儿，至少比 border-radius 神马的资历要老得多，但是悲剧的是其使用频率 并不十分广泛。我想说，在很多场景中，inline-block 是神器。其实严谨地说，从语义的角度出发，inline-block 在很多时候是必需的 displ
2013-01-09 16:24:19
1243
原创 Web前端开发流程自动化
如今前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程上浪费的时间精力也越来越多。精简流程、提高效率，是每一个前端团队都会遇到的问题。因此我们需要在前端开发过程中引入流程管理工具来提升我们的开发效率。前端的开发过程中主要有以下流程： 编写代码->单元测试->检查语法->整合代码->生成文档->压缩代码->部署测试环境->测试->发布。流程管理工具 - AntAnt
2013-01-07 16:11:43
5448
原创 JavaScript编码解码详细介绍
1. escape()escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码+/-*_.@。其他所有的字符都会被转义序列替换。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空
2012-12-24 14:24:56
1311
原创 JQuery CDN大全
使用CDN的好处很明显，就是速度快，比如Google提供的CDN，在全球有无数节点，比我们自己的服务器一般要快很多，另外用这些CDN我们就不用在保存一份文件了，还可以永远使用最新的版本。这里列举了几家稳定的，速度快的CDN供大家选择。1. Google CDNhttp://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.jsG
2012-12-24 14:22:24
1579
1
翻译 10种常见的HTML标签错误写法
<!--.demo-img {display:block; margin:0 auto; border:10px solid #EAEAEC}-->随着CSS的持续发展，XHTML和HTML5的流行，HTML也越来越受重视，尤其是标签的语义化。HMTL标签看似简单，但仍然有很多错误的用法，下面列举了一些常见的HTML标签错误用法：错误1： 将块元素放在内联元
2012-12-17 13:47:20
4893
原创 如何判断HTML标签是否合理
在XHTML中要求HTML标签具有语义性，就是要用有意义的标签，比如段落用P标签，标题用H标签等，通常犯的最多的一个错误就是大量使用 div span标签，这时候的标签通常从语义上讲是没有任何意义的，可以用更合适的标签来替换。判断HTML标签使用是否合理的最好方式就是把所有的CSS文件全部去掉，看看HTML页面的可读性还高不高，可读性越高说明你的标签用的就越合理。比如h1标签即使没有CSS样式表也
2012-11-30 13:48:52
2313
原创 浏览器HTTP分析调试工具收集
本文对常用的web/http分析调试工具进行分析比较。1. Firebug NetFirebug是Firefox的一个插件，是Web开发必备工具之一，它自带了一个网络调试工具，它可以捕获所有的HTTP(S)请求，查看请求/应答内容，查看Cookie等，可以用来查看每个请求的响应状态，响应时间，非常方便，使用方式见下图：2. HttpFoxHttpFox是一个Firefox的插件
2012-11-30 13:44:04
1701
原创 基于JavaScript纯前端的国际化解决方案
前言本文讨论了基于纯前端的国际化多语言的解决方案，不依赖于任何后台技术。即只用HTML + JavaScript来实现国际化的方案。该方案参考了FCKEditor的实现机制，其实很多富文本编辑器都采用了类似的思路。实现方式1. 将各国语言翻译好之后放在一个js文件里以JSON格式保存，或者每个语言一个js文件也可以，比如zh-CN.js，en-US.js等。2. 将所有需要翻译的文
2012-11-06 14:02:19
3359
原创 一种通用的iframe跨域通信方法
同源策略简介如果两个页面的协议、端口（如果指明了的话）和主机名都相同则两个页面拥有相同的源。同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。这个策略可以追溯到 Netscape Navigator 2.0。但很多时候两个不同域的页面之间需要进行通信，这就产生了跨域通信的问题了，关于跨域的文章非常多，可以参考10种方式实现跨域资源的共享，下面和大家分享一下我们项目中是
2012-11-06 13:57:50
3244
1
原创 JavaScript单元测试之Qunit
QUnit框架介绍QUnit是jQuery团队开发的JavaScript单元测试工具，目前所有的JQuery代码都使用QUnit进行测试，并且JQuery开发团队将他们的使用QUnit写的测试代码都发布出来了，光凭这一点就足以QUnit的强大，足以胜任大部分JavaScript单元测试。QUnit的优点：使用起来非常方便，有漂亮的外观和完整的测试功能（包括异步测试），这是见过最漂亮
2012-11-01 16:58:24
3024
原创 JavaScript单元测试框架介绍
什么是单元测试在计算机编程中，单元测试（又称为模块测试）是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。每个理想的测试案例独立于其它案例；为测试时隔离模块，经常使用stubs、mock 或fake等测试
2012-11-01 16:56:23
2159
原创 CSS BFC和IE Haslayout介绍
BFC(Block Formatting Context)1. BFC的定义是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在
2012-10-30 12:27:11
5921
1
原创 JavaScript模块化开发探讨
我们以前是怎么开发JavaScript代码的在过去由于应用复杂度不高，JavaScript之于web页面一直处于一种辅助程序的地位，甚至谈不上是一门应用开发语言。而且多数网站都是一次性应用，规模较小，相对于可维护性，开发速度更重要。大部分时候是没有专业前端开发人员的，都是做后台的人查查手册就开始干活了。很多时候所有的JavaScript代码放在同一个文件中，所有代码耦合在一起，无法复用。所
2012-10-30 12:23:42
1762
1
原创 JavaScript构造函数原理
构造函数的原理JavaScript语言是一门面向对象的语言，但是JavaScript中并没有类的概念的。于是JavaScript采用构造函数的方式来模拟类的效果，即我们通过函数来创建对象。这也证明了函数在JavaScript中具有非常重要的地位。举个例子： var Book = function(name, price) { this.name =
2012-10-26 14:49:29
2404
原创 jQuery新的事件绑定机制on()
今天浏览jQuery的deprecated列表，发现live()和die()在里面了，赶紧看了一下，发现从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。
2012-10-26 14:22:04
12284
1
原创 图片的预载入(Preload)与延迟载入(Lazyload)
图片相对于HTML，CSS，JavaScript来说都是比较大的，因此图片经常会影响到网页的加载速度，影响用户体验。如果图片过多，则浏览器则需要花大量的时间才能把所有的图片载入完毕，而对于图片信息非常重要的页面，用户不得不等待图片完全载入了才能浏览页面。因此就有人想出了预载入图片技术来提高响应速度以及延迟载入技术来解决图片过多问题。预载入图片(Preload)预载入图片主要是为了响应速度问
2012-10-26 14:19:26
2526
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人