1. What is diff algorithm?
After we modify the text content, a new virtual DOM will be generated. There are certain differences between the old and new virtual DOM. If we can quickly find the difference between the two objects, we can minimize the update view, "diff algorithm" "It is specially used to compare the two virtual DOM objects.
The purpose (essence) of the diff algorithm: find the differences and minimize the updated view.
process:
When the data changes, the internal setter method will be triggered, and the dep.notify method will be further triggered to notify each data user. The patch method is executed. The patch method receives two parameters (old and new virtual nodes). First, it is judged internally whether Similar tags. If they are not similar tags, there is no need to compare them. Just replace them directly. If they are similar tags, execute the pacthvnode method. In this method, you also need to judge whether the old and new virtual nodes are equal. If they are equal, just return directly. If they are not equal, they need to be compared on a case-by-case basis. The principle of comparison is based on the result of the new virtual node;
Case 1:
Both the new and old nodes have text nodes, so just replace them with new text nodes.
Case 2:
The old one has no child nodes, and the new one has child nodes, so just add the new child node directly.
Case 3:
The old one has child nodes, but the new one has no child nodes, so just delete the old child nodes.
Case 4:
Both old and new nodes have byte nodes, so their child nodes need to be compared (updateChildren).
updateChildren method
This method stipulates a comparison method only at the same level, which can reduce the number of comparisons and maximize the comparison performance. Moreover, the head-to-tail pointer method is used in peer comparison.
First, the oldS of the old virtual node is compared with the newS of the new virtual node. If the comparison is not successful, oldS will be compared with newE. If the comparison is still not successful, oldE will be compared with newS. If the comparison is still not successful, oldE will be compared with newE.
The principle of comparison is to perform comparisons in sequence according to the above order. When the comparison is successful, the current comparison will be exited, and the rendering result will be based on the result of the new virtual node. After each successful comparison, the start of the successful comparison will move to the right, and the end will move to the left. During the movement, when start reaches the right side of end, the comparison will be terminated.
If there is no successful match in the above four cases using the head and tail pointer method, the key values of the old and new virtual nodes will be looked at. If the keys are the same, they will be reused.
2. Closure
A bridge connecting the inside and outside of a function
Closures have 2 characteristics:
1. Functions are nested functions, and internal functions refer to external function variables.
2. Internal functions can access variables and parameters of external functions
Closures have 2 functions:
1. Prevent variables and parameters from being recycled by the garbage collection mechanism (variable persistence)
2. Prevent variables and parameters from being polluted by the outside (variables are only accessible inside the closure)
3. Realize the privatization of data. It can be used outside but cannot be modified.
Closure risk:
Misuse may cause memory leaks
Application of closure:
1. Implement js modularization
2. Encapsulate private variables
3. Anti-shake and throttling
Anti-shake: The user frequently triggers an action, but I only want it to take effect the last time (such as user input)
Throttling: For example, monitoring scroll bars and controlling how often a method is executed has a fixed frequency.
The difference between throttling and anti-shake:
Does a closure have to have a return? , Will closures definitely cause memory leaks?
no
When is return used?
3. What are prototypes and prototype chains?
prototype:
Every function has a prototype attribute, called the prototype.
Because the value of this attribute is an object, we also call it a prototype object.
effect:
1. Some properties and methods are stored in it, that is, our properties and methods are mounted on the prototype.
2. Inheritance can be realized through prototype in js
__proto__:
Every object has a __proto__ attribute, which points to its prototype object.
4.What is the difference between transition and animation in css3?
transition is the transition attribute
animation is the animation attribute
//1、动画状态不同
1.transform过渡只有开始和结束两种状态；
2.animation有开始，过程，结束多种状态
//2、动画触发方式不同:
1. CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或 借助JavaScript来触发 。
2. animation 不但可以使用上面的方式触发, 更重要的是可以自动触发 。
//3、功能点（属性）不同
animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。
//transform和animation的相同点
1. 从整体来看，animation 和 transition 想做的事情都是一样, 通过控制属性变化的过程也, 实现动画; 都是立足于控制本身 dom 的 css 属性变化过程, 来实现动画的视觉效果。
2. 他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。5.What is the difference between for...in and for...of?
1. Loop array :
Both for in and for of can loop through arrays. For in outputs the index subscript of the array, while for of outputs the value of each item in the array.
2. Loop object:
for in can traverse objects, for of cannot traverse objects, it can only traverse objects with iterator interface, such as Set, Map, String, Array
const object = { name: 'lx', age: 23 }
// for ... in
for (const key in object) {
console.log(key) // 输出 name,age
console.log(object[key]) // 输出 lx,23
}
// for ... of
for (const key of object) {
console.log(key) // 报错 Uncaught TypeError: object is not iterable
}
3. Array object:
const list = [{ name: 'lx' }, { age: 23 }]
for (const val of list) {
console.log(val) // 输出{ name: 'lx' }, { age: 23 }
for (const key in val) {
console.log(val[key]) // 输出 lx,23
}
}
6. Methods to traverse arrays
1. for in
var arr = ['a', 'b', 'c', 'd'];
for (var key in arr) {
console.log(arr[key] + '---' + key);//key是遍历后的索引
}result:
2. map()
var arr = [1,3,4,7,9,5]
arr.map ((res,index) => {
console.log(res,index)// res是数组中的每个元素，index是该元素在数组中的索引
})
3. forEach()
The forEach() traversal method is written the same as the map() method, but there are still many differences.
- map processes each item of the array and returns a new array after the processing is completed, while forEach simply loops without a return value and cannot be processed.
- In terms of performance, map execution time is shorter than forEach.
- It is recommended to use map when creating a new array. You do not need to make a new array, but when you want to do something with the data, use forEach.
var arr = [1,3,4,7,9,5]
arr.forEach ((res,index) => {
console.log(res,index)// res是数组中的每个元素，index是该元素在数组中的索引
})
4. for of （ES6）
var arr = ['a', 'b', 'c', 'd'];
for (let res of arr) {
console.log(res);//输出a b c d
}5.each (there are two methods of each under jQuery)
One is $(' ').each(), which is a method of traversing jQuery objects to obtain page elements with a jq selector.
One is the $.each() loop method, which is used to loop through arrays and objects.
Features: This method requires the introduction of the jq package. The item and index placement positions of each and forEach are opposite.
let person = {
name1:"a",
age:"1",
hobbies:{study:"code",play:"games"}
}
let arr = ['aaa','bbb','ccc']
//遍历对象
console.log("遍历对象结果：")
$.each(person,function(index,item){
if(item instanceof Object){
$.each(item,function(index,item){
console.log(index+'.'+item)
})
}else{
console.log(index+'.'+item)
}
})
//遍历数组
console.log("遍历数组结果：")
$.each(arr,function(index,item){
console.log(index+'.'+item)
})6.Array filter()
Features: The original array will not be changed, and the filtered elements (new array) will be returned.
var arr = [73,84,56,22,100]
var newArr = arr.filter(item => item>80)7.find
The find() method returns the first element in the array that meets the conditions of the test function. Otherwise return undefined
var stu = [
{name: '张三',gender: '男',age: 20},
{name: '王小毛',gender: '男',age: 20},
{name: '李四',gender: '男',age: 20}
]
const result = stu.find((element) => (element.name == '李四'));7. What is babel-polyfill?
Some projects will have a white screen when accessing the interface on lower version browsers. This is due to syntax incompatibility, because we need to perform syntax conversion when compiling the project.
Babel is a widely used transcoder that can convert ES6 code into ES5 code so that it can be executed in the existing environment, so we can write in ES6 without considering environment support issues;
Some browser versions are released earlier than the finalization and release of ES6, so if you use the new features of ES6 in programming and the browser has not updated the version, or the new version is not compatible with the features of ES6, then the browser will The ES6 code cannot be recognized. For example, IE9 cannot understand the let and const written in the code at all? The only option is to report an error. This is the browser’s compatibility issue with ES6;
By default, Babel only converts new JavaScript syntax (syntax) and does not convert new APIs , such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise and other global objects, as well as some methods defined on global objects (such as Object.assign) will not be transcoded. For example, ES6 adds the Array.from method on the Array object. Babel will not transcode this method. If you want this method to work, you must use babel-polyfill to provide a shim for the current environment.
npm install babel-polyfill -s Because it is a polyfill (it needs to be run before your source code), we need to make it a dependency (dependency when going online) rather than a devDependency (dependency during development)
Used in Node/Browserify/Webpack
You need to introduce the polyfill through require at the top of your application entry. Make sure it is called before any other code/dependency declaration!
require("babel-polyfill"); If you use the ES6 import syntax in your application entry, you need to import the polyfill at the top of the entry to ensure that it can be loaded first:import 'babel-polyfill';In webpack.config.js, add babel-polyfill to your entries array:
module.exports = { entry: ["babel-polyfill", "./app/js"] };
8. What is Array.from ()?
The Array.from() method converts an array-like object or a traversable object into a real array. It is also a new method in ES6.
So what is an array-like object? The most basic requirement for the so-called array-like object is an object with the length attribute.
1. Convert array-like objects into real arrays:
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]So, what if the length attribute in the above code is removed? Practice has proven that the answer will be an empty array of length 0.
Here, the code is changed again, that is, it has the length attribute, but the attribute name of the object is no longer of numeric type, but other string type. The code is as follows:
let arrayLike = {
'name': 'tom',
'age': '65',
'sex': '男',
'friends': ['jane','john','Mary'],
length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]You will find that the result is an array with length 4 and all elements are undefined.
It can be seen that to convert an array-like object into a real array, the following conditions must be met:
1. This type of array object must have a length attribute, which is used to specify the length of the array. If there is no length attribute, the converted array is an empty array.
2. The attribute name of this type of array object must be a numeric or string number.
ps: The attribute name of this type of array object can be quoted or not.
2. Convert the data of the Set structure into a real array:
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]Array.from can also accept a second parameter, which is similar to the map method of an array. It is used to process each element and put the processed value into the returned array. as follows:
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]3. Convert string to array:
let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]In this case, Array.from will return an identical new array.
9. What is an array?
- It is an ordinary object that does not have the rich built-in methods of an array. It is written the same as an array, but it is not an array, and its prototype is Object.
- The key is composed of numbers or string numbers.
- Must have length attribute
- Strings have array-like characteristics, but generally array-like objects specifically refer to objects.
const arrayLike = {
0: "a",
1: "b",
2: "c",
name: "test",
length: 3
};
//由于类数组对象length属性声明了对象有多少个属性,所以可以使用for遍历对象属性:
for (let i = 0; i < arrayLike.length; i++) {
console.log(i + ":" + arrayLike[i]);
} 
Common class arrays
arguments、NodeList、HTMLCollection、DOMTokenList etc
How to convert class array into array
1. Copy traversal
const arr = [];
const arrayLike = {
0: 1,
1: 2,
length: 2,
};
for (let i = 0; i < arrayLike.length; i++) {
arr[i] = arrayLike[i];
}
console.log(arr); // [1, 2]2、Array.from
const arrayLike = {
0: 1,
1: 2,
length: 2,
};
console.log(Array.from(arrayLike)); // [ 1, 2 ]console.log([...document.body.childNodes]); // [div, script, script...]
// arguments
function argumentsTest() {
console.log([...arguments]); // [ 1, 2, 3 ]
}
argumentsTest(1, 2, 3);How to use array-like built-in methods
Directly define the array prototype method on an array-like object.
Use call or apply to display the pointer to which this is bound.
For example, I want to use the filter method to filter out all elements in a class array whose elements contain the character "i".
const arrayLike = {
0: "i love",
1: "you",
length: 1,
};
console.log([].filter.call(arrayLike, (item) => item.includes("i"))); // [ 'i love' ]10. Basic usage of new Set() (ES6) (commonly used for array deduplication)
1.What is set()
Set is a new data structure in es6. It is similar to an array, but one of its major features is that all elements are unique and there are no duplicate values. We generally call it a set. Set itself is a constructor used to generate the Set data structure
2.Usage situations
The data generated by new Set() is a Set data structure and needs to be converted into the corresponding structure by itself.
2.1 Used for array deduplication
2.2 Used for string deduplication
11. The difference between display and visibility
12. What is the difference between the running environment of WeChat applet and that of the browser?
1. Different file suffixes
Ordinary web programming uses a combination of HTML + CSS + JS. HTML is used to describe the structure of the current page, CSS is used to describe the appearance of the page, and JS is usually used to handle the interaction between the page and the user.
WeChat mini programs also have the same role, in which WXML plays a role similar to HTML.
2. Different operating principles
Ordinary web page rendering threads and script threads are mutually exclusive. They cannot be executed at the same time. The script thread needs to be executed after the initial rendering is completed.
The logic layer and rendering layer of the applet are separated and run in different threads. The logic layer runs in JSCore and does not have a complete browser object, so it lacks related DOM API and BOM API.
This difference causes some libraries that are very familiar to front-end development, such as jQuery, Zepto, etc., to be unable to run in small programs. At the same time, the JSCore environment is different from the NodeJS environment, so some NPM packages cannot be run in small programs.
3. Different operating environments
The environment that web developers need to face is a variety of browsers. On the PC side, they need to face IE, Chrome, QQ browser, etc. On the mobile side, they need to face Safari, Chrome, and various browsers in iOS and Android systems. WebView.
Mini programs only need to deal with the WeChat clients of the two major operating systems IOS and Android, as well as mini program developer tools for auxiliary development.
4. Different development rules
Ordinary web development only requires the use of a browser and some auxiliary tools or editors.
Mini programs need to be completed by applying for a mini program account, installing mini program developer tools, configuring projects, etc.
5. Different tag names
Ordinary web pages commonly use tags such as div, p, span, etc.
The tags used in mini programs are view, button, text, etc. These tags are the basic capabilities packaged by mini programs for developers.
13. What are the advantages of the Vue framework compared to native?
vue advantages:
1. Automatic binding of data
2. Page parameter transfer and page status management.
3. Modular development, no refresh to retain scene parameter updates
4. Code readability (brought by modular development)
5. Based on the powerful nodejs, with the npm package manager, you can manage package versions very well
6. The styles of each sub-component do not conflict.
7. View, data, and structure are separated
. 8. Virtual DOM can render the page faster.9. Various instructions; filters
Disadvantages of vue:
1. Vue is a single-page page, which is not friendly to search engines and affects SEO. For example, the paths of two Vue routes (pages) are as follows: index.html#aaa and index.html#bbb, but to search engines, they are both the same page, which is index.html. In this way, search engines will not be able to include your page.
2. Overhead: Although Vue has good performance, the time and resources it requires will inevitably cause overhead.
3. Complexity: Vue requires more configuration in some aspects, which will lead to increased application complexity.
Native JavaScript advantages:
1. Compatible with any library or framework: Native JavaScript is compatible with any library or framework. 2. Customizability: Using native JavaScript gives you the freedom to build the functionality you need. 3. Faster when it comes to simple applications: When it comes to simple applications, native JavaScript usually performs faster.
Native JavaScript disadvantages:
1. Lack of data binding: Native JavaScript does not have its own data binding function and requires more manual operations to complete. 2. Lack of componentization: When using native JavaScript, we need to write component management ourselves. 3. More tools and libraries are needed: When dealing with complex problems, we need more tools and libraries compared to native JavaScript.
14. What is NaN? What is the result of NaN == NaN?
What is NaN?
NaN: not a number, indicating the data type of the stored data, not a numerical value. If there are non-numeric values involved in the calculation, the result is NaN.
When the data stored in both variables is not a numeric value, the execution result is NaN.
Result of NaN == NaN
The execution result is false
in JavaScript. NaN represents a non-number, but this non-number is also different; therefore NaN is not equal to NaN, and two NaN can never be equal.
extended learning
1. Neither of the values stored in the two variables is a numerical value, and the execution result is NaN.
2. If NaN is involved, the result is NaN.
Note:
When performing operations, if there is no operation with a "+" sign, as long as NaN is involved, the execution result is NaN.
If it is an operation with a "+" sign, and one side is NaN or a string, the string concatenation operation is performed.
If it is an operation with a "+" sign, both are numerical values, and an addition operation is performed.
15. The difference between front-end == and ===
3 equals means that the data type and value are the same.
===
Three equal signs are called equal symbols. When the values on both sides of the equal sign are of the same type, the values on both sides of the equal sign are directly compared. If the values are the same, true is returned. If the value types on both sides of the equal sign are different, false is returned directly.
100===“100” //返回false
abc===“abc” //返回false
‘abc’===“abc” //返回true
NaN===NaN //返回false
false===false //返回true==
We call two equal signs equal symbols. When the values on both sides of the equal sign are of the same type, compare whether the values are the same. If the types are different, automatic conversion of types will occur. Convert to the same type before comparison.
类型转换规则：
1）如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
2）如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等
100==“100” //返回true
1==true //返回true
“1”==“01” //返回false，此处等号两边值得类型相同，不要再转换类型了！！
NaN==NaN //返回false，NaN和所有值包括自己都不相等。
16. What are the new features of CSS3?
The new features of css3 include: 1. css3 selector; 2. Border properties; 3. Multiple background images; 4. Color and transparency; 5. Multi-column layout and flexible box model layout; 6. Box deformation; 7. Transition and Animation; 8. Web fonts; 9. Media queries; 10. Shadows. As an upgraded version of CSS, CSS3 provides richer and more practical specifications.
1. css3 selector
- E:last-child matches the last child element E of the parent element.
- E:nth-child(n) matches the nth child element E of the parent element.
- E:nth-last-child(n) CSS3 matches the nth child element E from the bottom of the parent element.
2. Border characteristics
CSS3 has made some improvements to the borders in web pages, including supporting rounded corners, multi-layer borders, border colors and pictures , etc. One of the most commonly used improvements in CSS3 is the rounded border. The rounded corners can be quickly defined through the properties of CSS3, and the rounded corners can also be defined for specific corners according to the actual situation.
3. Multiple background images
CSS3 allows you to add multiple layers of background images to an element using multiple properties (such as background-image, background-repeat, background-size, background-position, background-origin, background-clip, etc.) . The application of this attribute has greatly improved the previous problem of requiring multi-layer layout when faced with multi-level designs. It helps Web front-end developers realize the design of page backgrounds without using Photoshop, and simplifies the maintenance cost of background images.
4. Color and opacity
The introduction of the CSS3 color module makes it possible to no longer be limited to RGB and hexadecimal modes when creating web effects. CSS3 adds several new color modes such as HSL, HSLA, and RGBA. With these color modes, you can not only set the color of elements during development , but also easily set the opacity of elements as needed .
opacity:
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */5. Multi-column layout and flexible box model layout
The CSS3 multi-column layout property enables multi-column layout without using multiple div tags. The multi-column layout module in CSS3 describes how to split a simple block into multiple columns like a newspaper or magazine, and use the corresponding attributes to realize the number of columns, column width, and blank space between columns. The flexible box model layout facilitates web front-end developers to perform flexible layout according to complex front-end resolutions, and easily align a certain section of the page in the horizontal and vertical directions. It is a great tool for responsive website development.
6. Deformation of the box
In CSS2.1, if you want to deform an element, you must write a lot of code with JavaScript. In CSS3, the deformation attribute is added , which operates the position and shape of the box in 2D or 3D space to achieve things such as rotation, Distort, scale or shift. The emergence of the deformation attribute makes the display of elements in the Web front-end not only limited to two-dimensional space. Web front-end developers can realize the display of elements on three-dimensional controls through operations such as rotation, twisting, scaling, or shifting. Through deformation elements, the content display in the web front-end is more vivid and realistic.
7. Transition and animation
The "transition" property of CSS3 achieves some simple animation effects by setting the changes of certain elements within a certain period of time, making certain effects more streamlined and smooth. CSS3's "animation" property enables more complex style changes and some interactive effects without using any Flash or JavaScript script code. The emergence of transitions and animations makes CSS no longer limited to simple static content display in Web front-end development, but makes page elements move through simple methods, realizing the change of elements from static to dynamic.
8. web fonts
@font-face was introduced in CSS3 . @font-face is a way to link server fonts. These embedded fonts can become safe fonts for the browser. Developers no longer have to worry about the user not having these fonts and causing the web page to be unavailable when the user browses. The device cannot display properly.
9. Media inquiries
Media queries (mediaqueries) were introduced in CSS3 , which can define different styles for devices with different resolutions. For example, when the visible area is less than 480 pixels, you may want the website sidebar that was originally on the right to be displayed below the main content. In the past, you had to use JavaScript to determine the resolution of the user's browser, and then modify the CSS through JavaScript. In CSS3, the above operations can be achieved only through media queries.
10. Shadow
There are two main types of shadows: text-shadow and box-shadow . Text shadows existed in CSS2, but were not widely used (they were removed in CSS2.1). CSS3 continues this feature with a new definition that provides a new cross-browser solution to make text look more eye-catching. The introduction of box shadow in CSS3 makes it easy to add a box shadow to any element.
text-shadow:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];box-shadow：
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;17. What are the new features of html5?
Common html5 has the following ten new features: 1. Canvas drawing; 2. Form elements; 3. Semantic tags; 4. Media elements; 5. Geolocation; 6. Drag and drop API; 7. Web Worker; 8. Web Storage; 9. Web Socket; 10. SVG drawing. The Canvas element is used to draw graphics on web pages.
1. Canvas element
The Canvas element is used to draw graphics on web pages. It has multiple methods for drawing paths, rectangles, circles, characters, and adding images. Canvas draws 2D graphics through js and renders them pixel by pixel. If the picture is modified after it is completed, the entire scene will be redrawn.
2. Form elements
(1) New form elements
<datalist>: The element specifies the option list of the input field, and the list element of the <input> element is bound to the id of the <datalist> element;
<keygen>: Provides a reliable way to verify the user, the tag specifies the key pair generator field used for the form;
<output>: used for different types of output, such as calculation or script output.
(2) New form attributes
placehoder attribute: A short prompt will be displayed on the input field before the user enters the value, which is the default box prompt;
required attribute: It is a boolean attribute that requires the input field to be filled in not to be empty;
pattern attribute: describes a regular expression used to verify the value of the <input> element;
max/min attribute: maximum and minimum values;
step attribute: specifies legal number intervals for the input field;
height/width attributes: image height and width for <input> tags of image type;
autofocus attribute: It is a boolean attribute that automatically obtains focus when the page loads;
Multiple attribute: It is a boolean attribute that specifies the selection of multiple values in the <input> element.
3. Semantic tags
Semantic tags not only make the tags have their own meaning, but the advantages of semantic tags: (1) Make the code structure of the interface clear, which facilitates code reading and team cooperative development; (2) It facilitates analysis by other devices (such as screen readers, Blind readers, mobile devices) render web pages in a semantic manner; (3) Conducive to search engine optimization (SEO).
4. Media elements
Elements for playing audio files <audio>————<audio controls>
(1) The control attribute provides playback pause and volume controls;
(2) Insert prompt text for the <audio> element that is not supported by the browser between <audio> and <audio/>;
(3) Allow the use of multiple <source> elements to link different audio files, and the browser uses the first supported audio file;
(4) Supports three audio format files: mp3, wax, and ogg.
Element <video> that plays video files
(1) The control attribute provides playback pause and volume controls, and you can also use DOM operations: play() and pause();
(2) The video element provides width and height to control the size of the video. If set, it will be retained when the page loads. If not set, it will not be retained. The page will change based on the original video.
5. Geographical positioning
HTML5 uses the getCurrentPosition() method to obtain the user's position, and the position distance can be calculated based on this.
6. Drag and drop API
Drag and drop is a common feature where you grab an object and drag it to another location later. In HTML5, drag and drop is part of the standard and any element can be dragged and dropped. The drag-and-drop process is divided into source objects and target objects. The source object refers to the element you are about to drag, and the target object refers to the target location where you want to place it after dragging.
Events that can be triggered by the dragged and dropped source object (which may be moved) - 3:
- dragstart: drag start
- drag: dragging
- dragend: end of dragging
The entire dragging process consists of: dragstart*1 + drag*n + dragend*1.
Events that can be triggered by the dragged and dropped target object (which will not move) - 4:
- dragenter: drag to enter
- dragover: dragging and hovering
- dragleave: drag away
- drop: release
The entire dragging process consists of 1: dragenter*1 + dragover*n + dragleave*1;
The entire dragging process consists of 2: dragenter*1 + dragover*n + drop*1.
7. Web Worker
When executing a script in an HTML page, the state of the page is unresponsive until the script has completed. Web Worker is JavaScript that runs in the background, independent of other scripts and does not affect the performance of the page. You can continue to do whatever you want: click, select content, etc., while the Web Worker runs in the background.
8. Web Storage
Web Storage is an important feature introduced by H5 to help solve the local cache of cookie storage. Earlier, local storage used cookies. But Web storage needs to be more secure and faster, and Web Storage has 5M capacity and cookies are only 4k.
9. Web Socket
The WebSocket protocol provides a full-duplex communication mechanism between web application clients and servers. In the WebSocket API, the browser and the server only need to perform a handshake action, and then a fast channel is formed between the browser and the server, and data can be transmitted directly between the two. The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and server can directly exchange data through the TCP connection. After you obtain the Web Socket connection, you can send data to the server through the send() method, and receive data returned by the server through the onmessage event.
10. SVG drawing
SVG stands for Scalable Vector Graphics, a language that uses XML to describe 2D graphics. In SVG, every drawn shape is treated as an object. If the properties of an SVG object change, the browser can automatically reproduce the graphic.