Asynchronous loading css resources
Plus the first screen to open the page display speed front end so that we have been pursuing the goal, and css resources in these optimizations is also indispensable.
A site may have a part css resources is a must, he needs to be loaded completely finished before page rendering and parsing and html together, this is temporarily unable to play tricks, but we can put some non-critical css asynchronous technology, that is, asynchronous loading.
There are many tools to achieve this effect, such as loadCSS
The asynchronous loading to say this, in fact, is loadCSS used in the following code:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">The code is simple, clever you, one can read:
Initialized for the print type, when loaded, the media set to full application platform
But how about this relationship and asynchronous get it?
Because the browser will determine whether the current resource application, and then decide the priority, as we have adopted it is a rare type of print, so the browser identification, will not affect the way the current page rendering load according to media: asynchronous
Some may talk about preload, preconnection, prefetch such rel, but because browser support vary, so lines need more operations to make up for their compatibility.
And they are different, preload can cause the browser to load the resource priority becomes the highest, loadCSS will be changed to low.
(Finish)
Some common operations
- disable cache: analog subscriber first visit
- replay xhr: repeatedly transmitting xhr, an interface for debugging
- Right => clear browser cache: manually clear the cache (also the option to clear cookies)
- offline: fast commissioning pwa
- supports sorting network pane, click the tab left or right to select more options
- initiator: View the current resources and their sources initiated dependent resources. Hold down the shift can be used to view the resource, green for initiating source, red for dependent resources.
DOMContentLoaded & load: get the page parsing completion time and resources to load time
Blue represents DOMContentLoaded, red represents load
公式：loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
资源总大小和资源总数
常用功能字段解释
network pan的tab字段解释：
- waterfall: 每个请求活动期间的可视化分解图示
initiator：触发当前请求的来源，下面有几种常见的触发方式
- parser：通过谷歌的html解析得到的资源，进而发起请求
- redirect：http重定向
- script：由于执行js，而引入的资源。
- other：一些其他的处理和动作，比如我们访问一个地址，这个地址本身对应的域名资源，就是other。这属于常见的两种之一。一是输入地址访问，二是点击跳转。
通过waterfall我们可以知道我们的页面资源和请求是否是合理的。一个良好的网站的waterfall应该类似于下面这样：
waterfall的时间分解各阶段解释：
- queueing： 浏览器把当前请求放入队列的时间。
- stalled：当前请求在队列中，但是没有执行的搁置时间。
- request sent： 请求发送消耗时间。
- waiting(TTFB)：浏览器接收到服务端返回的首个字节的时间。TTFB的意思是首字节时间(Time to First Byte)
- content Download：浏览器接受返回内容所花费时间
- queued at：理解为准备插入队列时机
- started at：任务开始时机
公式1: started at = queued at + queueing
公式1: 当前请求花费总时间 ≈ queueing + stalled + request sent + waiting + content download