书架
✨

书架

=一个知识书库=

性能优化之二：用户体验的问题分析与定位
3398 字12 分钟

性能优化之二：用户体验的问题分析与定位

# 前言 ![image.png](http://www.lixianglong.cn/bg_store/img/content/899533f079c24cd3b396ac54b185bc25~tplv-k3u1fbpfcp-jj-mark_3024_0_0_0_q75.awebp#?w=1804&h=1146&s=355909&e=png&b=ffffff) <!--more--> ## 用户角度的性能指标 ### 用户感知的指标 - **感知的加载速度**：网页加载并将其所有视觉元素呈现到屏幕的速度 - **加载响应速度**：网页加载和执行任何必需的 Ja
技术设计,前端,js
more...
性能优化之渐进式图片加载
1497 字5 分钟

性能优化之渐进式图片加载

如果一个网页中包含比较多的图片,在页面加载时,会严重拖慢整个页面的加载速度,这就是我们今天要解决的问题. 这篇文章聊一下如何去优化图片,提高页面的加载速度.文章中演示的例子,只是将几张大图片简单的展示出来,通过这个例子去展示如何优化. 例子的源码在 [github.com/XYShaoKang/…](https%3A%2F%2Fgithub.com%2FXYShaoKang%2Fimage-optimize) 中,可以克隆到本地进行调试,在线预览地址 [xyshaokang.github.io/image-optim…](https%3A%2F%2Fxyshaokang.githu
技术设计,前端,js
more...
性能优化之前端首屏时间
678 字3 分钟

性能优化之前端首屏时间

## 项目背景 中小项目，Vue-cli3 + vue2 + webpack4 ## 目标 缩短白屏时间，用户能够更快的看到我的页面！ > 白屏时间：从打开页面到看到页面，中间白屏停留的时间。 ## 方向 1.减少资源体积，从而缩短请求时间 2.减少资源请求个数，从而缩短等待时间 <!--more--> ## 准备工作 ### 如何知道打包体积？ 打包构建的时候，使用--report命令： ```bash vue-cli-service build --report ``` 打包结束后，会在dist目录里面生成一
技术设计,前端,js
more...
性能优化之三：网络层优化
4613 字16 分钟

性能优化之三：网络层优化

# 前言 前面篇章我们分析了“从输入URL到页面加载完成”的完整链路，主要经历“网络请求、浏览器渲染”两大过程，那么优化方案我们可以围绕这两方面展开探索，此篇我们先来看“网络层面”的优化方案。正文开始前，我们先思考如下问题： > 1. “网络层面”可以从哪些方面着手做性能优化？ > 2. 前端开发可以介入“网络请求”哪些环节的性能优化？ <!--more--> # 网络请求的关键环节 我们先来回顾下“网络请求”会经历“重定向、查询缓存、DNS解析、TCP连接、HTTP请求”5个关键环节，具体如下图： ![](http://www.lixianglong.cn/
技术设计,前端,js
more...
性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率
4697 字16 分钟

性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率

### 什么是Web Worker 15年前，也就是2008年，`html`第五版`html5`发布，这一版的发布，提供了不少新的好用的功能，如： - **Canvas绘图** - **拖拽drag** - **websocket** - **Geolocation** - **webworker** - 等... 笔者之前说过：**`一项新技术新的技术方案的提出，一定是为了解决某个问题的，或者是对某种方案的优化`** 那么`Web Worker`这个新技术解决了什么问题？有哪些优化价值呢？ 让我们继续往下看... <!--more--> #
技术设计,前端,js
more...