小知识总结1. 与, 与标签的区别 与 用在网页上都能使字体加

1. ``与``, ``与``标签的区别

与 用在网页上都能使字体加粗，二者的不同是：是物理元素 ;是逻辑元素。

物理元素强调的是一种物理行为。比如说，把一段文字用b加粗，意思是告诉浏览器应该加粗显示，没有其他作用。而可以从字面理解知道它是强调的意思，是逻辑标签，强调文档逻辑。

对于搜索引擎（SEO）来说，比重视的多。

和都是斜体，但是<em>是逻辑元素，是物理元素。

2. Ajax内存溢出

避免ajax请求过多，导致内存溢出，请求之后回收资源

success: function (data, textStatus) {
    //do something...
},
complete: function (XHR, TS) { 
    XHR = null 
} //回收资源

3. 让ie6支持png透明图片

css方法

{ 
 
background:url(../images/W3CfunsLogo.png) no-repeat; 
 
/*以下为IE6设置PNG透明代码*/ 
_background:none; 
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png"); }

使用情况：

当没有img引入png时可考虑；
当没有CSS Sprite需求时可考虑；
当没有平铺需求时候可考虑；

js方法

DD_belatedPNG
iepngfix.htc和blank.gif
iepngfix.js
pngfix.js
EvPng.js

<!–[if IE 6]>
<script type=”text/javascript” src=”下载下来的JS路径”></script>
<script>
DD_belatedPNG.fix(‘CSS选择器, 应用类型’);
</script>
<![endif]–>

使用情况：

当前6种方法均不能解决问题的时候可考虑；
当png图片过多的时候可考虑，因为png图片太多，使用前面的几个方法，有的会导致CSS代码冗余过多，还不如引入此文件划算；

3.浏览器的重绘(repaints)与重排(reflows)

浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM树和渲染树），DOM树表示页面结构，渲染树表示DOM节点如何显示。

重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。

重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

什么情况下会触发重排？

页面渲染初始化时；（这个无法避免）
浏览器窗口改变尺寸；
元素尺寸改变时；
元素位置改变时；
元素内容改变时；
添加或删除可见的DOM 元素时。
获取某些属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)

重排优化有如下五种方法

将多次改变样式属性的操作合并成一次操作，减少DOM访问。
如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment元素的应用）
将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。 5.在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。

4. js动画技术--requestAnimationFrame

setTimeout和setInterval内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间

requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

requestAnimationFrame绘制滚动条

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
    myDiv.style.width = '0';
    cancelAnimationFrame(timer); //可修改为setTimeout or setInterval
    timer = requestAnimationFrame(function fn(){
        if(parseInt(myDiv.style.width) < 500){
            myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
            myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>

小知识总结

1. <b>与<strong>, <em>与<i>标签的区别