2020-08-11 html layout + css loading of css + js blocking of JS + user behavior information collection of soft skills

2020-08-11 Subject source: http://www.h-camel.com/index.html

[html] What do you think a good layout should look like? What are the points to pay attention to?

Static layout: static window size changes, the size and position of elements will not change;

Adaptive layout: The size of the form changes, the size of the element does not change, and the position changes;

Flow layout: The size of the flex form changes, the size of the element changes, and the position remains unchanged;

Responsive layout: The size of the form changes, and the size and position of the elements change;

[css] Will css loading block DOM tree parsing?

CSS is regarded as a resource that blocks rendering.

The loading of css will not block the parsing of the DOM tree, but it will block the rendering of the DOM tree; it will not block the download of js, but it will block the execution of js.

Improve user experience: CND hosting; css compression; reasonable use of cache;

[js] Under what circumstances will js block?

1. CSS blocking: When css is followed by embedded js, the css will not block the download of the following resources, but will block the execution. Need to put embedded js in front of css to not block.

The root cause: the browser will maintain the order of css and js in the html, the style sheet must be loaded and parsed before the embedded js is executed, and the embedded js will block the subsequent resource loading, which shows that it is css blocking.

2. JS blocking: Embedded js will block the presentation of all content, while external js will block the display of the following content.

So, put the script at the bottom. <link>还是放在head中,用以保证在js加载前,能加载出正常显示的页面。<script>标签放在</body>前.

Reference article: https://www.cnblogs.com/bibiafa/p/9364986.html

[Soft skills] How does the front end collect user behavior information? What are the methods?

How does the front end do statistical analysis of user behavior https://www.jianshu.com/p/7f7185786cc1

Front-end data collection and burying points to track user behaviors https://www.cnblogs.com/dhsz/p/9303753.html

Guess you like

Origin blog.csdn.net/vampire10086/article/details/108450056