WEB前端开发
关注
分享
扫一扫
文章平均质量分 66
kopolwu
这个作者很懒，什么都没留下…
展开
-
高性能WEB开发 - 图片篇
<br />一、缩小图片大小 <br />当图片很多的时候，减少图片大小是提高下载速度最直接的方法。<br />1. 使用PNG8代替GIF(非动画图片)，因为PNG8在效果一样的情况，图片大小比GIF要小。<br /> <br />2. 用fireworks处理PNG图片，在我们产品中很多PNG图片是美工直接用photoshop导出的，<br /> 后来让美工用fireworks处理PNG(大概的方式是选择保存为PNG8,删除背景色)。<br /> 处理后100K的图片大小基本减少了3/4，但转载 2010-12-09 14:34:00 · 307 阅读 · 0 评论 -
在Yslow 34 Rules之后 -- 网站性能优化思路和进展
http://limu.iteye.com/blog/755628WPO(Web Performance Optimization , 网站性能优化)近年来发展迅猛,期间YAHOO做出了重要贡献,YSlow的14条军规,20条最佳实践影响深远.去年Steve出版了第二本书,Velocity大会也从2008开到了2010.各个网站越来越重视速度,也有越来越多开发者投入到WPO大业当中.转载 2011-11-28 22:31:12 · 842 阅读 · 0 评论 -
iframe载入完成时的事件监听
http://hqlong.com/2009/02/620.html在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到iframe里的页面的响应很慢，这里会出现一种什么现象呢？这时将会出现所有页面已经载入完成，但在iframe元素处，将会出现空白，直到内嵌页面完成载入时，该空白处才会显示新载入的页面。可想转载 2011-12-01 14:01:18 · 1293 阅读 · 0 评论 -
一些PHP Coding Tips
http://www.laruence.com/2011/03/24/858.html1. 使用list来实现一次获取explode后的特定段值:list( , $mid) = explode(';', $string);2. 使用NULL === 来代替is_null:is_null和 NULL === 完全是一样的效果, 但是却节省了一次函数调用.3.转载 2011-11-09 18:06:56 · 318 阅读 · 0 评论 -
Javascript闭包——懂不懂由你，反正我是懂了
http://kb.cnblogs.com/page/110782/越来越觉得国内没有教书育人的氛围，为了弄懂JS的闭包，我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释，当我看到stackoverflow上这一篇解答，我脑中就出现了一句话：就是这货没跑了！ 不才译文见下，见笑了。 Peter Mortensen问：就像老Alber转载 2011-12-01 18:52:50 · 1114 阅读 · 0 评论 -
iframe异步加载技术及性能
http://kb.cnblogs.com/page/109045/我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly:iframe会阻塞主页面的onloa转载 2011-12-01 19:02:24 · 968 阅读 · 0 评论 -
javascript笔记：通过对作用域链和执行环境的深入理解所得出的提高javascript代码性能的建议
http://www.cnblogs.com/sharpxiajun/archive/2011/12/10/2283126.htmlJavascript里的作用域到底决定了什么呢？作用域决定了那些变量能被函数所访问（注意：作用域是函数的内部属性，谈到作用域是绕不开的function），作用域也确定了this指针的指向。上篇博文里我说道，程序其实就是不断检索数据的过程，那么检索数据的效率转载 2011-12-10 15:41:49 · 335 阅读 · 0 评论 -
人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、FormData)
http://fed.renren.com/archives/391早在公元2011年6月3日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床。哦，Sorry, 是拖拽上传。本文将重点介绍实现拖拽上传的几个HTML5技术：Drag&Drop、FileReader API和FormData。 关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖转载 2012-02-06 16:34:46 · 1198 阅读 · 0 评论 -
Fiddler 教程
Fiddler的基本介绍Fiddler的官方网站: www.fiddler2.comFiddler官方网站提供了大量的帮助文档和视频教程， 这是学习Fiddler的最好资料。Fiddler是最强大最好用的Web调试工具之一，它能记录所有客户端和服务器的http和https请求，允许你监视，设置断点，甚至修改输入输出数据，Fiddler包含了一个强大的基于事件脚本的子系统，转载 2012-02-13 14:33:39 · 810 阅读 · 0 评论 -
前端必读：浏览器内部工作原理
http://kb.cnblogs.com/page/129756/一、介绍 浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。转载 2012-02-13 15:31:34 · 350 阅读 · 0 评论 -
谈动态添加样式规则
http://www.cnblogs.com/rubylouvre/archive/2009/08/30/1556869.html毫无疑问，基于表现与结构相分离的原则，直接导入一个新的样式表是最好的选择，但有些情况就行不通，如我们做一个能拖动的DIV，从设置样式的角度看，就是把它绝对定位，以防影响原来的文档流，然后一点点改变其top与left的值实现移动的效果。由于拖动是有转载 2012-02-16 16:52:44 · 523 阅读 · 0 评论 -
http://www.cnblogs.com/xuanhun/archive/2012/04/08/2437670.html
http://www.cnblogs.com/xuanhun/archive/2012/04/08/2437670.html首次面对题目所示的需求的时候，头脑中没有任何概念，于是搜索，所有的中文结果都不是很满意。所幸老外的几篇文章还是很有参考价值，虽然最终没有解决我的问题，但是我还是把这几篇文章的内容作了抽取和整理，于是有了本文。主要内容如下：1.1 浏览器检测1.2 浏览转载 2012-04-09 11:44:17 · 741 阅读 · 0 评论 -
IE下修改＜p＞标签的innerHTML出错
在ＩＥ p标签的innerHTML值不允许含有区块标签（如：div,p,ul等）原创 2012-04-24 17:30:47 · 758 阅读 · 0 评论 -
CSS3 必须要知道的10 个顶级命令
http://www.cnblogs.com/damonlan/archive/2012/04/23/2465569.html1.边框圆角（Border Radiuas）这个是我们在平常很常用的吧，以前我在用div圆角的时候，特别特别的痛苦，不管是用CSS来画圆角，还是用图片来画圆角都不那么容易，但是现在好了，在CSS3中，直接只需要如下面饿代码，就能做出美轮美奂的转载 2012-06-12 17:57:37 · 322 阅读 · 0 评论 -
浏览器开发工具的25个秘密
http://blog.jobbole.com/8524/过去几年来，浏览器开发工具一直是 Web 开发者最得力的工具。它能够与Web浏览器和谐相处，允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript，以及获取一些其他的有用信息。以前开发者使用Firefox的一个名叫Firebug的扩展，来开发和调试他们的网站。但是最近，各个浏览器都开发了一套它们自己的转载 2011-11-28 21:44:52 · 349 阅读 · 0 评论 -
为非IE浏览器添加mouseenter，mouseleave事件
http://www.cnblogs.com/snandy/archive/2011/03/28/1997414.html先了解几个事件对象属性target: 指事件源对象，点击嵌套元素最里层的某元素，该元素就是target。IE6/7/8对应的是srcElement。currentTarget: 指添加事件handler的元素本身，如el.addEventListener转载 2011-11-28 22:58:48 · 459 阅读 · 0 评论 -
高性能WEB开发 - 页面呈现、重绘、回流
<br />页面呈现流程 <br /><br /> 在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 <br /><br /> 1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)。dom树就是我们用fir转载 2010-12-09 15:14:00 · 630 阅读 · 0 评论 -
高性能WEB开发 - flush让页面分块,逐步呈现
在处理比较耗时的请求的时候，我们总希望先让用户先看到部分内容，让用户知道系统正在进行处理，而不是无响应。一般大家在处理这种情况，都使用ajax，先把html输出到客户端，然后再用ajax取加载比较耗时的资源。用ajax麻烦的地方是增加了请求数，而且需要写额外的js代码、和js调用的请求接口。 正对这种情况，还有一种处理方法，就是让response分块编码进行传输。response分块编码，可以先传输一部分不需要处理的html代码到客户端，等其他耗时代码执行完毕后再传输另外的html代码。分转载 2010-12-09 11:50:00 · 307 阅读 · 0 评论 -
高性能web开发 - 如何加载JS，JS应该放在什么位置？
<br />外部JS的阻塞下载 所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。<br /><br /> 有人会问：为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，<br />当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上引用了CSS或者IMAGE，就会再发1个request转载 2010-12-09 14:40:00 · 336 阅读 · 0 评论 -
高性能WEB开发 - 为什么要减少请求数，如何减少请求数!
<br />http请求头的数据量<br /> 我们先分析下请求头，看看每次请求都带了那些额外的数据.下面是监控的google的请求头<br /> Host www.google.com.hk User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTBDFff GTB7.0<br /> Accept text/html,applicati转载 2010-12-09 15:02:00 · 486 阅读 · 0 评论 -
IE href bug
<br /><br />在IE中，如果修改a标签的href，某些情况下，a标签的innerHTML也会被修改……<br />很诡异的bug，貌似跟a标签里的内容有关系。<br />解决方法是在修改href时，赋值前面加一个空格，如：<br />el.herf = ‘ ‘ + ‘http://blog.xhlv.com’;Code ViewPrint<a id="t1" href="http://url.cn/3mAAJj">http://url.cn/3mAAJj</a> <input type="b转载 2010-12-12 00:02:00 · 402 阅读 · 0 评论 -
键盘各个按键的代码
<br /><br />经常会用到，保存以备用。<br />————————————————————字母 A 到 Z 和标准数字 0 到 9<br />A(65) B(66) C(67) D(68) E(69) F(70) G(71) H(72) I(73) J(74) K(75) L(76) M(77) N(78) O(79) P(80) Q(81) R(82) S(83) T(84) U (85) V(86) W(87) X(88) Y(89) Z(90) 0(48) 1(49) 2(50) 3(51)转载 2010-12-12 00:35:00 · 1754 阅读 · 0 评论 -
cssText在IE中的小bug
<br /><br />当需要批量赋予Element样式时，cssText是比较好的方式，可以减少reflow，如：Element.style.cssText = 'width:100px;height:100px;top:100px;left:100px;' <br />但是，这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。<br />为了解决这个问题，可以采用cssText累加的方法：Elemen转载 2010-12-12 00:18:00 · 537 阅读 · 0 评论 -
iframe之间的通信与操作
<br /><br />记录一下产品界面中iframe的通信与操作问题：<br />一、iframe和父级之间（简单）<br />iframe可以通过parent或top来找到父级页面，父级页面也可以很容易找到iframe。<br />二、iframe和iframe之间（复杂一些）<br />如果页面中有两个iframe：A和B，那么在A页面中可以通过parent.B来找到B，反之亦然。<br />但是，这样会有一个问题，如果parent.B名称变了或者根本就没有parent.B咋办呢，难道去修改A要加载的转载 2010-12-12 00:27:00 · 712 阅读 · 0 评论 -
html meta 详解
<br /><br />meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个me转载 2011-01-04 19:11:00 · 256 阅读 · 0 评论 -
html embed的基本用法
<br /><br />Embed <br /> （一）、基本语法： <br /> embed src=url <br /> 说明：embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，<br /> Netscape及新版的IE 都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 <br /> 示例：<embed src="your.mid"><br /> （二）、属性设置： <br /> 1、自动播放： <br /> 语法：au转载 2011-01-05 22:42:00 · 399 阅读 · 0 评论 -
加速Javascript：DOM操作优化
原文：《Speeding up JavaScript: Working with the DOM》作者： KeeKim Heng, Google Web Developer 在我们开发互联网富应用（RIA）时，我们经常写一些javascript脚本来修改或者增加页面元原创 2011-09-04 15:49:12 · 277 阅读 · 0 评论 -
一个IE6下重复加载的BUG
IE6在window.onload(或模拟的domready)时执行脚本，会引发一些cache的问题:问题1. 此时JS对dom进行渲染级的变动，如设置宽高、innerHTML等，会对元素的背景图进行重新请求问题2. 此时JS对多个Image元素设置同一src，此转载 2011-08-27 13:43:48 · 350 阅读 · 0 评论 -
盲人站长深恶痛绝的onfocus=”this.blur()”
杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。杨同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时，他对我们前端的同学特别的强调：他最深转载 2011-08-27 13:46:13 · 376 阅读 · 0 评论 -
Scrapy爬虫教程之URL解析与递归爬取
http://www.icodelogic.com/?p=459前面介绍了Scrapy如何实现一个最简单的爬虫，但是这个Demo里只是对一个页面进行了抓取。在实际应用中，爬虫一个重要功能是”发现新页面”，然后递归的让爬取操作进行下去。发现新页面的方法很简单，我们首先定义一个爬虫的入口URL地址，比如《Scrapy入门教程》中的start_urls，爬虫首先将这个页面的内容抓转载 2013-01-07 11:57:57 · 3543 阅读 · 0 评论