为什么css放在头部。js放在尾部
网络优化策略
- 减少http请求书，合并js，css，合理内嵌js
- 合理设置服务端缓存，提高服务器处理速度 （强缓存，对比缓存）
//Expires/Cache-Contrul Etsh/if-none-mstch/last-modified/if-nodified-since
- 避免重定向，重定向会降低响应速度（301,302）
- 使用dns-prefetch，进行Dns预解析
- 采用域名分片技术，将资源放在不同的域名下，接触同一个域名最多处理6个Tcp链接问题
- 采用cdn加速加快访问速度（指派最近，高度可用）
- gzip压缩优化 对传输资源进行体积压缩（html js css）
- 加载数据优先级：proload(预先请求当前页面需要的资源)，prefetch（将来页面中使用的资源）
将数据缓存到HTTP缓存中
- 我们尽量减少重排和重绘
-重排 reflow：添加元素，删除元素，修改大小，移动元素位置，获取位置的相关信息
-重绘 rePaint： 页面中元素样式的改变并不影响他在文档流中的位置
静态资源优化
图片优化
- 避免空的src
- 减小图片尺寸，节约用户流量
- img标签设置alt 属性，提高图片加载失败时的用户体验
- 原生的loading：lazy 图片懒加载
- 不同环境下，加载不同尺寸和像素的图片
- 对于较大的图片可以考虑采用渐进式的图片
- 采用base64URL 减少图片请求
- 采用雪碧图合并图标
HTML优化
- 1，语义化HTML：代码简洁清晰，利于搜索引擎，便于团队开发
- 2，提前声明字符编码，让浏览器快速确定如何渲染网页内容
- 3，减少HTML嵌套关系，减少DOM 节点数量
- 4，删除多余空格，空行，注释，无用的属性等
- 5，HTML减少iframes使用（iframe会阻塞onload事件可以动态加载iframe）
- 6，避免使用table布局
css优化
- 1，减少伪类选择器，减少样式层数，减少使用通配符
- 2，避免使用css表达式，css表达式会频繁求职，当滚动页面，或者移动树时都会重新计算
- 3，删除空行，注释，减少无意义的单位，css进行缓存
- 4，添加媒体字段，之家在有效的css文件
- 5，减少@import使用，由于@import采用的是串行加载
js优化
- 1，通过async 。defer异步加载文件
- 2，减少Dom操作，缓存访问过的元素
- 3，使用webworker解决程序阻塞问题
- 4， 虚拟滚动 ertual-scroll-list
- 5，见谅避免使用eval，消耗时间久
- 6，使用时间委托，减少时间绑定个数
- 7，尽量使用canvas动画，css动画
