前端性能优化

发布于 2018-11-16  211 次阅读


css:渲染页面
  • 能修改整个节点的大小或位置的属性,如height,float,会触发重布局,
  • 能改变节点内部的渲染效果,会需要重绘
不会引发重绘、重布局的属性:* opacity
* translate
* rotate//会gpu加速,创建新图层
* scale
浏览器优化后会有回流队列,在一定时间间隔后处理回流,但遇到一些属性会立刻执行回流
This happens when you request style information, such as
  1. offsetTop, offsetLeft, offsetWidth, offsetHeight
  2. scrollTop/Left/Width/Height
  3. clientTop/Left/Width/Height
  4. getComputedStyle(), or currentStyle in IE
减少重流重绘:静态用classname,动态用style.cssText属性,一次回流完成,使用fixed或者absolute定位,在另外图层,减少回流
  • // bad var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // better el.className += " theclassname"; // or when top and left are calculated dynamically... // better el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
回流重绘影响:
  • In Chrome not touching computed styles while modifying styles is 2.5 times faster when you change styles (restyle test) and 4.42 times faster when you change styles and layout (relayout test)
  • In Firefox - 1.87 times faster to refrain from asking computed styles in restyle test and 1.64 times faster in the relayout test
  • In IE6 and IE8, it doesn't matter
js性能优化:
1:js文件放底部
2:js文件打包
3:script标签加defer属性,可以等页面渲染完加载script
4:减少DOM回流与重绘
5:避免重复工作,保存首次结果
6:es6(严格模式)使用尾调用优化--函数调用会有调用记录(调用帧),保存调用位置及内部变量等信息,比如函数A部调用函数B,在函数A的调用帧上方会保存函数B的调用记录,直到函数B返回结果,B的调用帧才消失,
尾调用优化:如果A最后一步调用B,则直接用内层函数B的调用帧取代外层函数A的调用帧,节省内存
7: 尾递归优化
8:使用DocumentFragments或innerHTML取代复杂的元素注入
DocumentFragement是一组子节点的“虚拟存储”,并且它没有父标签。在我们的例子中,将 DocumentFragement想象成看不见的元素,在 DOM外,一直保管着你的子节点,直到他们被注入DOM中
9:高频执行事件/方法的防抖
10:网络存储的静态缓存和非必要内容优化
11:使用异步加载,延迟加载依赖
12.尽可能使用CSS动画
13.使用事件委托
14.使用Data URI代替图片SRC,图片数据以base64字符串格式嵌入到了页面中