前端优化问题(不断更新中…)
一、减少HTTP请求
每一个HTTP都会有请求、建立、释放的过程。如果我们有两张图片分别为50kb需要下载,那么下载一张100kb的图片所用的时间会更短。
解决:
1.我们可以合并图片(Sprites雪碧图、精灵图)来减少资源的下载次数。
2.合并CSS和JS。
3.图片多的页面采用lazyload懒加载技术。
二、减少页面的重绘(Repaint)和回流(Reflow)
Repaint就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。
Reflow就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性。如:style属性的改变、改变窗囗大小、改变文字大小、内容的改变等等。
解决:
1.避免使用行内样式style,而用class代替,因为行内样式的每一次改变都会触发Reflow。
2.有动画的dom尽可能脱离文档流(position:absolute或fixed)避免影响其他dom结构。
三、减少DOM操作
dom操作是最、最、最影响前端性能的。
解决:
1.我们在循环进行dom操作时,应该在循环结束后对dom进行一次性写入。
四、控制Cookie大小和污染
Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie。
解决:
1.所以建议去除不必要的Coockie,使Coockie体积尽量小以减少对用户响应的影响;
2.使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响;