一:网络请求
(1)减少http请求
(2)减少http单次请求所花费的时间
二:缓存机制
(1)浏览器缓存机制有4个方面。按照获取资源时请求的优先级排序
1.Memory Cache (在内存的缓存,响应最快的缓存。存base64,较小体积的js,css。)
2.Service Worker Cache (离线缓存,独立于主线程之外的javaScript线程,脱离浏览器窗体,无法直接发访问DOM。可以实现离线缓存,消息推送,网络代理等功能)
3.HTTP Cache (强缓存和协商缓存)
3.0 强缓存:通过HTTP头部的Expires和Cache-Control两个字段来控制的。用来表示资源的缓存时间。需要强制刷新,浏览器强制刷新才有效。
3.1 Expires:绝对时间。
3.2 Cache-Control:相对时间,优先级高。
3.3 当强缓存的时间失效时,就会用到协商缓存
3.4关键字
3.4.1 public :既可以被浏览器缓存,也可以被代理服务器缓存。
3.4.2 private :只能被浏览器缓存。
3.4.3 no-store : 不使用任何缓存策略,只允许直接向服务器发送请求。
3.4.4 no-cache : 绕开了浏览器,每次发送请求先去服务器确认该资源有没有过期。
3.5 协商缓存:就是由服务器来确定缓存资源是否可用,所以客户端与服务端是通过某种表示进行通信,从而达到服务端通过判断请求资源是否可以缓存访问。
3.5.1 协商缓存也叫弱缓存,普通刷新会去启用弱缓存,忽略强缓存,也只有在地址栏和收藏夹里输入地址,通过链接引用资源的情况下,才会启用强缓存,这也就说明为什么更新了图片,但是普通刷新,图片还是旧图片,但是通过图片链接打开的确是新图片。
4.Push Cache(是指 HTTP2 在Push Cache 阶段存在的缓存)
4.1 会话阶段的缓存,当session终止时,缓存也随之释放。
4.2 不同的页面只要共享同一个HTTP2连接,那么它们就可以共享同一个Push Cache.
三:CDN
(1)CDN的核心有两点:缓存,回源
1.缓存:把资源copy一份到CDN服务器上的过程。
2.回源:CDN服务器发现自己没有这个资源(可能过期了),就会向根服务器(或者上一级服务器)去要这个资源的过程。
(2)作用:CDN往往是用来被存放静态资源的。
(3)注意:CDN的域名必须和主业务服务器的域名不一致。不然的话同一个域名下的cookie到处跑,浪费性能流量的开销,CDN域名放在不同的域名下,就可以完美的避开不必要的cookie出现。
四:图片优化
(1)图片的压缩,减少像素点。
(2)图片的类型
1.JPEG/JPG:有损压缩,体积小,加载快,不支持透明,缺点:追求线条感和颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显
2.PNG:无损压缩,质量高,体积大,支持透明,缺点:体积太大。
3.SVG:文本文件,体积小,不失真,兼容性好,SVG对图像的处理不是基于像素点,而是基于对图像的形状描述。
4.Base64:文本文件,依赖代码,小图标解决方案,Base64并非是一种图片格式,而是一种编码方式,Base64和雪碧图一样,是作为小图标解决方案而存在的。
5.WebP:年轻的全能型选手,兼容了JPEG/JPG,PNG的支持透明,GIF的动态图片,--它集多种图片格式的优点于一身,但是太年轻了,兼容性存在一些问题。
五:渲染优化
(1)服务端渲染:DOM树在服务端生成,返回给前端渲染,
1.优点:①尽量不占用前端的资源,前端这块耗时少,速度快。②有利于SEO优化,因为在后端有完整的html页面,所以爬虫更容易爬取信息。
2.缺点:①不利于前后端分离,开发效率低。②对html的解析,前端虽然加载快速度,但是加大了服务器的压力。
(2)客户端渲染:前端去后端取数据生成DOM树。
1.优点:①前后端分离,开发效率高。②减轻服务器压力。③做成单页应用不需要频繁跳转,增加用户体验感。
2.缺点:①前端首屏加载慢,用户体验不好。②不利于SEO优化,爬虫不认识SPA,所以它只是记录了一个页面。
(3)浏览器的渲染:
1.处理html并构建dom树
2.处理css构建cssom树
3.将dom和cssom合并生成渲染树
4.根据渲染树的布局,计算每个节点的位置
5.调用GPU(图形处理器)绘制,合成图层,渲染在浏览器上。
(4)css阻塞(外部引入,放在head标签里。尽量不要写表达式)
(5)js阻塞
1.放在body底部。
2.控制js文件数。
3.给srcipt加上defer属性,延迟加载。
4.可以使用YUI3,LazyLoad类库
5.①减少全局变量,以免变量污染,②代码的可复用性,③利用局部变量保存全局变量。④减少dom操作。⑤慎用with(临时增加作用域链的长度)⑥慎用eval函数。
六:节流和防抖
(1)概念:在进行窗口的resize,srcoll,输入框内容检验的事件中,如实践处理函数调用频率无限制,就会加重浏览器的负担,引起用户体验效果极差。此时我们就可以用到防抖和节流来减少调用频率。
(2)防抖:在持续触发事件过程中,如果超过设定时间没有再触发事件,事件处理函数才会触发一次,但是在设定的时间内再持续触发事件,就会重新延迟。
//防抖事件 function debounce(fn,wait){ var timeout =unll; return function(){ if(timeout !==null){ clearTimeout(timeout) } timeout = setTimeout(fn,wait) } } //处理函数 function handle(){ console.log(1) } //滚动事件 window.addEventListener('scroll',debounce(handle,1000))
(3)节流:无论多么频繁的触发事件,一定会在规定时间内真正触发一次事件处理函数。原理是:通过判断是否达到一定的时间来触发函数。比如在滚动页面时隔一段时间触发一次函数,适用于节流。
// 节流 function throttle(fn, delay) { var timeout = null; var starTime = Date.now(); return function() { var curTime = Date.now(); var remaining = delay -(curTime-starTime); var context =this; var args = arguments; clearTimeout(timeout); if(remaining<=0){ fn.apply(context,args); starTime = Date.now(); }else{ timeout = setTimeout(fn,remaining) } } } // 处理函数 function handle() { console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', throttle(handle, 3000));