The browser
Browser kernel and JS engine
| Browser/RunTime | Kernel (rendering engine) | JavaScript engine |
|---|---|---|
| Chrome (Google) | Blink (28~) \Webkit (Chrome 27) | V8 |
| FireFox (FireFox) | Gecko(open source also known as Firofox) | SpiderMonkey |
| Safari (apple) | Webkit | JavaScriptCore |
| Edge | EdgeHTML | Chakra(for JavaScript) |
| IE | Trident | Chakra(for JScript) |
| Node | V8 |
Cache the difference
| The cache | aging | The size of the | Communicates with the server |
|---|---|---|---|
| cookie | If the expiration time is not set in the browser, the cookie is stored in the memory and its life cycle ends when the browser is closed. After the browser is closed, the cookie data still exists until the expiration time ends. Shared in all same-origin Windows | 4kb | This is carried each time in HTTP headers, and using cookies to store too much data can cause performance problems |
| sessionStorage | This parameter is valid only in the current session and is cleared after the page or browser is closed. If the page is not shared in different browser Windows, the same page is shared | As a general rule, be 5 MB | It is saved only in the client (browser) and does not communicate with the server |
| localStorage | Save permanently unless cleared, shared in all cognate Windows | As a general rule, be 5 MB | It is saved only in the client (browser) and does not communicate with the server |
| IndexedDB (formerly known as Web Sql) | It is stored permanently unless it is removed | Generally no less than 250MB, or even no upper limit | Don’t participate in |
| Html5 offline Cache | It is stored permanently unless it is removed | Single address page | |
| Other framework storage (vuex, React-Redux) | It ends with the closure of the life cycle |
HTML&CSS
Model 1.
box-sizing:content-box; The box model standard of standard mode will be adopted
box-sizing:border-box; The box model standard for weird patterns will be adopted
box-sizing:inherit; Specifies that the value of the box-sizing attribute should be inherited from the parent element.
- Margin – Clears the area outside the border. The Margin is transparent.
- Border – The Border around the inside margin and around the content.
- Padding – Clears the area around the content. The Padding is transparent.
- Content – The contents of the box, displaying text and images.
1. Box Model (Weird Box model)
The actual width of the tag is equal to the width set. If the padding and border are set, the width of the tag is subtracted from the actual width set.
- W3C Box Model (Standard Box Model)
The actual width of the tag = set width + border width + padding width
2. Common layout
| layout | way | advantages | disadvantages |
|---|---|---|---|
| Text layout | text | Document flow is essentially nomal Flow and is easy to understand | Lack of variability |
| Liquid layout | float | Good compatibility, simple and easy to use | Out of document flow, need to clear float, height collapse |
| Locate the layout | position | Allows elements to have inline-block width and height limits | Leaving the document stream causes all subsequent elements to leave the document stream, using line differences |
| Fluid layout | streamingThe width and height of elements are expressed in percentage units. The width and height of elements are adjusted according to the screen resolution, and the layout does not change. | Compatibility is good, when the screen resolution changes element size does not change the layout | If it’s too large or too small it won’t work on the screen |
| Elastic layout | rem/em | Strong adaptability, in doing different screen resolutions of the interface is very used, can be arbitrarily according to the width, than the column of the width of the element, fast, easy to maintain. Simple, convenient and fast | Browser compatibility is poor to ie9 and above. |
| Adaptive layout | adaptation(@media Media Enquiries) | When the screen resolution changes, the position of the elements on the page changes without changing their size | If you need different pages then you need to write multiple pages of code |
| Responsive layout | BootStrap(CSS3’s Grid is similar) Grid layout | Adapt to PC and mobile, if only enough patience, the results will be perfect. | Media queries are limited, that is, can be enumerated, can only adapt to the mainstream width and height, to match enough screen size, the workload is relatively large, design also requires multiple versions |
H5C3
HTML 5 + document HTML 5 + API Reference (recommended learning websites) www.html5plus.org/doc/h5p.htm… (Mainly H5APP address to learn, query mobile devices)
CSS 3 properties and selector tool.oschina.net/apidocs/api…
H5 New features:
- H5 new semantic elements (benefit code readability and SEO) new semantic elements: header, footer, nav, value, the article, section
- geolocation Through the window. The navigator. Geolocation to implement access getCurrentPosition watchPosition () () clearWatch ()
- LocalStorage provides sessionStorage, localStorage, and indexedDB enhanced localStorage setItem (key, Value) getItem (key), removeItem (key), Clear (), key (index)
- With the Audio tag, you no longer need to render audio using third-party plugins. Most modern browsers provide support for HTML5 Audio, but still need to provide some compatibility
- Much like Audio, tags provide support for video, and since HTML5 documentation doesn’t specify a specific encoding for video,
- Canvas Canvas caibaojian.com/canvas/
CSS 3 Animation (Animation)
- Keyframes (@keyframes) – Defines the state of the animation at different stages
- Animation properties – Determines how long the animation should be played, how many times it should be played, and which functions should be used to play the animation, etc. (Like audio and video players)
- CSS properties – Is the state of a CSS element under different keyframes
List div:first-child {animation: dropdown 8s Linear infinite; }
@keyframes dropdown { 0% { margin-top: 0px; Margin-top: 0px; margin-top: 0px; } 50% { margin-top: -100px; } 60% { margin-top: -100px; } 90% { margin-top: -200px; } 100% { margin-top: -200px; }}
SVG vector diagram
- Store multiple logos or other small ICONS. Call background-repeat via background-image whether to tile background-position to adjust the distance, and pay attention to the distance
- As icon small ICONS, small ICONS refer to Alibaba www.iconfont.cn/
Interview questions
- How to center vertically?
- Line height is the same as the height of the inline element line-height
- Display: inline – block; verticle-align:middle
- display:flex; align-self:center;
- display:table; Display: table – cell
- position:relative; top:50%; transform:tranglateY(-50%)
6. Parent squeezes through pseudo-element :before, and can also hide element squeezes
- How to center horizontally?
- margin: 0 auto; text-align: center
- Parent element display: flex; flex-direction:column; Son the justify – content: center
- Display: inline – block and text – align: center
- position:relative; left:50%; transform:tranglateX(-50%)
- Parent element display:table-cell Child element margin
- The parent element position:relative gives the child element float:left and margin-left
- Squeeze hidden or fake elements :before
- Talk about cookies, localstoarge sessionStorage as above table belongs
- H5C3 talk about what you understand and what attributes you have used
- According to the situation, the water is too deep, especially Canvas