前端性能优化

最新推荐文章于 2024-09-13 23:32:49 发布

weixin_30888413

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量46

点赞数

文章标签：前端后端爬虫 ViewUI

原文链接：http://www.cnblogs.com/MJ-MY/p/11287572.html

版权

一：网络请求

　　（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));