×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

前端性能优化不完全手册【已更新至React】

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

专注于为中小企业提供成都网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业拜泉免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

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

一、DNS 解析

优化策略：尽量允许使用浏览器的缓存，能给我们节省大量时间。

二、TCP的三次握手

三、浏览器发送请求

优化策略:

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

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

 
 
 
    
  
  
  
  1. Upstream指定后端服务器地址列表 
    2. 
  
  
  
  2.    upstream balanceServer { 
    3. 
  
  
  
  3.        server 10.1.22.33:12345; 
    4. 
  
  
  
  4.        server 10.1.22.34:12345; 
    5. 
  
  
  
  5.        server 10.1.22.35:12345; 
    6. 
  
  
  
  6.    } 
    7. 
  
  
  
  7.    复制代码在server中拦截响应请求，并将请求转发到Upstream中配置的服务器列表。 
    8. 
  
  
  
  8.        server { 
    9. 
  
  
  
  9.            server_name  fe.server.com; 
    10. 
  
  
  
  10.            listen 80; 
    11. 
  
  
  
  11.            location /api { 
    12. 
  
  
  
  12.                proxy_pass http://balanceServer; 
    13. 
  
  
  
  13.            } 
    14. 
  
  
  
  14.        }
    15.

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

 
 
 
    
  
  
  
  1. upstream balanceServer { 
    2. 
  
  
  
  2.        least_conn; //配置压力较小的服务器 
    3. 
  
  
  
  3.        server 10.1.22.33:12345; 
    4. 
  
  
  
  4.        server 10.1.22.34:12345; 
    5. 
  
  
  
  5.        server 10.1.22.35:12345; 
    6. 
  
  
  
  6.    }
    7. 
 
 
 
 
 
 
    
  
  
  
  1. upstream balanceServer { 
    2. 
  
  
  
  2.     fair; //配置响应时间最短的服务器 
    3. 
  
  
  
  3.     server 10.1.22.33:12345; 
    4. 
  
  
  
  4.     server 10.1.22.34:12345; 
    5. 
  
  
  
  5.     server 10.1.22.35:12345; 
    6. 
  
  
  
  6. }
    7. 
 
 
 
 
 
 
    
  
  
  
  1. 来自同一个ip的请求永远只分配一台服务器，有效解决了动态网页存在的session共享问题。 
    2. 
  
  
  
  2. upstream balanceServer { 
    3. 
  
  
  
  3.     ip_hash; //配置1个IP永远只分配一台服务器 
    4. 
  
  
  
  4.     server 10.1.22.33:12345; 
    5. 
  
  
  
  5.     server 10.1.22.34:12345; 
    6. 
  
  
  
  6.     server 10.1.22.35:12345; 
    7. 
  
  
  
  7. }
    8. 
 
 
 
 
 
 
    
  
  
  
  1. location ~* \.(png|gif|jpg|jpeg)$ { 
    2. 
  
  
  
  2.     root    /root/static/;   
    3. 
  
  
  
  3.     autoindex on; 
    4. 
  
  
  
  4.     access_log  off; 
    5. 
  
  
  
  5.     expires     10h;# 设置过期时间为10小时   
    6. 
  
  
  
  6.  } 
    7. 
  
  
  
  7. 复制代码匹配以png|gif|jpg|jpeg为结尾的请求， 
    8. 
  
  
  
  8. 并将请求转发到本地路径，root中指定的路径即nginx 
    9. 
  
  
  
  9. 本地路径。同时也可以进行一些缓存的设置
    10. 
 
 
 
 
 
 
    
  
  
  
  1. nginx解决跨域的原理 
    2. 
  
  
  
  2. 例如： 
    3. 
  
  
  
  3. 前端server的域名为：fe.server.com 
    4. 
  
  
  
  4. 后端服务的域名为：dev.server.com 
    5. 
  
  
  
  5. 现在我在fe.server.com对dev.server.com发起请求一定会出现跨域。 
    6. 
  
  
  
  6. 现在我们只需要启动一个nginx服务器，将server_name设置为fe.server.com, 
    7. 
  
  
  
  7. 然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回dev.server.com。 
    8. 
  
  
  
  8. 如下面的配置： 
    9. 
  
  
  
  9. server { 
    10. 
  
  
  
  10.         listen       80; 
    11. 
  
  
  
  11.         server_name  fe.server.com; 
    12. 
  
  
  
  12.         location / { 
    13. 
  
  
  
  13.                 proxy_pass dev.server.com; 
    14. 
  
  
  
  14.         } 
    15. 
  
  
  
  15. } 
    16. 
  
  
  
  16. 复制代码这样可以完美绕过浏览器的同源策略：fe.server.com访问nginx的fe.server.com 
    17. 
  
  
  
  17. 属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。
    18.

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

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

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

性能优化策略：

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

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

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

如何使网页更丝滑？

 
 
 
    
  
  
  
  1. //读取offsetWidth的值会导致重绘 
    2. 
  
  
  
  2.             const newWidth = container.offsetWidth;   
    3. 
  
  
  
  3.               //设置width的值会导致重排，但是for循环内部 
    4. 
  
  
  
  4.              代码执行速度极快，当上面的查询操作导致的重绘 
    5. 
  
  
  
  5.              还没有完成，下面的代码又会导致重排，而且这个重 
    6. 
  
  
  
  6.              排会强制结束上面的重绘，直接重排，这样对性能影响 
    7. 
  
  
  
  7.              非常大。所以我们一般会在循环外部定义一个变量，这里 
    8. 
  
  
  
  8.              面使用变量代替container.offsetWidth; 
    9. 
  
  
  
  9.             boxes[i].style.width = newWidth + 'px'; 
    10. 
  
  
  
  10.            }     
    11.

以上都是根据本人的知识点总结得出，后期还会有更多性能优化方案等出来，路过点个赞收藏收藏~，欢迎提出问题补充~

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

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

 
 
 
    
  
  
  
  1. var map1 = Immutable.Map({ a: 1, b: 2, c: 3 }); 
    2. 
  
  
  
  2.         var map2 = map1.set('b', 50); 
    3. 
  
  
  
  3.         map1.get('b'); // 2 
    4. 
  
  
  
  4.         map2.get('b'); // 50
    5.

本文标题：前端性能优化不完全手册【已更新至React】
文章位置：http://cdbrznjsb.com/article/djcigej.html

其他资讯

让你的专属顾问为你服务