Caching all HTML and connecting JS “on the go”
Once I did a terrible thing - I looked at the source code of the Yandex main page and thought about something wrong here. I see 5 latest news headlines, a few pictures, a search field, a link, and this is the question:
Where is the 700Kb, which require 1.56s of my time? (according to Safari 7.0.3 Web Inspector)
We all go through the sites, get kilobytes of useful information for ourselves or generally perceived by a person and spend at that speed of 3 Mbit / s seconds. In this post I will try to describe how you can transfer only the kilobyte that a person needs, and everything else is either cached or only loaded when needed.
It would be nice to cache all HTML or at least most of it - you can use block caching for this: we divide the page into blocks and put these blocks into a separate JS file, which the user then remains. The advantage of this approach is simplicity, but in our case there will be a non-trivial solution - everything needs to be improved a little.
')
A page can not just be divided into blocks, and everything in the body can be replaced with an XML structure, observing all parenting relationships - radically and efficiently. No styles and frills. For example, take the Yandex code to display 5 news:
It turned out the following:
Each news item now becomes one tag. If we present the whole page in a similar way, then we’ll get just some kind of a mixture of HTML and XML, you can call it [X] HTML, because in fact it is HTML, only now it is extensible - in the truest sense of the word. Suppose a page is represented in XML, now for each block I add its template to the JS file - how it should look like in reality. By analogy with PHP, I selected '$' in templates for variables that should be taken from attributes and $ HTML $ - innerHTML tag.
The result is that all HTML is placed in the JS file, and on the page itself only what the user needs is, but this is only half the story, because the main page traffic, in addition to images, is JS.
If the JS file weighs 100-200Kb, then its download is about 0.5s. It will load and remain in the cache, but the delay before its execution will still remain - this is due to the fact that the JS file is first loaded, then the whole is analyzed and only after that it starts to run. This feature allows, for example, to call a function before it is declared. The larger the file - the longer the analysis, up to 300ms, and sometimes more. There is a very good way to shorten the time - to make the file discrete: split it into separate functions or just parts and connect them when they are needed. They will also be cached, only the time of their analysis will be much less - within 1-2ms.
Suppose we have a function that connects JS files in real time, for example, like this:
For her, there are several requirements. Firstly, it must remember already connected functions and files, secondly it must support loading from different directories, as well as be asynchronous. To specify a directory, you can use the global variable includesrc = “ any site.ru / directory ” for connecting files and “ any site.ru / directory / function_ ” for functions — id (postfix) will be added to this path. Suppose you need to split a file into several parts or functions, then the resulting files should be something like this:
Thus, in the file with the function the part of the file name must be indicated, and when the file is connected, its name must be indicated, but without the extension.
I wrote above how you can render all HTML and cache, transfer only the necessary information in XML, then it is written how you can reduce the delay before executing JS to a few milliseconds, but there is no solution to the problem - this is it. It can be called ESS - Easy Stylesheets, similar to CSS. Consists of 2 + 1 functions. For ESS there is documentation in which syntax and illustrative examples of use are described.
Auxiliary function g (a, b, c); - Searches object by CSS lines of view. a - with which tag / # id / @ name / .class to search for an object, b - in which object to search for and with - the flag 0/1, indicating whether it is necessary in any case to return an array.
ess (a, b, ch, f); - the function that replaces the XML blocks on the page with templates from the JS file, it must pass a - the DOM element and b - the pattern string, ch - the character that highlights the variables and f - the function to be called after completion. For the example above, this is:
inc (); - a function that allows you to asynchronously connect any file from any domain and then continue working. It should dwell on it. Here is an example from the file connection documentation:
Specifies the full path to the directory and the file name - very similar to require.js. The difference is that you can connect not only files, but also functions:
This is also an example from the documentation, but not one example shows the advantages of using this approach - it requires a good Demo and a detailed comparative analysis, which will be in the next article. In it, I will try to take into account all your advice and comments, since this is only my first article - from the sandbox.
Where is the 700Kb, which require 1.56s of my time? (according to Safari 7.0.3 Web Inspector)
We all go through the sites, get kilobytes of useful information for ourselves or generally perceived by a person and spend at that speed of 3 Mbit / s seconds. In this post I will try to describe how you can transfer only the kilobyte that a person needs, and everything else is either cached or only loaded when needed.
First in line for optimization - HTML
It would be nice to cache all HTML or at least most of it - you can use block caching for this: we divide the page into blocks and put these blocks into a separate JS file, which the user then remains. The advantage of this approach is simplicity, but in our case there will be a non-trivial solution - everything needs to be improved a little.
')
A page can not just be divided into blocks, and everything in the body can be replaced with an XML structure, observing all parenting relationships - radically and efficiently. No styles and frills. For example, take the Yandex code to display 5 news:
<div class="b-tabs__items"> <div id="tabs088905610376_0"> <ul class="b-news-list"> <li class="b-news-list__item"> <span class="b-news-list__item_num">1.</span> <a class="b-news-list__item-link" href="http://news.yandex.ru/yandsearch?cl4url=www.rg.ru%2F2014%2F05%2F06%2Fserdukov-anons.html&lang=ru&lr=172" onmousedown="cp('v12.news.news.links.1',this)"> </a> </li> ... </ul></div></div> It turned out the following:
<news> <tab ids="tabs088905610376_0"> <newsr num="1" pre=" " src="http://news.yandex.ru/yandsearch?cl4url=www.rg.ru%2F2014%2F05%2F06%2Fserdukov-anons.html&lang=ru&lr=172" onmd="cp('v12.news.news.links.1',this)" ahr=" "> ... </tab> ... </news> Each news item now becomes one tag. If we present the whole page in a similar way, then we’ll get just some kind of a mixture of HTML and XML, you can call it [X] HTML, because in fact it is HTML, only now it is extensible - in the truest sense of the word. Suppose a page is represented in XML, now for each block I add its template to the JS file - how it should look like in reality. By analogy with PHP, I selected '$' in templates for variables that should be taken from attributes and $ HTML $ - innerHTML tag.
var news='<div class="b-tabs__items">$HTML$</div>'; var tab='<div id="$ids$"><ul class="b-news-list">$HTML$</ul></div>'; var newsr='<li class="b-news-list__item"><span class="b-news-list__item_num">$num$.</span> $pre$ <a class="b-news-list__item-link" href="$src$" onmousedown="$onmd$">$ahr</a></li>'; The result is that all HTML is placed in the JS file, and on the page itself only what the user needs is, but this is only half the story, because the main page traffic, in addition to images, is JS.
JS Optimization
If the JS file weighs 100-200Kb, then its download is about 0.5s. It will load and remain in the cache, but the delay before its execution will still remain - this is due to the fact that the JS file is first loaded, then the whole is analyzed and only after that it starts to run. This feature allows, for example, to call a function before it is declared. The larger the file - the longer the analysis, up to 300ms, and sometimes more. There is a very good way to shorten the time - to make the file discrete: split it into separate functions or just parts and connect them when they are needed. They will also be cached, only the time of their analysis will be much less - within 1-2ms.
Suppose we have a function that connects JS files in real time, for example, like this:
inc({ // / name:'id' – name- ( ), id- },function() { //JS }); For her, there are several requirements. Firstly, it must remember already connected functions and files, secondly it must support loading from different directories, as well as be asynchronous. To specify a directory, you can use the global variable includesrc = “ any site.ru / directory ” for connecting files and “ any site.ru / directory / function_ ” for functions — id (postfix) will be added to this path. Suppose you need to split a file into several parts or functions, then the resulting files should be something like this:
// , ludes["id"]=function(a1, .., aN){ // } // : // ( ) ludes["id"]++;//id - , Thus, in the file with the function the part of the file name must be indicated, and when the file is connected, its name must be indicated, but without the extension.
Ess
I wrote above how you can render all HTML and cache, transfer only the necessary information in XML, then it is written how you can reduce the delay before executing JS to a few milliseconds, but there is no solution to the problem - this is it. It can be called ESS - Easy Stylesheets, similar to CSS. Consists of 2 + 1 functions. For ESS there is documentation in which syntax and illustrative examples of use are described.
Auxiliary function g (a, b, c); - Searches object by CSS lines of view. a - with which tag / # id / @ name / .class to search for an object, b - in which object to search for and with - the flag 0/1, indicating whether it is necessary in any case to return an array.
ess (a, b, ch, f); - the function that replaces the XML blocks on the page with templates from the JS file, it must pass a - the DOM element and b - the pattern string, ch - the character that highlights the variables and f - the function to be called after completion. For the example above, this is:
ess(g('newsr'), newsr, '$', function() { ess(g('tab'), tab, '$', function() { ess(g('news'), news); });}); inc (); - a function that allows you to asynchronously connect any file from any domain and then continue working. It should dwell on it. Here is an example from the file connection documentation:
// includesrc='http://fous.name/ess/';// inc({ file1:'file1.js' }, function() { ggg(); }); // file1.js function ggg() { alert(' .'); } ludes["file1"]++; Specifies the full path to the directory and the file name - very similar to require.js. The difference is that you can connect not only files, but also functions:
includesrc='http://fous.name/ess/function_'; inc({ goodjob:'1'// "1" - , ludes }, function() { goodjob();// }); // function_1.js ludes["1"]=function(){alert(' .');} This is also an example from the documentation, but not one example shows the advantages of using this approach - it requires a good Demo and a detailed comparative analysis, which will be in the next article. In it, I will try to take into account all your advice and comments, since this is only my first article - from the sandbox.
Source: https://habr.com/ru/post/222079/
All Articles