background-image: url(bgimage.gif);
background-position:center;
/*
如果您仅规定了一个关键词,那么第二个值将是"center"。
x% y%
第一个值是水平位置,第二个值是垂直位置
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
*/
当其父元素宽度发生改变的时候,表达式就会反复计算,而且计算次数会比我们想象中的还多,每次宽度改变都很可能会引起页面的重排或重绘,引起性能的下降。
重绘(Repaint)和回流(Reflow),重绘是当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘。回流是布局或者几何属性需要改变就称为回流。(添加或删除可见原生,改变元素的位置和尺寸,浏览器窗口尺寸改变)
方法:
作者:holyZheng 转载请注明出处
前端是一种远程部署,运行时增量下载的GUI软件,性能优化主要再两个方面
网络性能
1. 尽量减少http请求数量
CSS Sprites雪碧图
将一些颜色较为丰富的小图片合成一张大图片,在需要使用这些小图片的地方使用同一张大图,通过background-image,background-position属性来定位要显示的部分。
font-icon
行内图片(base64编码)
将较小的图片(转base64后会变重)以 data: url的方式嵌入到页面中,减少http请求。
当图片出现在用户可视区域的时候才加载图片,减少没必要的图片加载
缓存控制
webpack代码懒加载和按需加载
2. 减少代码体积,提高下载速度
代码压缩:
对JavaScript和css进行压缩,提升加载速度。比如使用gulp或webpack对代码进行压缩
gulp图片压缩
tree shaking
移除JavaScript上下文未引用代码(dead-code)
代码分离(提取公共代码)(可配合浏览器缓存——chunkhash)
比如使用webpack时,提取公共代码模块,减少代码冗余,提高加载速度
运行时性能
避免使用css表达式
表达式最大的问题就是容易出现反复计算的情况,比如
当其父元素宽度发生改变的时候,表达式就会反复计算,而且计算次数会比我们想象中的还多,每次宽度改变都很可能会引起页面的重排或重绘,引起性能的下降。 重绘(Repaint)和回流(Reflow),重绘是当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘。回流是布局或者几何属性需要改变就称为回流。(添加或删除可见原生,改变元素的位置和尺寸,浏览器窗口尺寸改变) 方法:
尾递归优化
异步并行
当我们使用async/await 去处理多个异步操作的时候要注意异步操作之间是否有依赖或先后关系,如果没有就让多个异步操作并行执行。
事件委托
通过事件委托来减少绑定到页面上的事件处理程序的数量