1.DNS预解析
预解析也就只有加快解析的作用
<link rel="dns-prefetch" href="//blog.poetries.top">
2.缓存
那么具体如何进行什么样的缓存取决于返回资源的时候响应头的设定:
1.如果使用协商缓存:响应头中就会带有Etag,if-modified这样的字样
2.如果使用强缓存:则会带着Expires和Cache-control
这里拿出来Cache-control来说一下就是:
cache-control则会对中有两个属性比较重要:
1.no-cache:数据其实会存在浏览器中,但是它的意思是不建议使用缓存,但是如果带有别的响应头就会执行相应的缓存机制,代表允许协商缓存,这里不会开启强缓存
2.max-age:代表缓存最大有效时间
强缓存
在浏览器请求数据的时候首先会查看本地有没有缓存(本地缓存也就是强缓存),如果在本地有缓存的数据则直接从本地获取也就是命中了强缓存,如果在本地没有数据就会发送远程请求,此时会出现协商缓存
浏览器(cache-control:max-age=500,expire)->服务器
服务器(强缓存,max-age=500)->浏览器
浏览器(本地存储数据)更新数据
浏览器(cache-control:no-cache)->服务器
服务器(强缓存未开启)->浏览器(本地存储数据)
浏览器(带有last-modified/E-tag)->服务器(协商)
浏览器(本地存储数据)更新数据
协商缓存:
发送给服务器的请求中会携带是否进行协商缓存的响应头:Etag,last-modified来进行判断
如果服务器看到这个响应头则会判断:
last-modified
1.如果资源没有变化返回304,代表可以使用协商缓存在浏览器缓存中拿到数据
2.如果资源发生了变化则返回最新的资源
E-tag
1.服务器判断请求中是否带有这个响应头字段
2.如果有的话,会通过查看哈希值的对比来判断数据是否有更新
3.没有更新直接返回304
浏览器(last-modified,Etag)->服务器
服务器(数据更新)->浏览器(最新数据)
服务器(数据没有更新)->浏览器(304,可以从浏览器缓存资源中拿到)
流程: 强缓存->协商缓存->服务器数据
3.使用HTTP2.0
1.在http1.0中在处理高并发的请求的时候就不是那么优秀了
由于http1.0每次请求都相当于对每一个请求都开辟一个通道来进行请求,而每个请求都要链接和断开这就导致了会浪费很多的时间,而且由于TCP慢启动会导致加载大的文件要很长的时间
2.HTTP2.0中在处理高并发就很优秀:
它不再是给每一个请求都开一个通道而是多请求公用一个TCP链接,还支持Header压缩,大大的提高了性能
4.预加载
预加载的原理就是:有些数据只有我们在用到的时候才会进行加载
5.预渲染
加载script脚本:
1.使用异步加载的方式在标签里面添加defer或者async
defer是由一定顺序依赖的,而async则是脚本加载完了之后就会进行
async
在加载页面html元素的时候,async里面的内容会被以异步的方式也进行渲染,但是渲染的时机就不太确定容易出错
defer
同样也是在加载html的时候也进行下载资源
只不过是html加载完了之后才会进行渲染
6.懒加载和懒执行
懒执行:数据用到的时候才加载,一把能使用定时器就能实现
懒加载:不需要的资源就不加在。
7.文件优化
1/图片优化
使用精灵图
2.其他文件优化
CSS使用在head标签里面,可以通过less或者scss的这样的表达式语言来减少代码的重复和重运行
script标签放在body的底部防止加载过程中阻塞,并且采用异步的方式来加载
CDN
考虑使用多个CDN的节点区加载资源
CDN的域名要和主站不一致,这样子就可以防止每次加载都带上cookie
8.其他
1.使用webpack打包的时候开启代码压缩
2.使用es6的tree-shaking,去掉不用的代码
3.让图片以base64的形式写入
4.按照路由拆分代码
5.打包出来的文件带上哈希,实现浏览器的缓存