Welcome to the third and final part of this series, where we will explore the retirement of the old IE and the impact of this incident on the front-end development field. So far, we have covered out outdated technologies that can be safely discarded, as well as HTML5 and CSS3 properties that are now fully natively supported in mainstream browsers. Today, we will focus on native JavaScript technology and other content that does not fall into the above categories. Thanks again to CanIUse.com, it is a very valuable resource. I will also reiterate the last disclaimer:
This article has nothing to do with whether to give up the decision to support
old IE. You must make your own decisions based on the specific details of your website or application.
Without further ado, let's continue!
Key Points
const
letSecurity and Privacy First: Web Cryptography API and Content Security Policy (CSP) are now fully supported, providing a powerful tool for enhancing the security of web applications. Base64 is a very useful tool on the web. Many of you may have used it to embed fonts or images into CSS. Another common usage is to deal with various resources that usually interfere with the transmission protocol. A good example is basic access authentication, where the username:password pair is packaged using Base64 and then sent to the server. Native support for encoding/decoding operations means they can be executed faster. Here are some introductory resources:
A binary large object or BLOB is a collection of raw data stored in a single entity in a database management system. It can be an audio clip or an image and is stored in Base64 format. Or a set of images. In many cases, Blob fields are used for data whose data structures are not as strict as expressed by normal tables or table schemas such as JSON objects. Some of you may remember the ancestor of the Blob interface, namely BlobBuilder. However, this approach has been deprecated and it is strongly recommended that all blob operations should be performed through the new interface.
Most importantly, since this collection is very similar to a file, the native interface of the Blob object has been used as the basis for the File() interface. So there is a nice feature called "Blob URLs" that allows developers to create URLs for blob objects that can be used anywhere files can be used. With that in mind, native support now covers all mainstream browsers, which is very appreciated.
Usually, two scripts running in different browser contexts are prohibited from communicating with each other to avoid many security pitfalls. However, sometimes such communication is not only needed, but is really necessary. This is where the Channel Messaging API comes into play. This interface allows our two scripts to communicate with each other through a bidirectional pipeline. It's like giving everyone a walkie-talkie on the same channel. Very clever, isn't it?
const and let are two new ways to define data in ES6. Although var defines variables that have global or function scopes, new content has block-level scopes. This means that the scope of variables created with const and let is limited to the bracket pairs that define them.
Although let defines a variable (except scope) that behaves the same as a classic variable, a constant (const) is a read-only reference to a value. It cannot be reassigned, cannot be redefined, and cannot share the same name with any other variable or function within the same range. The only exception is when a constant is an object with its own properties. These properties are not protected by changes and behave like normal variables.
With that being said, check out how to use constant and block-level variables correctly in your code:
Most front-end developers will agree that the web console is one of the most useful tools in hand when scripts behave abnormally. However, Internet Explorer is essentially slow to integrate it, and only version 10 starts to provide full support. Now, with the retirement of the old IE, nothing can stop us from making the most of this feature. If you need to refresh your knowledge and even find new ways to use the console, check out the following specification:
Internationalization (also known as i18n) is the process of creating or converting products and services so that they can easily adapt to specific local languages and cultures. Localization (also known as L10n) is the process of adjusting internationalized software for a specific region or language. In other words, internationalization is the process of adapting your software to support multiple cultures (currency formats, date formats, etc.), while localization is the process of implementing one or more cultures.The browser support is slightly better than at the beginning of this year, and Safari v10 joined the ranks in September. Does it sound interesting? Here are some resources to get you on track:
Responsive Web Design is the current standard for efficient websites, and the key feature that makes it possible is the existence of media queries. matchmedia introduces media queries from CSS to JavaScript, providing developers with greater flexibility to optimize content across various devices. A good example is handling changes from portrait mode to landscape mode and reverse mode for mobile phones and tablets. While there is an API that handles device orientation detection, most browser support is partial, and only Microsoft Edge provides full support. Here are some introductory resources on this topic:
Media Source Extensions (MSE) adds additional functionality to video and audio elements without using plugins. This provides you with adaptive media streaming, real-time streaming, stitching video and video editing. YouTube has been using MSE in its HTML5 players since September 2013. The browser support is also quite good, only iOS Safari and Opera Mini lack this feature. IE11 is fully supported only when used on Windows 8. Unfortunately, IE11/Win7 users cannot benefit from this technology. Whether you are just curious or really want to start using this API, you will find the following resources very useful:
JavaScript applications are becoming more and more complex every day. As a developer, you need to control what changes happen on the page, especially when the DOM tree changes or "mutates". The need for this kind of monitoring is not new, but there is actually a solution - mutation event. The problem with this interface is that as events, they are both synchronous (triggered upon call and may prevent other events from being triggered) and must also be captured or bubbling through the DOM. This in turn triggers other events, overloading the JavaScript thread and generating an entire cascade failure in some special cases, causing the browser to crash.
Therefore, the mutation event has been deprecated and replaced with the mutation observer. You might ask, what's the difference? First and most importantly, the observer is asynchronous. They won't prevent your script from running. They are not triggered at each mutation, but are batch-passed after the main activity is completed. More importantly, you can fine-tune the observer to observe all changes to the node or only observe changes to a specific category (such as changes to only sublists or only attributes, etc.). Use the following resources to start learning how to do this:
Tab browsing has changed the way we interact with the network. It is not uncommon for many people to open dozens of pages at the same time. Each page performs its own actions, runs its scripts, downloads the resources it owns, and more. Even if only one tab can be activated at a time, all open pages consume CPU time and bandwidth. Some applications may periodically send and receive updates over the connection. But if you don't open the app in the Activity tab, does it need to be updated every X seconds in the background? It seems a bit of a waste, doesn't it? Especially in mobile devices and data plans, every resource is valuable.
This is where the Page Visibility API comes into play. This interface allows developers to know if their application is in the Active Tab or in the background. Let's take the application I mentioned earlier that performs updates as an example. Using the Page Visibility API, you can detect when the application is in the background and then instead of performing updates every 5 or 10 seconds, you do it every 60 seconds or even less. Once the page becomes visible again, you can switch back to the normal update rate. Very cool, isn't it?
So, what are you waiting for? Check out the following guide to start launching your application for page visibility. Your users will thank you:
Have you ever used a web form that pops up when you try to leave or close the page, prompting you that you have unsaved data? This is common these days on pages where you change settings, profile details, and more. How do scripts in the page know you are leaving? They listen to pagehide events.
pagehide and its partners pageshow are the main protagonists of page conversion events. We have seen above what the first one is mainly used for. The main purpose of pageshow is to determine whether the page is loaded from the cache or directly from the server. This is not the most common use, but if you need either feature, check out the following resources:
Animation on the web has come a long way from the early <marquee></marquee> and <blink></blink> to animation GIFs, jQuery effects, to current CSS, SVG, canvas and WebGL animations. One constant of all these methods is the need to control the flow of the animation and make it as smooth as possible.
The initial method uses setInterval and setTimeout to control the steps of the animation. The problem is that the results are not reliably consistent, and the animation is usually rough. This is why a new interface was designed - requestAnimationFrame. The main advantage of this approach is that the browser can freely match the request to its own drawing cycle, thereby significantly smoothing the animation. Together with its counterpart cancelAnimationFrame, these two methods are the basis of modern JavaScript animation.
As usual, here are some resources that will get you started to master this feature.
Online performance is a hot topic today, and everyone is trying their best to reduce resources, optimize scripts and make the most of all the tools they have. There are two main ways to solve this problem: network performance (the speed of delivery of sites and resources) and user performance (the speed of execution of applications themselves).
Network performance is served by two APIs: Navigation Timing and Resource Timing. They all provide all types of information related to network performance, such as DNS, CDN, request and response time, etc. The only difference is that Navigation Timing targets the HTML page itself, while Resource Timing handles all other resources (images, scripts, media, etc.).
In terms of user performance, we have an API: User Timing. This API handles two main concepts, called Mark (highly detailed timestamp) and Measure (the time interval between two Marks). Use these concepts to measure the running speed of the code and identify where it needs to be optimized. Unfortunately, Safari still does not support this API, so polyfill may be required.
Mastering the use of these interfaces is essential to ensure optimal performance of your website or application. This is why we provide you with some learning materials:
JavaScript typed arrays are array-like objects and provide a way to access raw binary data. For maximum flexibility and efficiency, the implementation is carried out along two concepts: a buffer (block of raw data) and a view (providing a context that can interpret the buffer data). There are many Web APIs that use typed arrays, such as WebGL, Canvas 2D, XMLHttpRequest2, File, Media Source, or Binary WebSockets. If your code handles such techniques, you may be interested in the following resources:
We discussed Channel Messaging earlier and how it makes two different scripts communicate directly with each other. WebSockets are similar to this, with more features. Use this API to create a persistent communication channel between the browser and the web server.
Like HTTP, the WebSocket protocol also has two versions: unsafe (ws://...) and secure (wss://...). It also considers proxy servers and firewalls, through which tunnels are opened. In fact, WebSocket connections start with a normal HTTP connection, ensuring compatibility with existing infrastructure.
WebSockets are a fascinating technology (they even have a dedicated website) and there is a lot to learn. To help you get started, here are some selected resources:
By default, all JavaScript tasks run in the same thread. This means that all scripts in the page must share the same processing time queue. This is good and simple when the processor has only one core. However, modern CPUs have at least dual cores, and some models even reach 4, 6 or 8 cores. Wouldn't that be nice if some tasks can be moved into separate threads that can be processed by available extra kernels? This is why Web Workers were invented.
Using the Web Workers API, developers can delegate named script files to workers running in separate threads. The worker responds only to the script that created it, communicates in two-way through messages, can run XMLHttpRequest calls and does not interact with some default methods and properties of the DOM or window object. In the exception category, we can mention data storage mechanisms such as WebSockets (which can assign management of WebSocket connections to workers) or IndexedDB. Having your own assistant to handle secondary tasks, while the main thread focuses on running the entire application, nothing is better than this.
To get started with this feature (including a list of functions and classes available for Web worker), check out the following resources:
The adoption of XMLHttpRequest indicates a new era of web development. Data can now be exchanged between the browser and the server without reloading the entire page. AJAX is the new standard that allows everyone to have a single page application.
This useful technology will be further developed, which is normal. This is how XHR gets new features, such as file uploads, transfer progress information, or sending form data directly. All of these features (slight exceptions in the case of IE11 or older Android) are supported by mainstream browsers after retirement. For more details, please feel free to check the following resources:
Modern Web is more than HTML, CSS and JavaScript. There are many invisible (and unpraised) heroes behind the scenes working hard to make our online experience as great as possible. Below, we will discuss some of these features that, like the above, cannot be used on older IE browsers (they are notorious for their security vulnerabilities and lack of support for modern features). Non-blocking JavaScript loading using "async" and "defer"
But the truth is that in most cases your website or application only needs a portion of all JavaScript that it loads. The rest will be required later, or they are performing operations that do not affect the DOM. The obvious way is to load only the key scripts in a regular way, and load the rest in a way that does not negatively affect the application. In fact, there are two such loading methods.
All the benefits of these two parameters, they are becoming an important tool for improving website and application performance. Check out the following resources for more information on how and when to use this technology:
Remove render blocking JavaScript on Google Developers
Content security strategy is the main weapon against XSS. This mechanism contains a set of policies and directives that specify which scripts are allowed to be executed, where resources can be loaded, whether inline styles or scripts can be run, and so on. CSP is based on whitelists, which means that by default everything is denied and only the specified resources can be accessed. This means that when the rule is fine-tuned, it will not be executed even if the malicious script is inserted into our site.
The following are some resources that can help you better understand this mechanism:
From the beginning, the web has run on the HTTP protocol. However, while the first one has grown very fast, HTTP has remained largely the same. In the complex ecosystem of modern websites and applications, HTTP can become a performance bottleneck. Of course, there are some techniques and practices that can optimize this process, but only so much can be done.
This is why the second iteration of the protocol was developed, called HTTP/2, which is based on Google's SPDY protocol. It was approved in February 2015 and the specification was released as RFC 7540 in May 2016. So far, mainstream browsers support HTTP/2 only over encrypted connections, and it is very likely that it will remain that way for the foreseeable future to encourage site owners to switch to HTTPS.
HTTP/2 adoption is not just a matter of changing some configuration settings. Some best practices for enhancing HTTP performance may affect performance on HTTP/2. To determine if your website is ready to use HTTP/2, you can consult the following resources:
Web performance is a hot topic today, and for good reason. As all staff in the field know, a large portion of page loading time is taken up by resource downloads. Wouldn't that be great if you can use time after the page loads to preload the resources for the next steps? This is what the resource prompts are for.
Resource prompts are a series of instructions that tell the browser to provide the specific resources that will be needed in the future. The list contains five prompts as follows:
Of these five possible options, the only one with good browser support at present is prefetch. This prompt tells the browser to cache documents that the user is likely to request after the current page. This limits its use to elements that can be cached. Using it with other types of resources will not work.
If you are interested in this topic, here are some resources that provide more details:
HTTPS is becoming the new browsing standard, and more and more websites only accept secure connections. Normal connections (on HTTP) are usually redirected to the HTTPS version and things go as usual. However, this approach is vulnerable to "man-in-the-middle" attacks, where redirects instead occur to a spoofed clone of the website you want (usually a banking website) in order to steal your login credentials.
This is where strict transmission security headers come into play. The first time you connect to the desired website using HTTPS, the header will be sent to the browser. The next time you connect, even if you only use the HTTP version of the URL, the browser will go directly to the HTTPS version without going through the redirect cycle. Since no connection is established on HTTP, the attack described above will not occur.
For more details on strictly transmitting security headers, please check out the following website:
Window.devicePixelRatio is a read-only property that returns the ratio of the (vertical) size of a physical pixel on the current display device to the size of a CSS pixel. This way, developers can detect high-density screens (such as Apple's Retina display or high-end Android screen). When used with Media Query and MatchMedia (we discussed above), this property allows for optimized resources for the best experience.
Web Video Text Track (or WebVTT) is a format used to mark text subtitles of multimedia resources. It is used with HTML5<track></track> elements and allows to add subtitles, translations, titles or descriptions to media assets (audio or video) in a synchronous manner. The presence of this text information makes media resources easier to access.
For instructions on how to get started with this feature, please check out the following resources:
<track></track> on Dev.OperaWe are here, at the end of this series, which begins with a simple intellectual exercise: "Old IE is gone! Let's celebrate! (…a few hours later… …) What to do now?”. We cover a wide range of topics, from techniques and practices that are no longer needed to everything new that we are now free to do without polyfill, whether it is HTML, CSS or native JavaScript. We even touched on a wider range of topics such as performance optimization and enhanced security.
Should you start refactoring all your code right now? Probably not. Such decisions must be made based on the balance between reconstituted costs and the cost of technical debt. However, if you are starting a new project, be sure to build it for the future, not for the past.
Native JavaScript development after Internet Explorer is critical because it allows developers to create more efficient and efficient web applications. With Internet Explorer deactivation, developers are no longer limited to the constraints and compatibility issues that are usually associated with that browser. They can now use the full capabilities of JavaScript, including its latest features and updates, to build more dynamic, interactive and user-friendly web applications.
Enabling JavaScript in a browser is an easy process. For most browsers, you can find options to enable or disable JavaScript in the Settings or Preferences menu. Typically, this involves navigating to the "Security" or "Privacy" section and looking for options related to JavaScript. Make sure to enable it for a better browsing experience.
Yes, there are significant differences in how JavaScript works in Internet Explorer and other browsers. Internet Explorer has different JavaScript engines, which often lead to compatibility issues and limitations. Modern browsers such as Chrome, Firefox, and Safari use more advanced JavaScript engines that support the latest JavaScript features and standards, which improve performance and reduce compatibility issues.
Using native JavaScript has many benefits compared to using libraries or frameworks. It allows for better performance because there is no overhead of loading and parsing unnecessary code. It also provides more control over the code, as developers are not bound by specific libraries or frameworks. In addition, understanding and using native JavaScript can give you a deeper understanding of the language and its features.
The deactivation of Internet Explorer has had a significant impact on JavaScript development. Developers no longer need to write extra or different code to ensure compatibility with Internet Explorer. This leads to a more efficient development process and the ability to take advantage of the full functionality of JavaScript. It also leads to a more consistent user experience across browsers.
JavaScript is constantly updated and has added new features and improvements. Some of the latest features include async/await for handling asynchronous operations, extended syntax for extending arrays or other iterable objects, and arrow functions for more concise function syntax. These features can greatly enhance your JavaScript development and allow you to write more efficient and readable code.
Ensuring browser compatibility is an important aspect of JavaScript development. One way to achieve this is to use feature detection, which involves checking whether the user's browser supports the feature before using it. Another approach is to use polyfill, a script that provides newer functionality for older browsers that do not support them.
The future of JavaScript development after Internet Explorer is retired looks promising. With Internet Explorer deactivation, developers can now focus on taking advantage of the full capabilities of JavaScript without worrying about compatibility issues. This combined with the continuous updates and improvements of the language, heralding a future where JavaScript is more efficient, more powerful and more versatile.
There are a lot of great resources to learn more about native JavaScript development. Some popular online platforms include Mozilla Developer Network (MDN), freeCodeCamp, and Codecademy. These platforms provide comprehensive guides and tutorials on JavaScript, covering everything from basics to more advanced topics.
Debugging is an indispensable part of JavaScript development. Most modern browsers come with built-in development tools that can be used for debugging. These tools allow you to step through the code, check variables, and see any errors or exceptions that occur. Additionally, using good coding practices, such as writing clean and concise code and annotating the code, can also make the debugging process easier.
The above is the detailed content of Native JavaScript Development after Internet Explorer. For more information, please follow other related articles on the PHP Chinese website!
The difference between indexof and includes
The difference between flutter and uniapp
Solution to Connection reset
What is the use of bitlocker
Introduction to screenshot shortcut keys in win10
How to find the greatest common divisor in C language
What software is Twitter?
rgb to hexadecimal conversion
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
