1、 资源越小下载的越快,压缩文件(html,css,js等)
服务器端的资源文件被压缩的越小,客户端在下载的时候,就越快
图片优化,不用的时候不加载(懒加载),选择合适的图片类型
2、 路径上,通过CDN(content delivery network), 内容分发网络,让资源下载的更快
使用CDN的好处
采用CDN的时候,不带cookie,可以减少请求头的大小
减少主域的压力
实现静态资源和动态资源分离
同一个域名下请求的数量是有限的,通过浏览器工具的network可看到request数量
安全问题,但主域不工作的时候,CDN可以响应请求
3、 浏览器缓存
每次请求时,不是重新去请求数据,而是从缓存中读取数据。具体参考http缓存
pageSpeed 重点测试页面的加载速度
首次内容绘制FCP(frist conntentful paint) 浏览器将第一个dom渲染到屏幕的时间,也就是通常所说的白屏时间
文档加载时间DCL(domContentLoaded)
lighthouse 侧重于用户体验
首次有意义的绘制FMP(frist meaningful paint) ,就是说主要内容出现在页面上的时间,用户希望看到的主要内容出现在屏幕上的时间
首屏出现后,即FCP出现后,尽快出现有意义的绘制,即尽快出现FMP
通过计算关键元素的渲染时间来测量FCP,比如测量主要css的加载完成时间,或者测量关键图片的加载完成时间等等。
如何测量呢,通过新的APT,如PerformanceObserver, PerformanceEntry可计算加载完成时间。
浏览器控制台中newtork中的disable cache 顾名思义就是不允许缓存
意思就是浏览器端,肯定去发送http请求,并且请求头中带上:
'cache-control: no-cache'; 这样一定去请求响应
通过浏览器控制台去进行性能分析的时候,经常查看的地方,主要有瀑布图(Timing),蓝线与红线(DOMContentLoaded,Load的时间)
通过查看瀑布图,可看到是在哪些地方花时间了,然后看能不能在这里进行优化
DOMContentLoaded的时间: html文档被加载和解析成DOM的时间
Load的时间: 所有资源被加载完成, 包括css,js,图片,视频,音频等
首屏时间指的是:在用户没有与浏览器交互的情况下,在浏览器上看到完整内容并且达到可以交互的状态的这一段时间。
优化css的发送过程:
如果css很大,超过15kb, 则需要通过外联加载,
如果很小,比如不到1kb, 可是直接放在head中,通过inline的方式加载进来,(可通过构建工具将css导入到head中)
这样可以加速首屏的时间。
都说js放在底部可以让页面尽快呈现,理由是什么呢。
渲染引擎取得内容之后,在进行渲染的时候,
1、先解析html构建dom树,同时解析css构建规则树
2、通过第一步生成的dom树和规则树构建render树
3、布局render树
4、根据布局绘制,最后显示页面
我的疑惑:
body底部的js如果没有被执行完成,DOM树能生成码?
理解: DOM树的构成是由解析器从上至下,一步一步输出的,DOM树构建的同时,浏览器还会构建呈现树。
也就是说,浏览器每解析一个节点的同时,也开始构建呈现树,只要这个节点被解析完成,就可以通过js获取这个节点。
当解析完html,dom content loaded完成。
也就是说,出现在js前面的dom节点,可以通过js获取前面的dom进行相关的操作,
也就是说js的执行不需要等DOM树全部被解析完。
也就是说DOM树完成之前需不需要等待body中的js执行完?
正常情况下,DOM树完成之前需要等待body中的js执行完,也就是说DOM content loaded完成之前,需要所有的js执行完。
除非script是defer或者是async加载的,就不会影响DOM的生成。
script标签放在body底部加载的话,为什么不会影响dom树的构建?
script标签的位置,不影响DOM content loaded的时间。
但是会影响首屏的时间。
首屏的时间就是输入url后,达到与浏览器进行交互的时间。
首屏的内容被渲染出来,便不一定是DOM content loaded已经完成。
因为渲染和DOM解析是同步进行的,首屏需要的内容的DOM被解析成功,并且首屏需要的内容的css被解析完,
到此为止的渲染树被构建,进而布局,开始绘制,首屏需要的内容被绘制完成则就是首屏的时间。
58 天前