一、优化图片加载
①图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
②如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
③如果图片为css图片，可以使用CSSsprite,SVGsprite,Iconnfont,Base64等技术。
④如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
⑤如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
⑥使用字体图标，精灵图。
⑦webp(google官方网址)是谷歌推出的一种图片格式，优点在于同等画面质量下，体积比jpg、png少了25%以上
二、CSS优化
①尽量将样式写在单独的css文件里面，在head元素中引用，内容和样式分离，易于管理维护，减少页面体积。
②不使用@import，会影响css文件的加载速度。
③合并 CSS图片，减少请求数，如精灵图。
④避免使用复杂的选择器，层级越少越好，有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂，建议选择器的嵌套最好不要超过三层。
⑤
不可继承的比如：position，display，float等
三、代码优化
①代码重用，减少css,js文件数量及大小（减少重复性代码），压缩css和js代码,多封装。
②避免全局变量（命名空间，封闭空间，模块化mvc..）。
③拆分函数避免函数过于臃肿。
④注释。
⑤将css样式表放在顶部，将js脚本放在底部。
四、减少http请求次数
①CSS Sprites（CSS Sprites原理及优缺点见下篇博客）
②JS、CSS源码压缩
③data缓存，
五、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
六、当需要设置的样式很多时，设置className而不是直接操作style。
七、避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来，显示比div+css慢。