让前端飞Vue.js前端开发

前端性能优化不完全手册

2019-05-05  本文已影响1人  前端一菜鸟

性能优化是一门大学问，本文仅对个人一些积累知识的阐述，欢迎下面补充。

抛出一个问题，从输入url地址栏到所有内容显示到界面上做了哪些事？

上面这个问题是一个面试官非常喜欢问的问题，我们下面把这6个步骤分解，逐步细谈优化。

一、DNS 解析

优化策略：尽量允许使用浏览器的缓存，能给我们节省大量时间，下面有dns-prefetch的介绍,每次dns解析大概需要20-120秒

二、TCP的三次握手

三、浏览器发送请求

优化策略:

四、服务器返回响应，浏览器接受到响应数据

一直没想到这里使用什么优化手段，今晚想到了，使用Nginx反向代理服务器，主要是对服务器端的优化。

    Upstream指定后端服务器地址列表
    upstream balanceServer {
        server 10.1.22.33:12345;
        server 10.1.22.34:12345;
        server 10.1.22.35:12345;
    }
    复制代码在server中拦截响应请求，并将请求转发到Upstream中配置的服务器列表。
        server {
            server_name  fe.server.com;
            listen 80;
            location /api {
                proxy_pass http://balanceServer;
            }
        }

将请求优先分配给压力较小的服务器，它可以平衡每个队列的长度，并避免向压力大的服务器添加更多的请求。

    upstream balanceServer {
        least_conn; //配置压力较小的服务器
        server 10.1.22.33:12345;
        server 10.1.22.34:12345;
        server 10.1.22.35:12345;
    }

upstream balanceServer {
    fair; //配置响应时间最短的服务器
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

来自同一个ip的请求永远只分配一台服务器，有效解决了动态网页存在的session共享问题。
upstream balanceServer {
    ip_hash; //配置1个IP永远只分配一台服务器
    server 10.1.22.33:12345;
    server 10.1.22.34:12345;
    server 10.1.22.35:12345;
}

location ~* \.(png|gif|jpg|jpeg)$ {
    root    /root/static/;  
    autoindex on;
    access_log  off;
    expires     10h;# 设置过期时间为10小时          
}
复制代码匹配以png|gif|jpg|jpeg为结尾的请求，
并将请求转发到本地路径，root中指定的路径即nginx
本地路径。同时也可以进行一些缓存的设置。

nginx解决跨域的原理
例如：

前端server的域名为：fe.server.com
后端服务的域名为：dev.server.com

现在我在fe.server.com对dev.server.com发起请求一定会出现跨域。
现在我们只需要启动一个nginx服务器，将server_name设置为fe.server.com,
然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回dev.server.com。
如下面的配置：
server {
        listen       80;
        server_name  fe.server.com;
        location / {
                proxy_pass dev.server.com;
        }
}
复制代码这样可以完美绕过浏览器的同源策略：fe.server.com访问nginx的fe.server.com
属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。

对于文本文件，GZip 的效果非常明显，开启后传输所需流量大约会降至 1/4 ~ 1/3。

Nginx功能非常强大，配置也非常方便，有兴趣的可以多看看这篇文章 Nginx解析

五、浏览器解析数据，绘制渲染页面的过程

性能优化策略：

    /*
    runtimeChunk 设置为 true, webpack 就会把 chunk 文件名全部存到一个单独的 chunk 中，
    这样更新一个文件只会影响到它所在的 chunk 和 runtimeChunk，避免了引用这个 chunk 的文件也发生改变。
    */
    runtimeChunk: true, 
    splitChunks: {
      chunks: 'all'  // 默认 entry 的 chunk 不会被拆分, 配置成 all, 就可以了
    }
  }
    //因为是单入口文件配置，所以没有考虑多入口的情况，多入口是应该分别进行处理。

六、TCP的四次挥手，断开连接

终结篇：性能只是 load 时间或者 DOMContentLoaded 时间的问题吗？

下面加入React的性能优化方案:

只要得到他们每一项值，只要有一个不一样就返回true，更新组件。

原生JavaScript实现懒加载：

 function isInSight(el){
            var eldom = typeof el == 'object'?el:document.querySelector(el);
            var bound = eldom.getBoundingClientRect();
            // 这里的bound包含了el距离视窗的距离；
            // bound.left是元素距离窗口左侧的距离值；
            // bound.top是袁术距离窗口顶端的距离值；

            // 以以上两个数值判断元素是否进入视窗；
            var clientHeigt = window.innerHeight;
            var clientWidth = window.innerWidth;
            // return (bound.top>=0&&bound.left>=0)&&(bound.top<=window.innerHeight+20)&&(bound.left<=window.innerWidth+20);
            return !((bound.top>clientHeigt)||(bound.bottom<0)||(bound.left>clientWidth)||(bound.right<0))
        }

 // 当加载完成，检测并加载可视范围内的图片
        window.onload= checkAllImgs;
        // 添加滚动监听，即可视范围变化时检测当前范围内的图片是否可以加载了
        window.addEventListener("scroll",function(){
            checkAllImgs();
        })

        // 检测所有图片，并给视窗中的图片的src属性赋值，即开始加载；
        function checkAllImgs(){
            var imgs = document.querySelectorAll("img");
            Array.prototype.forEach.call(imgs,function(el){
                if(isInSight(el)){
                    loadImg(el);
                }
            })
        }
        // 开始加载指定el的资源
        function loadImg(el){
            var eldom = typeof el == 'object'?el:document.querySelector(el);
            if(!eldom.src){
               // 懒加载img定义如：<div class="img"><img  alt="加载中" data-index=7 data-src="http://az608707.vo.msecnd.net/files/MartapuraMarket_EN-US9502204987_1366x768.jpg"></div>
                var source = eldom.getAttribute("data-src");
                var index = eldom.getAttribute("data-index");
                eldom.src = source; 
                console.log("第"+index+"张图片进入视窗，开始加载。。。。")
            }

        }

现在最新版本的谷歌浏览器也要支持 <img>标签的内部 loading属性了，相信未来开发会越来越方便。
以上都是根据本人的知识点总结得出，后期还会有更多性能优化方案等出来，路过点个赞收藏收藏，欢迎提出问题补充

上一篇下一篇

猜你喜欢

热点阅读