First question: Please introduce the objects of BOM
The first time I was asked, I only knew window and Navigator
- Window: The core object of the BOM is the Window object, which represents an instance of the browser.
- Avigator: The Navigator object contains information about the visitor’s browser.
<div id="example"></div>
<script>
txt = " Browser code:
+ navigator.appCodeName + "</p>";
txt+= " Browser name:"
+ navigator.appName + "</p>";
txt+= " Browser version:"
+ navigator.appVersion + "</p>";
txt+= " Enable Cookies:"
+ navigator.cookieEnabled + "</p>";
txt+= " Hardware platform:"
+ navigator.platform + "</p>";
txt+= " User agent:"
+ navigator.userAgent + "</p>";
txt+= " User agent language:"
+ navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
Copy the code- The window.screen object contains information about the user’s screen.
<body>
<h3>Your screen:</h3>
<script>
document.write("Total width/height:");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("Available width/height:");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("Color depth:");
document.write(screen.colorDepth);
document.write("<br>");
document.write("Color resolution:");
document.write(screen.pixelDepth);
</script>
</body>
Copy the code- The location: object is used to get the address (URL) of the current page and redirect the browser to the new page.
Some examples:
Location. hostname Returns the domain name of the Web host
Location. pathName Returns the path and filename of the current page
Location. port Returns the port of the Web host (80 或 443)
Location. protocol Returns the Web protocol used (HTTP: or HTTPS:)
Location. assign(URL) : loads a new HTML document specified by the URL. It is equivalent to a link, jump to the specified URL, the current page will be converted to the new page content, you can click back to return to the previous page.
Location. replace(URL) : Replaces the current document by loading the document specified by the URL. This method replaces the current window page
Copy the code- The history object contains the history of the browser.
history.go(0); // The parameter in go() is 0, indicating that the page is refreshed
history.go(- 1); // The parameter in go() indicates the number of pages to jump to. For example, history.go(-1) indicates the number of pages to jump to
history.go(1); // The parameter in go() indicates the number of pages to jump to. For example, history.go(1) indicates the number of pages to jump to
history.back() The // method loads the previous URL in the history list.
history.forward() The // method loads the next URL in the history list.
Copy the codeSecond question: What does the following code output?
var age = 29;
window.color = "red";
delete window.age;
delete window.color;
alert(window.name)
alert(window.age)
alert(window.color)
Copy the codeThe answer:
var age = 29;
window.color = "red";
Throw an error in IE<9, return false in all other browsers
delete window.age;
// Throws an error when IE<9, and returns true in all other browsers
delete window.color;
alert(window.name) / /"
alert(window.age) / / 29
alert(window.color) //undefined
Copy the codeThe window property added using the var statement provides a different property named [[64x]], which is set to false and cannot be deleted by the delete operator. Window. name indicates that the name of the current window, age, is not deleted, so 29 is printed and color is deleted.
Third question: Do you know about indirect and timeout calls?
Javascript is a single-threaded language, but it allows you to schedule code execution at a specific moment by setting the timeout value setTimeout and the intermittent time value setInterval. The former executes the code after a specified time, while the latter executes the code at specified intervals.
- The timeout call uses the setTimeout() method of the Window object, which takes two arguments: the code to execute and the time in milliseconds. The first argument can be a string containing a javascript statement (not recommended) or a function. After calling setTimeout(), the method returns a numeric ID indicating a timeout call.
SetTimeout (function(){alert("Hello"); }, 1000);Copy the code
// setTimeout("alert('Hello')",1000) not recommended;
- An intermittent call is similar to a timeout call, except that it repeats the code at a specified interval until the intermittent call is canceled or the page is unloaded. The method for setting intermittent calls is setInterval(), which takes the same argument as setTimeout() : because, without intervention, intermittent calls will continue until the page is unloaded. (ps: it is recommended not to use setInterval (), but setIimeout () instead.)
You just suggested using setInterval () less and using setIimeout () instead. Why?
This time, understand the JavaScript execution mechanism thoroughly (don’t know what macro tasks are and what micro tasks are).
I say replace because of the shortcomings of setInterval
Again, the time interval specified by the timer indicates when the timer code is added to the message queue, not when the code is executed. So the actual time when the code is executed is not guaranteed, depending on when it is picked up by the main thread’s event loop and executed.
SetInterval (function, N) // that is, function events are pushed to the message queue every N secondsCopy the code
As you can see in the figure above, setInterval adds an event to the queue every 100ms. 100ms later, add T1 timer code to queue, there are still tasks in the main thread, so wait, some event is finished to execute T1 timer code; After another 100ms, the T2 timer was added to the queue. The main thread was still executing T1 code, so it waited. After another 100ms, another timer code would theoretically be pushed into the queue, but since T2 was still in the queue, T3 would not be added and would be skipped. Here we can also see that the T2 code was executed immediately after the T1 timer ended, so it did not achieve the effect of the timer.
To sum up, setInterval has two drawbacks:
- When using setInterval, certain intervals are skipped;
- Multiple timers may run consecutively. The task generated by each setTimeout is pushed directly into the task queue. SetInterval does a check (to see if the last task is still in the queue) every time it pushes a task to the queue.
Therefore, setTimeout is generally used to simulate setInterval to avoid the above shortcomings.
Fifth question: How to use setTimeout to simulate setInterval
SetTimeout simulates setInterval, which can also be understood as chained setTimeout.
SetTimeout (function () {// Tasksettimeout (arguments.callee, interval); }, interval)Copy the code
The above function creates a new timer each time it executes. The second setTimeout uses arguments.callee() to get a reference to the current function and set another timer for it. Benefits:
- No new timer is inserted into the queue until the previous timer runs out (fix defect 1)
- Ensure timer interval (solve shortcoming 2)
Warning: Version 5 of ECMAScript (ES5) disallows the use of arguments.callee() in strict mode. Avoid using arguments.callee() when a function must call itself, by either giving the function expression a name or using a function declaration.
Q6: Since the above mentioned hash and history, let’s talk about the difference between the two
hash
That is, the # hash in the URL of the address bar is present in the URL, but is not included in the HTTP request and has no impact on the back end, so changing the hash does not reload the page.
history
Take advantage of the new pushState() and replaceState() methods in the HTML5 History Interface, which perform modifications that change the current URL without the browser immediately sending the request to the back end. With the History API, we lose the ugly #, but it also has a problem: not afraid to go forward, not afraid to go back, not afraid to refresh, F5 (if the back end is not ready), because the refresh is actually asking the server. In hash mode, the front-end route modiates the information in #, and the browser does not send the data after # to the background when requested, so there is no problem. Under History, however, you are free to change the path, and when refreshed, if there is no response or resource on the server, the 404 page will be refreshed.
This article is formatted using MDNICE