2020-08-03 Source of topic: http://www.h-camel.com/index.html
[html] Will there be any problems when using application/xhtml+xml in the page?
The conditions of use are strict, there must be a head body tag and each tag must be closed.
Compatibility issues, some old browsers do not support, in fact, any latest browser will support application/xhtml+xml media type. Most browsers also accept XHTML documents sent as application/xml.
[css] What are the disadvantages of rem?
rem is the length unit, 1 rem = the font-size value of the root element html. When all the elements of the page are in rem units, then only need to change the font-size value of html to make all elements scale up and down in proportion, so we only need to write a small piece of js code to change the font-size value of html according to the screen width. Flexible layout can be achieved. This method is really convenient and compatible. It is currently a very mainstream flexible layout scheme.
Disadvantage 1: The font-size value of the root element is strongly coupled, and the layout will be disordered when the system font is enlarged or reduced
Disadvantage 2: A piece of js code needs to be inserted into the header of the html file
A better choice is to implement flexible layout vm vh with adaptive units, but there are also compatibility issues. Viewport is the size of the browser’s visible area
vw：1% of viewport’s width
vh：1% of viewport’s height
Comparison of vw unit and percentage% unit So what is the difference between 100vw and the width: 100% we usually use?
The percentage% is calculated based on the width or height of the parent element, while vw vh is calculated based on the viewport and will not be affected by the width and height of the parent element. 100vw includes the width of the page scroll bar (the page scroll bar is within the scope of the viewport, and 100vw certainly includes the page scroll bar width). But when the body or html is set to width:100%, the width of the page scroll bar is not included. In other words, 100vw will be wider than 100% with a vertical scroll bar. Then there will be a problem: when the PC side uses the vw unit, if the page content exceeds the length of one screen, a vertical scroll bar appears, and there is an element width: 100vw, it will cause a horizontal scroll bar, because the element (100vw + scroll Bar width) exceeds the viewport width. (The scroll bar on the mobile terminal does not occupy a position, so there will be no such problem.) However, the PC terminal generally does not require flexible layout. It is better to use width: 100% as much as possible.
Why is the rem layout more mainstream than vw? compatibility
Since the rem layout has drawbacks, strong coupling with font-size will cause side effects. Compared with the vw layout, the code logic is purer and clearer. Why is the mobile rem layout more mainstream than the vw? Let's take a look at the compatibility of vw and rem.
In contrast, vw unit compatibility is slightly worse than rem, and it is fully supported by ios8, Android 4.4 and above. This is why the rem layout has been more popular before.
to sum up
At present, there are very few users below ios8 and Android 4.4. According to caniuse, this part of users in China is only 1.2%, which is already very low. It is estimated that the mobile phones of this part of users will only make calls and will not use the Internet ( It is still necessary to decide whether to use vw based on user data analysis of their respective products. If your page is only applicable to WeChat and QQ, you can definitely use vw units with confidence. You can also use vh to deal with some special scale screens, completely get rid of the side effects of using rem, and delete the HTML header to calculate the font-size That js code makes your code more pure.
Original: https://blog.csdn.net/huangm_fat/article/details/80090245
[js] What is the difference between ArrayBuffer and Blob?
1. The ArrayBuffer object represents a section of memory that stores binary data. It cannot be read or written directly. It can only be read and written through views (TypedArray view and DataView view). The function of the view is to interpret binary data in a specified format.
const buffer = new ArrayBuffer(32) // An ArrayBuffer object of a specified size, the content is initialized to 0; the instantiated buffer object occupies 32 bytes.
buffer.byteLength; // 32; byteLength represents the byte length of the memory occupied by the current instance, and cannot be changed once it is created.
2. Blob object, binary large object binary large object
The Blob object represents the data content of a binary file, which is used to read and write files and manipulate binary files. For example, the content of a picture file can be read and written through the Blob object;
Different from ArrayBuffer: Blob is used to manipulate binary files; ArrayBuffer is used to manipulate memory.
const leoBlob = new Blob(array [, options]);
The original text is more detailed: https://zhuanlan.zhihu.com/p/97711340
[Soft skills] With the gradual popularity of 2K and 4K screens, what changes will there be for the front end?
The main difference of 2K 4K screen is the resolution and definition. The impact on the front end is also the adaptation problem
The horizontal resolution of a 2k screen bai is about 2000 pixels, and the most standard 2K screen resolution is 2048×1024.
The physical resolution of 4k screens reaches 3840x2160 (4Kx2K) and above, and the cost is relatively high, and it has not been popularized.