前端性能优化问题

一、优化图片加载

①图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

②如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

③如果图片为css图片，可以使用CSSsprite,SVGsprite,Iconnfont,Base64等技术。

④如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

⑤如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

⑥使用字体图标，精灵图。

⑦webp(google官方网址)是谷歌推出的一种图片格式，优点在于同等画面质量下，体积比jpg、png少了25%以上

二、CSS优化

①尽量将样式写在单独的css文件里面，在head元素中引用，内容和样式分离，易于管理维护，减少页面体积。

②不使用@import，会影响css文件的加载速度。

③合并 CSS图片，减少请求数，如精灵图。

④避免使用复杂的选择器，层级越少越好，有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂，建议选择器的嵌套最好不要超过三层。

⑤利用CSS继承减少代码量，一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式，这个也是提高性能的行之有效的方法。常见的可以继承 的属性比如：color，font-size，font-family等等

不可继承的比如：position，display，float等

三、代码优化

①代码重用，减少css,js文件数量及大小（减少重复性代码），压缩css和js代码,多封装。

②避免全局变量（命名空间，封闭空间，模块化mvc..）。

③拆分函数避免函数过于臃肿。

④注释。

⑤将css样式表放在顶部，将js脚本放在底部。

四、减少http请求次数

①CSS Sprites（CSS Sprites原理及优缺点见下篇博客）

②JS、CSS源码压缩

③data缓存，合理设置 HTTP缓存

五、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

六、当需要设置的样式很多时，设置className而不是直接操作style。

七、避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来，显示比div+css慢。