随笔- 96
文章- 3
评论- 35
阅读-
10万
12 2013 档案
前端网页性能最佳实践
摘要：你愿意为打开一个网页等待多长时间？我一秒也不愿意等。但是事实上大多数网站在响应速度方面都让人失望。现在越来越多的人开始建立自己的网站，博 客，你的网页响应速度如何呢？在这篇文章中我们来介绍一下提高网页性能的最佳实践，以及相应的问题解决方案，让站长或者即将要成为站长的朋友了解如何去测 试和提高网站响应速度，对自己的网站更有信心。最佳实践最佳实践我们引用的来自yahoo前端性能团队总结的35条黄金定律。原文猛击这里。下面我们分门别类将每条的关键点总结一下。网页内容减少http请求次数减少DNS查询次数避免页面跳转缓存Ajax延迟加载提前加载减少DOM元素数量根据域名划分内容减少iframe数量避免
阅读全文
DIV使用tabindex获得事件详解 移动div
摘要：添加 tabindex='-1' 属性；默认：获取不到焦点事件（blur）1可以获取焦点事件（blur）1具体详解：先看：W3C关于onfocus的部分 The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BU
阅读全文
JavaScript性能优化
摘要：如今主流浏览器都在比拼JavaScript引擎的执行速度，但最终都会达到一个理论极限，即无限接近编译后程序执行速度。 这种情况下决定程序速度的另一个重要因素就是代码本身。在这里我们会分门别类的介绍JavaScript性能优化的技巧，并提供相应的测试用例，供大家在自己使用的浏览器上验证， 同时会对特定的JavaScript背景知识做一定的介绍。目录变量查找优化变量声明带上var慎用全局变量缓存重复使用的全局变量避免使用with核心语法优化通过原型优化方法定义避开闭包陷阱避免使用属性访问方法避免在循环中使用try-catch使用for代替for…in…遍历数组使用原始操作代替方法调用传递方法取代方
阅读全文
ocument的createDocumentFragment()方法
摘要：在《javascript高级程序设计》一书的6.3.5:创建和操作节点一节中，介绍了几种动态创建html节点的方法，其中有以下几种常见方法：· crateAttribute(name)： 用指定名称name创建特性节点· createComment(text)： 创建带文本text的注释节点· createDocumentFragment()： 创建文档碎片节点· createElement(tagname)： 创建标签名为tagname的节点· createTextNode(text)： 创建包含文本text的文本节点其中最感兴趣且以前没..
阅读全文
arrow css
摘要：无标题文档.tri {position: absolute;left: -21px;top: 40px;width: 0;height: 0;line-height: 0;font-size: 0;border: 12px solid #e5e5e5;border-color: transparent #e5e5e5 transparent transparent;border-style: dashed solid dashed dashed;display: block;}.show {display: block;left: 230px;top: 0;width: 224px;line-
阅读全文
背景颜色透明
摘要：一般情况下边框必须存在一个背景颜色，即使不刻意定义，也会调用默认值。如果想使得边框颜色透明，在其余浏览器下还比较简单，直接使用：border-color:transparent;但是在IE6 下上面的办法却不行，我们可以用以下的HACK办法，使得边框颜色透明：_border-color:tomato;_filter:chroma(color=tomato);或者:_border-color:#FFFFFF;_filter:chroma(color=#FFFFFF);或者： （不知道什么情况下会用到这种，除非上面的代码无效， 呵呵 ~)_border-color:#FFFFFF;_filter:
阅读全文
@media用法。
摘要：@media版本：CSS2 兼容性：IE5+语法：@mediasMedia{sRules}说明：sMedia: 指定设备名称。请参阅附录：设备类型sRules: 样式表定义指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。示例：//设置显示器用字体尺寸@mediascreen{BODY{font-size:12pt;}}//设置打印机用字体尺寸@mediaprint{@import"print.css"BODY{font-size:8pt;}}
阅读全文
attachEvent ,addEventListener
摘要：if (window.attachEvent) { window.attachEvent("onload", remove); } else if (window.addEventListener) { window.addEventListener("load", remove, false); } function remove() { var div = document.getElementById("divprogressbar"); document.body.removeChild(div); }
阅读全文
转载 网页打印时设置A4大小
摘要：最近开发项目时遇到了网页打印的问题，这是问题之二，打印宽度设置 在公制长度单位与屏幕分辨率进行换算时，必须用到一个DPI(Dot Per Inch)指标。 经过我仔细的测试，发现了网页打印中，默认采用的是96dpi，并非传闻的72dpi A4纸张的尺寸是210×297mm，按1英寸=25.41mm换算，即8.264×11.688英寸 所以，A4纸96dpi下的分辨率是794×1123，这就是我们在制作网页的时候需要的象素。 但是打印机是无法满幅打印的，总要有页边距，所以我们在制作网页的时候必须减去页边距。 以下是我测试的各种页边距下，A4纸对应的象素尺寸： 打印页
阅读全文
word-wrap word-break white-space 用法。
摘要：一、word-wrap使用：语法： word-wrap ： normal | break-word取值说明：1、normal和break-word，其中normal为默认值，当其值为normal控制连续文本换行(允许内容顶开容器的边界，换句话说内容可以撑破容器）；2、break-word将内容在边界内换行（不截断英文单词换行，截断英文单词换行需要使用word-break:all属性）,我们先来看两个简单的实例：二、word-break使用：上面我们使用word-wrap:break-word只能在内容中换行，而不能实现词内换行，前面提到过如果需要词内换行，我们需要使用word-break属..
阅读全文
css+div如何解决文字溢出
摘要：看到标题你一定很轻易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。首先，先解释一下，一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大，这个一般容易解决，但是我今天就遇到了这样的问题：在 IE6下测试页面没反应，在IE8下测试页面却正常处理了溢出文字，我就郁闷了，这个溢出处理不是IE特有的吗？怎么IE6却不正常呢。后来网上查了才知 道，原来IE6只支持div内写上溢出处理才有用，而IE6以上版本写在里面才可以，所以我把相同的溢出处理代码写在了div中 和中就正常了，汗啊！！！一下是我的
阅读全文
选择器效率顺序
摘要：选择器有一个固有的效率，顺序如下：id选择器（#myid）类选择器（.myclassname）标签选择器（div,h1,p）相邻选择器（h1+p）子选择器（ul > li）后代选择器（li a）通配符选择器（*）属性选择器（a[rel="external"]）伪类选择器（a:hover,li:nth-child）上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最底。
阅读全文
