前端页面优化方法（一天一个问题29）

前端页面优化的方式

1.资源合并、压缩，减少http请求
2.异步加载代码组件模块
3.浏览器缓存（俩header）
CDN内容分发
DNS解析
其他

1.资源合并、压缩，减少http请求

css,js合并压缩
图片：精灵图，懒加载

2.异步加载组件模块js代码

异步加载非核心代码defer,async
vue异步加载组件

component：resolve => require(['@/component/helloworld'],resolve);
component：() => import('./component/helloworld')

3.浏览器缓存

强缓存：Expires,Cache-Control优先级高；不请求服务器直接使用缓存,协商缓存：两对Header,没命中强制缓存，到服务器看是否使用缓存

强制缓存(Expires或Cache-Control)

第一次请求,reaponse.header返回两个时间Expires和Cache-Control
Expires：服务器返回的绝对时间
Cache-Control：服务器返回的相对时间

协商缓存
第一种（缺点：资源变化了，最后修改时间没有变化）

第一次请求，服务器返回Last-Modified
第二次请求，浏览器会带上If-Modified-Since
服务端会比较If-Modified-Since与服务器最后修改时间对比
没有变化——返回304，不返资源

协商缓存
第二种（ETag、If-None-Match）

第一次请求，服务器返回一个ETag(服务器根据当前请求的资源生成的唯一标识。这个唯一标识是一个字符串，只要资源有变化这个串就不同)
第二次请求，浏览器会带上If-None-Match与服务器上新的ETag对比，没有变化返回304，有变化返回资源

4.其他

代码层级
1.少操作DOM，少使用全局变量
避免css表达式，少使用ifram