web性能优化

---

http请求

合并JS/CSS文件

非可视屏幕内内容延时加载 例如 懒加载图片

获取数据首选get，浏览器执行XMLHttpRequest POST请求时分成两步，先发送Http Header，再发送data。而GET只使用一个TCP数据包（Http Header与data）发送数据，所以首选GET方法。

有“阴谋预加载”，比如进入百度首页搜索，先把结果页框架给加载好，用户进行搜索后只把json数据传过来

合并小图片使用雪碧图或行内图片base64

DOM优化

减少页面没用的嵌套标签 document.getElementsByTagName('*').length;可以统计页面dom数量

避免循环单个dom操作，比如循环插入，拼成一个再一次性插入。

使用事件委托代替挨个元素绑定事件。

react中使用setdate()方法异步处理状态

CSS优化

不要使用css表达式，CSS表达式超出预期的频繁执行，页面滚动、鼠标移动时都会不断执行，带来很大的性能损耗

使用<link>替代@import

移动端

保证所有组件都小于25K

服务端

减少 Cookie 大小,http请求都是头上顶着cookie

服务器-添加Expires或Cache响应头,缓存ajax请求

启用Gzip

配置 Etag (304协商缓存)

参考 https://juejin.im/post/5b73ef38f265da281e048e51