自己做的网站可以有多个前端吗,医疗器械一类二类三类,网站建设案例策划,网站建设方面的文章一次在前端面试中问到优化前端性能的方式 一、主要通过两种方式#xff1a; reflow(回流)和repaint(重绘)。整个在浏览器的渲染过程中#xff08;页面初始化#xff0c;用户行为改变界面样式#xff0c;动画改变界面样式等#xff09;reflow(回流)和repaint(重绘) 会大大影…一次在前端面试中问到优化前端性能的方式 一、主要通过两种方式 reflow(回流)和repaint(重绘)。整个在浏览器的渲染过程中页面初始化用户行为改变界面样式动画改变界面样式等reflow(回流)和repaint(重绘) 会大大影响web性能尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。
什么是reflow和repaint原文链接http://www.cnblogs.com/Peng2014/p/4687218.html
reflow例如某个子元素样式发生改变直接影响到了其父元素以及往上追溯很多祖先元素包括兄弟元素这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。
reflow几乎是无法避免的。现在界面上流行的一些效果比如树状目录的折叠、展开实质上是元素的显 示与隐藏等都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码它们都彼此相互影响着。
repaint如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性将只会引起浏览器 repaint重绘。repaint 的速度明显快于 reflow
下面情况会导致reflow发生
1改变窗口大小
2改变文字大小
3内容的改变如用户在输入框中敲字
4激活伪类如:hover
5操作class属性
6脚本操作DOM
7计算offsetWidth和offsetHeight
8设置style属性 那么为了减少回流要注意哪些方式呢
1不要通过父级来改变子元素样式最好直接改变子元素样式改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸
2尽量通过class来设计元素样式切忌用style
var bstyle document.body.style; // cache bstyle.padding 20px; // reflow, repaint
bstyle.border 10px solid red; // 再一次的 reflow 和 repaint bstyle.color blue; // repaint
bstyle.backgroundColor #fad; // repaint bstyle.fontSize 2em; // reflow, repaint // new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode(dude!)); 对上面代码优化
.b-class{ padding:20px; color:blue; border:10px solid red; background-color:#fad; font-size:2em;
}
$div.addClass(b-class); 3实现元素的动画对于经常要进行回流的组件要抽离出来它的position属性应当设为fixed或absolute
4权衡速度的平滑。比如实现一个动画以1个像素为单位移动这样最平滑但reflow就会过于频繁CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
5不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合可以设置table-layout为auto或fixed
6这样可以让table一行一行的渲染这种做法也是为了限制reflow的影响范围。
7css里不要有表达式expression
8减少不必要的 DOM 层级DOM depth。改变 DOM 树中的一级会导致所有层级的改变上至根部下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
9避免不必要的复杂的 CSS 选择器尤其是后代选择器descendant selectors因为为了匹配选择器将耗费更多的 CPU。
10: 尽量不要过多的频繁的去增加修改删除元素因为这可能会频繁的导致页面reflow可以先把该dom节点抽离到内存中进行复杂的操作然后再display到页面上。
在div.first里面加入div.second,在div.second里面加入div.third:
$divS $(div classsecond/div);
$(div.first).append($divS));//reflow
$divT $(div classthird/div);
$divS.append($divT);//reflow
优化代码
$divS $(div classsecond/div);
$divT $(div classthird/div);
$divS.append($divT);
$(div.first).append($divS));//reflow
或者
var $divF $(div.first);
$divS $(div classsecond/div);
$divS.hide();
$(div.first).append($divS));
$divT $(div classthird/div);
$divS.append($divT);
$divS.show();//reflow 请求如下值offsetTop, offsetLeft, offsetWidth, offsetHeightscrollTop/Left/Width/HeightclientTop/Left/Width/Height浏览器会发生reflow建议将他们合并到一起操作可以减少回流的次数。
如果我们要经常去获取和操作这些值则可以先将这些值缓存起来例如
var windowHeight window.innerHeight;//reflow
for(i0;i10;i){ $body.height(windowHeight); 一系列关于windowHeight的操作.......
}
二、添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能能在后续的页面中有效避免很多不必要的Http请求WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本直到指定的时间为止。
三、
参考链接
http://ued.alimama.com/front-end/quick-tips-among-yahoo-n-rules/
http://www.cnblogs.com/Peng2014/p/4687218.html
https://www.cnblogs.com/zhutao/p/6551216.html
