减少 HTTP 请求次数和请求大小：
1、尽量合并 CSS 和 JS 文件，减少 HTTP 请求次数，把合并的代码压缩，减小 HTTP 请求资源大小
利用 webpack 自动化构建工具，实现代码合并和压缩
在移动端，高性能 PC 端开发如果 CSS 或者 JS 不需要很多，可以把 CSS 和 JS 编程内嵌式
2、 尽量使用字体图标或者 SVG 图标替代传统 PNG 等格式图片（字体图标是矢量图放大不会变形，渲染速度快）
3、采用图片的懒加载，减少页面一次加载过程中 HTTP 的请求次数
4、利用浏览器和服务器端的缓存技术（304缓存），把一些不经常更新的静态资源文件做缓存处理（如：JS，CSS，静态如片）。减少 HTTP 的请求次数和请求大小
5、CSS 雪碧图技术，把相对较小资源图片汇总到一张大图上面
6、减少 cookie 使用，减少本地 cookie 存储内容大小
7、页面中数据获取采用异步编程和延迟分批加载，降低 HTTP 通道堵塞，不会因为数据没有请求回来耽误后面信息渲染，提高页面打开速度
8、页面中出现音视频标签，不让页面加载的时候就去加载这些资源，使用preload = 'none'
9、客户端和服务端进行信息交互的时候，对于多项数据尽可能基于 JSON 格式来进行传递，相对 XML 格式传输才会有这个优势
10、尽可能实现 JS 封装（低耦合高内聚），减少页面冗余代码（减少 HTTP 请求资源大小）
11、利用 H5 中提供的 localstorage 本地存储或者 manifest 离线缓存，做一些信息的本地存储，减少 HTTP 请求次数
12、基于 Script 调取 JS 时，可以使用 defer 或 async 一部加载
代码优化：有利于SEO、扩展维护、减少性能消耗
1、在 JS 尽量减少闭包的使用（闭包会产生不释放栈内存），但是不可避免的使用闭包
例如在给元素做事件绑定的时候，尽可能的把后期需要的信息存储到元素自定义属性上，而不是创建闭包存储
可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储
尽可能手动释放不被占用的内存
2、减少对 DOM 操作，主要减少 DOM 重绘和回流
回流分离重写
使用文档碎片或者字符串拼接做数据绑定
3、在 JS 避免嵌套循环（额外增加很多循环次数）和死循环
4、尽可能使用事件委托处理事件绑定操作，减少 DOM 频繁操作包括给每一个 DOM 元素做事件绑定
5、CSS 选择器中尽可能减少标签选择器的使用，CSS 是从右向左解析先找到所有的该标签
6、在 CSS 导入的时候减少使用 @import 导入式，@import 为同步操作
7、使用 window.requestAnimationFrame() 代替传统定时器动画
8、减少递归使用，避免死递归，建议使用尾递归
DNS 及 HTTP 通讯方式优化：
1、做CDN加速
额外计较
1、一般把 CSS 放到 body 上，JS 放到 body 下面（先加载 CSS 保证页面渲染过程中元素带着样式渲染，JS 2、一般都是操作 DOM 元素的，需要等到元素加载完再操作）
3、能使用 CSS 完成的不用 JS，原生 JS 能完成不用插件，CSS处理动画性能优于 JS ，CSS 中的 transform 变形开启了硬件加速
4、JS 中尽可能减少对 eval 使用，JS 合并压缩时可能出现由于符号不完善导致代码执行优先级错乱问题，
5、基于 AJAX 的 GET 请求进行数据交互的时候，根据需求产生缓存（不是304缓存）
6、使用 keep-alive 实现客户端和服务端长连接
7、尽量减少 CSS 表达式使用
8、避免使用 with 语句
JS代码优化108条建议、雅虎 CSS 优化36条建议
网友评论