摘要: https://github.com/laoqiren/web-performance 待全面学习 阅读全文
posted @ 2019-11-26 21:28 Syw_文 阅读(188) 评论(0) 推荐(0)
摘要: 图像优化 在Web应用中,图片占据了很大一部分流量,所以对图像的优化必不可少。 图片格式 图片格式有许多,不同的格式在是否支持透明,是否支持动画,压缩方式,兼容性等方面存在差别。先放一张来自谷歌开发者文档的图: 矢量图像(待查什么是矢量图像) 概念:也称为面向对象的图像或绘图图像,在数学上定义为一系 阅读全文
posted @ 2019-11-26 21:27 Syw_文 阅读(909) 评论(0) 推荐(0)
摘要: 一、静态资源 包括:html,CSS,js以外,还包括各种 图片资源、音频资源、字体资源等,由于有限的带宽和延迟影响,所以需要对资源做一些优化。 注:都可对如上的静态资源进行压缩,且加缓存来实现 二、资源压缩 概念:减小资源大小的过程叫做资源压缩。针对不同类型的资源有不同的压缩技术。本文主要总结文本 阅读全文
posted @ 2019-11-26 21:03 Syw_文 阅读(1465) 评论(0) 推荐(0)
摘要: 提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。 资源预加载:是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。 引用 Patrick Ha 阅读全文
posted @ 2019-11-26 20:16 Syw_文 阅读(1018) 评论(0) 推荐(0)
摘要: 提到前段性能优化,不可避免的都会想到如下的解决方案: (1)减少HTTP请求(合并css、js,雪碧图/base64图片、CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。) (2)压缩(css、js、图片等前端资源皆可压缩,通常 阅读全文
posted @ 2019-11-26 18:55 Syw_文 阅读(210) 评论(0) 推荐(0)
摘要: CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容。 DOM(Document Object Model)是一个与语言无关的、用来操作XMl和HTML文档的应用程序接口。在浏览器环境下,我们是通过Javas 阅读全文
posted @ 2019-11-26 18:51 Syw_文 阅读(876) 评论(0) 推荐(0)
摘要: 一、缓存位置 在浏览器开发者工具的 Network 的 Size 栏会出现的三种情况: from Service Worker from memory cache from disk cache 真正的网络请求(显示资源的具体大小,示例:15.6KB) 1、Service Worker 本质是作为服 阅读全文
posted @ 2019-11-26 18:34 Syw_文 阅读(1556) 评论(0) 推荐(0)