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