锐客网

  1. 首页 > it技术 > >

web性能优化

1、浏览器请求并发限制：每个浏览器对同一域名下的资源的请求有并发限制，例如chrome就是最多为6条：
(1)搭建node服务器，接受图片请求服务：
web性能优化
文章图片

(2)前端去node服务器那边同时请求8张图片：
web性能优化
文章图片

(3)在chrome控制台network中查看，发现同一时间线下只能最多处理6个请求
web性能优化
文章图片

优化：采用多域名访问的方式，因为浏览器对同一域名的并发请求有限制，那么可以将图片等静态资源放在另外不同域名的服务器中，那么这些请求就可以并发了。
【web性能优化】2、HTML层级优化：
(1)减少HTML的层级嵌套：层级嵌套越多，浏览器遍历DOM所需的时间就越长，在Vue这种框架的组件中，组件也不应该嵌套过多，一个是遍历时间会变长，还有一个是父子组件间的通讯代价变大。
(2)减少空标签、无用标签的滥用：可以用after,before等伪元素代替
(3)避免在HTML标签中引用style属性, 浏览器解析HTML文件会增加压力。
(4)使用模板引擎，像是Vue等框架都自带模板语法。模板语法做的事情：给它一个模板和数据源，返回一个字符串，然后再把这个字符串写入页面（只触发一个回流，如果通过传统方法动态写入HTML,会触发多次回流）
(5)使用（是异步加载，@import是同步加载）：
① prefetch可以利用浏览器空闲的时候，就预加载将来页面可能用到的资源，然后缓存起来。可以提高后续页面的首屏速度。
②preload可以利用浏览器空闲的时间，就预加载当前页面需要的资源，可以提升当前页面的加载速度。
(6)web性能优化
文章图片

②将this的值缓存起来，后缀直接从变量中拿，减少了读取this这个过程
web性能优化
文章图片

5、资源加载优化：
(1)使用link标签的dns-prefetch 可以利用浏览器空闲的时间，对接下来可能访问的网址的域名解析成IP 例如： 可以让用户在接下来页面跳转的过程中，跳过DNS解析的步骤
(2)使用CDN（内容分发网络） 服务器会将资源发送到各个CDN节点上，后续表面上是访问服务器获取资源实际上是从距离比较近的CDN节点这边获取的资源
(3)使用HTTP缓存，通过缓存加载文件比从服务器加载文件速度要快很多
(4)懒加载（多用于图片展示）
(5)分页加载（多用于表格数据）
(6)ajax异步加载
(7)资源压缩（使用Webpack或Koala对JS，CSS等资源压缩，可以减少文件大小）
(8)使用Base64编码上传图片替代传统的256的编码格式 （图片从字符串转换为像素的解析速度变快）
6、其他层级的优化
(1)精简cookie，因为每次请求都要带上cookie，所以cookie越小越好，只需要存一些用户的基本信息就可以了。
(2)控制前端请求数不要太大（资源打包，前端indexDB）
(3)添加中间层，如果用户量很大，一台服务器服务承担，需要多台集群部署工作，可以添加Nginx、Node.js这种中间层代理服务器（具有负载均衡的功能），来转发给集群服务器，让集群中的每台服务器接收到的请求数差不多。
(4)利用GPU加速，CSS3的translate,rotate,scale,opacity,filter都是创建了一个复合层来渲染，然后利用GPU来做加速。若某个元素使用了复合层渲染，那么在它之上的所有元素都会创建复合层渲染，所有有时候要用z-index给该元素设置高层级。
性能消耗：JS操作DOM > 复合层渲染 > 普通DOM渲染

    推荐阅读


    上一篇：5种|5种 JavaScript 方式实现数组扁平化

    下一篇：ASP.NET|ASP.NET Core 中间件的使用之全局异常处理机制