随笔分类 - WEB前端
摘要：1.背景介绍在网络相册应用中用户查看照片是最朴素的需求，当网络比较慢的时候查看照片等待的时间是比较长的，用户体验会很差。2.现状现在加载照片的方法主要有一下两种：（1）最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程，并且不能开始给用户看到照片大概的情况，用户体验比较不好（2）在html页面先用img标签加载显示照片的缩略图，同时用javascript隐藏的加载照片的原图，等照片大图加载完成后再将原图显示到页面中。以下是流程图：3.我们的解决方案QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看
阅读全文
摘要：转自：http://www.blogjava.net/BearRui/archive/2010/04/08/web_performance_js_where.html外部JS的阻塞下载所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才...
阅读全文
摘要：Closure Compiler vs YUICompressor View more presentations from lifesinger
阅读全文
摘要：由于项目需求，简单地写了一个input默认值设置<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>input默认值设置</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script typ
阅读全文
摘要：来源：http://www.jb51.net/article/15671_2.htm很多人首先会想从服务器缓存方面着手对程序进行优化,许多不同的服务器缓存方式都有他们自己的特点,像我曾经参与的一些项目中,根据缓存的命中率不同使用过 Com+/EnterpriseLibiary Caching/Windows服务,静态文件等方式的服务器端缓存和 HTTPCompression技术,但客户端缓存往往却被人们忽略了,即使服务器的缓存让你的页面访问起来非常地快,但她依然需要依赖浏览器下载并输出,而当你加入客户端缓存时,会给你带来非常多的好处.因为她可以对站点中访问最频繁的页进行缓存充分地提高 Web服
阅读全文
摘要：我们知道,对于WEB页面中的JS和CCS,并不会每次都请求完整的内容,有时候会直接利用本地的缓存;而对页面本身,却往往会去加载完整内容,对于服务器来说可能每次也要生成完整的内容,并送到客户端;同样的,对于一些http接口,每次调用也会去重新生成数据,浏览器也会重新加载完整的数据;但有这样一些页面,虽然是动态的但变动频率较小,且对于同一用户重复调用可能很多(比如说个人管理后台或者新闻首页面),我们希望像js或者ccs那样在客户端缓存起来.并且,在我们希望的时候,可以更新客户端备份的那个页面,或者接口数据.是否可以做到呢;事实上,浏览器可以缓存js,就一定能缓存我们的动态页面;先研究下js是如何缓
阅读全文
摘要：jqPlot是一个灰常强大的图表工具，曲线，柱状，饼图，应该有尽有，更要命的是，调用方便~~官网：http://www.jqplot.com/这里贡献上中文教程，基本上所有的api都很齐全，供有需要的童鞋们瞧瞧，更重要的是作为自己滴收藏~~哦耶耶~jqPlot整的来说有三个地方需要配置。格式如：$.jqplot(‘target’, data, options);target：要显示的位置。data：显示的数据。options：其它配置seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", &q
阅读全文
摘要：用jquery封装了一个控制图片左右滚动的插件：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>slide</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><style>* { pa
阅读全文
摘要：抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~效果图：代码：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
阅读全文
摘要：jQuery是一个快捷简便的JavaScript框架，说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。 jQuery是一个快捷简便的JavaScript框架，说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。 在当今的各个浏览器中都支持事件的冒泡，所谓的冒泡可以这样理解：条件：外层有一个DIV元素，在内层有一个P元素，他两存在这样的关系:DIV是P元素的父元素，而P是外层DIV的子元素，他们之间存在包含和被包含的关系。事件：现在我们都在这两个元素上绑定相同的事件，比如click事件。结果：这时，当我们点击内层的P标签
阅读全文
摘要：有默认值，有一个灰色文字样式（提示用户的信息）；获得焦点后，清空默认值让用户输入文字，这时失去焦点后，给一个样式名来改变文字颜色，这种情况下再次获得焦点时不清空用户已输入的值。如果用户没有输入任何值，返回默认值，灰色文本样式<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19
阅读全文
摘要：表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。HTML代码如下：<div class="type-file-box"><form action="" method="post" name="form1" id="form1"><input na
阅读全文
摘要：type='sumbit'时默认enter键提交表单但如果用的是ajax提交时，type="button"，enter键提交不了，所以只好用js去捕捉onkeydown事件~document.onkeydown = function(e){ e = e || window.event; if(e.keyCode === 13){ //这里放你的代码 }};
阅读全文
摘要：问题：<div id="top" style="height:100px;background-color:#CCC;"></div><div id="parent" style="background-color:#F9F; overflow:hidden;"><div id="child" style="margin-top:10px; background-color:#99F;">想实现效果： Chile 与 paren
阅读全文
摘要：$(function () { /* function one_Position() { var p = $("#one_curTime"); $(window).scrollTop(p.offset().top - 150); $("#one_curTime").css("background", "red") }; function three_Position() { var p = $("#three_curTime"); $(window).scrollTop(p.offset().t
阅读全文
摘要：WEB前端，指的是：交互-设计-制作三个角色的组合。 项目管理，指的是如何把需求分解成任务，分派给合适的人并正确的完成任务。需要把握的是以下四个方面。1、需求分析 需求分析的目的是评审需求的可行性和优先级，这里就需要足够的项目经验了。 可行性： 关于需求本身是否合理，是否是一个值得去做的需求。 需求的完整性，是否是一个完整的，可以进入研发规划的需求。 其实还有一个需求的充足性，将零零散散的小运营需求合并为一个大的需求，便于开发，让任务列表清晰简洁，维护风险降低。 再次是需要后台开发的，进行沟通，是否下一个研发线能评审通过和按时跟进。 优先级，优先级的参考依据是重要性和紧急性。画
阅读全文
摘要：De Dream', Windy(http://www.DeDream.com)，2007年7月摘译自Box&Arrows团队和Amy Hillman的Pioneering a User Experience (UX) Process名词：用户体验，User Experience/UX也许你刚刚来到一家公司，他们希望进行一些“可用性”工作。你可能是一名UI设计师，业务分析师，或前端开发人员，一名产品经理，或者负责用户体验部门的经理或副总。你知道，如果更好地了解使用产品/软件/网站的人，就可能开发出更好的产品/软件/网站。不管怎么样，不管你是谁，也不管你在哪里，用户体验这件事，现在就归你管了。那
阅读全文
摘要：作者 Abel Avram 译者 池建强 发布于 2010年11月22日 下午11时45分Shane Morris是前微软UX的布道者，现任独立的UX架构师，在2010年澳大利亚TechEd大会上，他做了一个主题为“Pimp My App”的演讲，描述了在创建UX之前应该知道的5件事，构建好的布局的4个步骤和6个如何让产品更好看的建议。Morris认为UX开发应该遵循以下步...
阅读全文
摘要：YUI Compressor是Yahoo!开发的一个专门用于压缩JavaScript和CSS文件的小工具，操作系统中需要jdk环境的支持。所有要使用这个小工具，得先安装jdk，然后配置JAVA_HOME的环境变量。 jdk的下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html jdk的JA...
阅读全文
摘要：为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改.以下为[WEB前端开发规范文档]正文点此查看WEB版本规范目的为提高团队协作效率,便于后...
阅读全文