专栏首页小筱月页面性能优化
原创

页面性能优化

博客地址:https://ainyi.com/15

在chrome浏览器,对于同一域名,最多支持6个请求的并发,其他请求会推入到队列中等待或停滞不前,直到6个请求之一完成后,队列中新的请求才会放出。

可以看到,六个绿色条并发请求,四个灰色条等待请求,最下面三个绿色条3.4s后才触发请求

  1. html、css、js 代码压缩
  2. 公共文件(js/css)合并、请求合并
  3. 浏览器缓存(强缓存、弱缓存)
  4. CDN(Content Delivery Network,内容分发网络)加速。通过将静态资源(例如javascript,css,图片等等)缓存到离用户很近的相同网络运营商的CDN节点上,不但能提升用户的访问速度,还能节省服务器的带宽消耗,降低负载(因此,一个地区内只要有一个用户先加载资源,在 CDN 中建立了缓存,该地区的其他后续用户都能因此而受益)
  5. loading 动画
  6. 页面骨架屏
  7. 减少操作 dom 方法
  8. 优化图片加载
  9. 懒加载和预加载

减少操作 dom 方法

  1. 插入大量dom元素时,可以使用innerHTML替代逐个构建元素
  2. 处理列表子元素的事件时,可以使用事件委托

优化图片的加载

  1. 图片懒加载,优先加载浏览器可视区域的图片
  2. 小图片或图标,可用SVG、Iconfont、Base64等技术,多个图标也可以制作成雪碧图(CssSprites)
  3. 加载时预先加载一张特别小的通用略缩图,正式图片加载完成后替换略缩图
  4. 服务端根据业务需要可以对图片进行压缩 (不影响用户体验的情况下)
  5. 为项目添加骨架屏
  6. Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。可查看RFC2045~RFC2049,上面有MIME的详细规范。

懒加载原理

首先将页面上的图片的 src 属性设为空字符串或者一个加载中的图片,而图片的真实路径则设置在 data-original 属性中,

当页面滚动的时候需要去监听 scroll 事件,在 scroll 事件的回调中,判断我们的懒加载的图片是否进入可视区域,

如果图片在可视区内,将图片的 src 属性设置为 data-original 的值,这样就可以实现延迟加载

预加载

  1. 纯 css 实现预加载 不在浏览器可视范围内加载图片,直接 css 加载, 但图片会随文档一起加载,此时可能会降低文档的加载速度
  2. 纯 js 实现预加载 js 脚本提前加载图片 src 或使用 image 对象提前加载图片
  3. css 和 js 实现预加载 如 img 标签最初设置为 display: none,要加载的时候显示 或者滚动条到达可视范围内,js 为目标 div 加上这个已经加载好的 css 属性
  4. ajax 预加载 提前 ajax 请求获取数据 场景有个 tab 标签页,当鼠标放到某个 tab,立刻 ajax 加载该 tab 的数据 当点击这个 tab 标签页的时候,就可以立刻加载出来,再将数据缓存起来或加入全局变量,下一次使用直接从缓存读取

图片转为base64

  1. 图片的 base64 编码就是可以将一幅图片的二进制编码成一串字符串,使用该字符串代替图像地址
  2. 可以减少http请求,base64可以随着html的下载同时下载
  3. 适用于小图片和简单图片

节点

element.parentNode 返回元素的父节点

element.childNodes 返回元素的一个子节点的数组

element.nodeName 返回元素的标记名(大写),用的时候转换小写(element.nodeName.toLowerCase())

event.target:返回触发此事件的元素(事件的目标节点)

详看:https://www.cnblogs.com/ainyi/p/8794159.html

HTML DOM 元素对象:http://www.runoob.com/jsref/dom-obj-all.html

HTML DOM 事件对象:http://www.runoob.com/jsref/dom-obj-event.html

工作中对于广告编辑页的优化

优化加载速度 1.4s

优化的具体

  1. 公共接口合并,减少 http 请求,后端做缓存
  2. promise all 解决根据请求顺序顺序获取的问题(当前接口的数据展示需要依赖上一个接口数据的情景)旧版本是 若有依赖关系的接口,是等待上一个接口请求完毕,才发送当前接口请求
  3. 数据预加载(第四个模块的数据默认收起,点击展开的时候预先加载。不用等待)
  4. 公用数据下沉到领域模型,多个模块复用的数据,不用再次请求接口
  5. 实现页面 MVC 结构 可看这里数据处理单独抽出来放在 service 层,(vuex mutation)
  6. 数据处理(数据量很大的时使用数据字典,可以使用 obj.key 得到想要的数据,需要的数据 key 值与数据字段作关系映射)
  7. 组件化、ESLint 代码规范,便于维护旧版本是 循环使用 if 等于需要的 key 来获取数据
  8. for 循环的使用,数组循环使用 for of,对象使用 for in
  9. 路由方面,使用路由懒加载
  10. 一开始页面需要加载多条请求,在 axios 统一请求拦截加上loading,和接口请求计数器+1,统一响应拦截计数器-1,当等于零就关闭 loading
  11. 渠道组件和多选省市级三级联动组件的优化(重写 Element 的穿梭框组件)具体看 关于 Element 组件的穿梭框的重构

博客地址:https://ainyi.com/15

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • animate 动画滞后执行的解决方案

    针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:

    柳醉梦声
  • ES6 中 Promise 详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的...

    柳醉梦声
  • TCP、UDP 的区别,三次握手、四次挥手

    |TCP 面向连接(如打电话要先拨号建立连接)|UDP 是无连接的,即发送数据之前不需要建立连接|

    柳醉梦声
  • 深入理解和探究Java类加载机制

    java.lang.ClassLoader类的基本职责就是根据一个指定的类的名称,找到或者生成其对应的字节代码,然后从这些字节代码中定义出一个Java 类,即 ...

    lyb-geek
  • Java 类加载机制详解

    Java 虚拟机一般使用 Java 类的流程为:首先将开发者编写的 Java 源代码(.java文件)编译成 Java 字节码(.class文件),然后类加载器...

    哲洛不闹
  • Java 类加载机制详解

    Java 虚拟机一般使用 Java 类的流程为:首先将开发者编写的 Java 源代码(.java文件)编译成 Java 字节码(.class文件),然后类加载器...

    Java团长
  • JVM的特性,通过代码来揭秘类加载器

    这是一个类加载的流程,前面所说的过程,就是编译器将Test.java文件编译为了Test.class文件。

    良月柒
  • 关于真机测试的几点感悟

    陨石坠灭
  • java类加载器加载机制

      Java的安全模型是的Java成为适于网络环境的技术——《深入Java虚拟机》

    the5fire
  • Java虚拟机-02:类与类加载器

    摘要:本文主要介绍类加载器、类的唯一性、启动类加载器、拓展类加载器、应用程序类加载器。

    IT云清

扫码关注云+社区

领取腾讯云代金券