你一定要经历的 web 页面性能优化之旅 · 09
节流：多少秒只触发一次 防抖：多少秒后触发,flag 是立即执行 防抖节流结合版：第一次能触发，最后一次也能触发 图片懒加载 https://github.com/dirkhe1051931999/common-demo/tree/master/canvaslazyloading
最新文章
分类全部
标签全部
你一定要经历的 web 页面性能优化之旅 · 08
WebP 相对于 PNG、JPG 有什么优势？--- https://www.zhihu.com/question/27201061 webp 的兼容写法 安卓支持 webp，ios 不支持 webp --- https://caniuse.com/#search=webp ios 下要使用 webp 可以导入下面的库 webpjs--- https://github.com/obartra/we…
你一定要经历的 web 页面性能优化之旅 · 07
PWA：渐进式网页应用程序；关键技术：Service Worker、Manifest 、Push Notification；直观上的体现：无网络的时间，可以立即加载出数据和页面 这次主要实践 Service Worker Service Worker Service Worker(SW)是一个离线缓存文件，SW 作用于浏览器与服务器之间，可以理解为一个代理服务器 具体的 Service Worke…
你一定要经历的 web 页面性能优化之旅 · 06
低耦合、高内聚 低耦合、高内聚是软件工程中的术语，不限于编程语言 简单来说：低耦合是说模块之前耦合度(依赖关系)要降低，强调模块之间；高内聚是说模块内部要高度聚合(模块功能要专一)，强调模块内部 减少前端代码耦合 颗粒度 颗粒度指代码的清晰程度 粗颗粒：代码细节少，代码是抽象概括 细颗粒：代码细节多，容易了解代码的全貌 当然，不能划分太极端 吞吐量、吞吐率 吞吐量：一次性能测试过程中网络上传输数据…
你一定要经历的 web 页面性能优化之旅 · 05
上图是用户监测性能模型的不同阶段，可以看出，页面加载被定义成很多个阶段，每一个阶段都对应有 Performance Timing 页面性能指标 :衡量网络链路和服务器响应性能时间 :带宽时间 :打开页面开始到页面开始有东西呈现的时间（TTFB+HTML 下载时间+头部资源加载时间） 公式 页面开始渲染的时间点-页面开始请求时间点 如何获取 (chrome.loadTimes().firstPain…
你一定要经历的 web 页面性能优化之旅 · 04
nginx 我也只是会安装和卸载，只是简单的了解反向代理与负载均衡 反向代理 :以代理服务器来接受 internet 的连接请求，将请求转发到内部网络的服务器，再将请求结果返回给 internet 请求连接的客户端，这个代理服务器对外表现就是一个 。有 AB 两台服务器，用户会先访问 A 服务器，A 服务器再去请求 B 服务器的内容并返回给用户，但是用户看不到是请求 B，只看到请求 A，那么 A …
你一定要经历的 web 页面性能优化之旅 · 03
，涵盖的知识面非常广，如果只是死记硬背，根本无法理解其中的流程与原理，我学习的方式是，先整体明白有哪些流程，然后逐个流程慢慢理解 整体过程 浏览器缓存 彻底理解浏览器的缓存机制 DNS 解析 DNS 域名解析 TCP 链接 TCP 连接 HTTP 请求与响应 HTTP 请求与响应 浏览器解析渲染页面 浏览器自上而下逐行解析 HTML、词法分析、语法分析、构建 DOM 树 当遇到 CSS 外链时，主…
你一定要经历的 web 页面性能优化之旅 · 02
performance.timing 各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时 performance.timing 对象 performance.timing.navigationStart：当前浏览器窗口的前一个网页关闭，发生 unload 事件时的 Unix 毫秒时间戳。如果没有前一个网页，则等于 fetchStart 属性。 performance.timing.u…
你一定要经历的 web 页面性能优化之旅 · 01
Network 面板 是否开启 network 的日志，灰色未开启，红色已开启 点击清除 network 日志 是否开启捕获屏幕，灰色未开启，蓝色已开启，开启后的效果如 11 是否开启过滤 是否使用更大区域显示请求记录 是否使用概括显示请求记录 是否对网络请求分组 是否跳转页面后保留旧的网络请求 是否开启缓存开关 filter 区域，控制 request 具体显示哪些内容 屏幕捕获区域，以时间为轴…
已显示 9 / 9 篇文章
也可以浏览：全部文章档
确认评论邮箱
邀请制评论