May 30, 2021 Article blog
2. What are the new features of html5 and what elements have been removed?
4. How do I communicate between multiple tabs in my browser?
5. How do you optimize your site's files and resources?
7. What is the use of HTML5 Canvas elements?
10.. Describe the difference between progressive enhancement and elegant degradation
11.. Why is it more efficient to use multiple domain names to store site resources?
12.. Would you please describe the difference between cookies, sessionStorage and localStorage?
1.css3 implements fillets (border-radius), shadows (box-shadow), border-image
2. Add special effects (text-shadow), linear gradient, rotation (transform) to the text
3 Pairs of background map size modifications (background-size)
4. Added more CSS selectors multi-background rgba
5. The only pseudo-elements introduced in CSS3 are ::select, which is used to change the color of the text and the background color of the text when selecting the Chinese book
6. Media inquiries, multi-column layout
New features:
1. Drag and drop API
2. Better semantic content tags (header, nav, footer, aside, article, section)
3. Audio and video API (audio, video)
4. Canvas API
5. Geolocation API
6. Local offline storage of localStorage long-term storage data, browser closed data is not lost
7. SessionStorage's data is automatically deleted after the browser is closed
8. Form controls, calendar, date, time, email, url, search
9. New technology webworker, websocket, geolocation
Removed elements:
1. Pure performance elements: basefont, big, center, font, s, strike, tt, u;
Cookies: both the server and the client can access;
Local storage: Only the local browser side has access to the data, and the server cannot access the local storage until it is sent to the server through a POST or GET channel;
Call localstorge, cookies, and other local storage methods
File Merge File minimization/file compression Use CDN to host the use of caches
It's about making web pages that allow different devices to have different sizes and different functions. A responsive design is designed so that everyone can make the site work on these devices
Canvas elements are used to draw graphics on Web pages, and the powerful thing about this element tag is that they can be graphically manipulated directly on HTML.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明</title>
<style>
body {
margin: 0;
padding: 0;
}
.a {
width: 200px;
height: 100px;
border-radius: 10px;
box-shadow: 10px 10px 5px #888888;
background-color: aqua;
transition: 2s;
}
.a:hover {
opacity: 0;
}
</style>
</head>
<body>
<div class="a">
</div>
</body>
</html>
First divided into head, body, foot... Implementing an effect map is the most basic work, accurate to 2px; Communication with designers, product managers and project participation Do a good job of page structure, page refactoring and user experience Process hacks, compatible, and write beautiful code formats
Progressive enhancement enhancement: Build pages for lower-version browsers to ensure the most basic features, and then improve and append features for advanced browsers for a better user experience.
Elegant downgrade graceful degradation: Build the full functionality from the start and then make it compatible with lower-end browsers.
Difference: Elegant degradation begins with a complex status quo and attempts to reduce the availability of user experience, while incremental enhancements start with a very basic, functional version and are constantly expanding to meet the needs of the future environment. Degradation (functional attenuation) means looking back, while incremental enhancement means looking forward while keeping its roots safe.
CDN caching is more convenient
Break through browser concurring limits
Save cookie bandwidth
Save the number of connections to the primary domain name and optimize page responsiveness
Prevent unnecessary security issues
SessionStorage is used to store data from a session locally that can only be accessed by pages in the same session and destroyed when the session ends. T herefore, sessionStorage is not a persistent local store, but only session-level storage. LocalStorage is used for persistent local storage, and data never expires unless it is actively deleted
Web Storage has a similar concept to cookies, except that it is designed for larger storage capacity. The size of the cookie is limited, and every time you request a new page, the cookie is sent in the past, which is an invisible waste of bandwidth, and the cookie also needs to specify a scope that cannot be called across domains.
In addition, Web Storage has setItem, getItem, removeItem, clear and other methods, unlike cookies that require front-end developers to encapsulate setcookes, getCookies themselves. But cookies are also indispensable: they interact with the server and exist as part of the HTTP specification, and Web Storage is born to "store" data locally.