H5+css3 interview questions summary
1. The difference between html5 and html:
1. html5 adds semantic tags: footer, nav, section...
2.html5 fully supports css3
3. Support local offline storage
4. Added canvas tag
5. Added video and audio tags
HTML5 offline storage
localStorage stores data for a long time, and the data is not lost after the browser is closed;
sessionStorage data is automatically deleted after the browser is closed.
How to distinguish between HTML and HTML5?
-
DOCTYPE声明 新增的结构元素 功能元素 123
2. Understanding of semantic tags (advantages):
a. The page can show a clear structure when the style is removed or lost
b. Conducive to SEO: Establishing good communication with search engines helps crawlers to capture more effective information: crawlers rely on tags to determine the context and the weight of each keyword;
c. It is convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
d. It is convenient for team development and maintenance, and the semantics are more readable. Teams that follow W3C standards follow this standard, which can reduce differentiation.
3. The kernel of the browser:
The IE browser core Trident, Mozilla's Gecko, Chrome's Blink (a branch of WebKit), and Opera's core was originally Presto, now Blink;
Introduce your understanding of the browser kernel?
It is mainly divided into two parts: rendering engine (layout engineer or rendering engine) and JS engine.
Rendering engine: Responsible for obtaining the content of the webpage (HTML, XML, images, etc.), organizing information (such as adding CSS, etc.), and calculating the display mode of the webpage, and then output to the monitor or printer. Different browser kernels will have different interpretations of the syntax of web pages, so the rendering effects are also different. All web browsers, email clients, and other applications that need to edit and display network content need a kernel.
JS engine: parse and execute javascript to achieve dynamic effects of web pages.
4. What are the three layers of front-end pages and what are they? What is the role?
a. Structural layer: It is created by markup languages such as HTML or XHTML, and is only responsible for semantic expression. Solved the "what is the content" problem on the page.
b. Presentation layer: Created by CSS, which solves the problem of "how to display content" on the page.
c. Behavior layer: The script is responsible. Solved the problem of "how the content should respond to events" on the page.
5. The role of Doctype? How to distinguish between strict mode and hybrid mode? What do they mean?
The declaration is at the top of the document, before the label. Tell the browser in what mode to render the document.
The strict mode layout and JS operation mode is to run at the highest standard supported by the browser.
In promiscuous mode, the page is displayed in a loosely backward compatible manner. Simulate the behavior of older browsers to prevent the site from not working.
The absence of DOCTYPE or incorrect format will cause the document to be rendered in promiscuous mode.
6. How many Doctype document types do you know?
Tags can declare three DTD types, which represent strict version, transition version, and frame-based HTML documents.
Seven, HTML and XHTML-what is the difference between the two
a. XHTML elements must be nested correctly.
b. XHTML elements must be closed.
c. The label name must use lowercase letters.
d. The XHTML document must have a root element.
8. Tell me what happened in the process of entering the URL and pressing Enter to see the web page
a. Domain name resolution
b. Initiate TCP 3-way handshake
c. Initiate an http request after establishing a TCP connection
d. The server responds to the http request and the browser gets the html code
e. The browser parses the html code and requests the resources in the html code
f. The browser renders the page to the user
Nine, the understanding of website reconstruction
Refactoring: Without changing the external behavior, simplify the structure and add readability, while maintaining consistent behavior on the front end of the website.
a. Make the front end of the website compatible with modern browsers (for substandard CSS, such as valid for IE6)
b. For mobile platform optimization, optimization for SEO
c. Reduce the coupling between codes and keep the code flexible
d. Compress or merge front-end resources such as JS, CSS, and image
10. There are a lot of pictures on a page (large e-commerce website), and the loading is very slow. What methods do you have to optimize the loading of these pictures to give users a better experience?
a. Images are loaded lazily, and the images are loaded only after scrolling to the corresponding position.
b. Picture pre-loading, if it is a slideshow, album, etc., the previous and next pictures of the currently displayed picture will be downloaded first.
c. Use CSSsprite, SVGsprite, Iconfont, Base64 and other technologies, if the picture is a css picture.
d. If the picture is too large, you can use a specially coded picture. When loading, a very compressed thumbnail will be loaded first to improve the user experience.
What is the difference between title and h1, b and strong, i and em?
Definition of the difference between title and h1 : title is the title of the website, and h1 is the subject of the article.
Function: title summarizes website information and can directly tell search engines and users what theme and content the website is about. It is displayed in the tab bar of the web page; h1 Highlight the topic of the article, face the user, and highlight its visual effect, pointing to the main information of the page, which is displayed on the web page.
Definition of the difference between b and strong : b (bold) is an entity tag, used to bold the text, and strong is a logical tag, which is used to strengthen the character tone.
Difference: The b tag is just a bold style and has no actual meaning. It is often used to express bold text without emphasis or emphasis, such as keywords in article abstracts, product names in review articles, and article introductions; while strong means labels The inner characters are important for emphasis. The default format is bold, but you can add styles through CSS and use other styles for emphasis.
Recommendation : In order to comply with the CSS3 specification, b should be used as little as possible instead of strong
Definition of the difference between i and em : i (italic) is an entity tag, which is used to make characters oblique, and em (emphasis) is a logical tag, which is used to emphasize the
difference between text content : i tag is only italic style, without actual meaning, it is commonly used It expresses unemphasized or emphasized italics, such as biological names, terminology, and foreign words; and em indicates that the characters in the label are important for emphasis. The default format is italics, but you can add styles through CSS. Recommendation : In order to comply with the CSS3 specification, i should be used as little as possible and em instead
11. The advantages and disadvantages of iframe?
advantage:
a. Solve the problem of loading slow third-party content such as icons and advertisements
b. File upload without refresh in iframe
c. iframe cross-domain communication
Disadvantages:
a. iframe will block the Onload event of the main page
b. Cannot be indexed by some search engines
c. The page will increase the server's http request
d. Many pages will be generated, which is not easy to manage.
12. Please elaborate on the shortcomings of table
a. Too deep nesting, such as table>tr>td>h3, will make it difficult for search engines to read, and the most direct loss is to greatly increase the amount of redundant code.
b. Poor flexibility. For example, if you want to set the border and other attributes of tr, it will not work, you have to pass td
c. The code is bloated, when the table is applied to the table, the reading code will be very confusing
d. Confusing colspan and rowspan. When used for layout, frequent use of them will cause confusion in the order of the entire document.
e. The table needs multiple calculations to determine the attributes of its nodes in the rendering tree, and it usually takes 3 times the time of the same element.
f. Not enough semantics
13. What are the inline elements and block-level elements:
Inline elements: ab br i span input select strong
Block-level elements: div p h1—h6 from ul ol li
14. The difference between inline elements and block-level elements:
In-line elements: they will be arranged in the horizontal direction and cannot contain block-level elements. Setting width is invalid, height is invalid (line-height can be set), margin is invalid up and down, and padding is invalid up and down.
Block-level elements: each occupy one row, arranged vertically. Start with a new line and end with a line break.
15. Ways to clear floats:
(1) The parent div defines the height.
(2) Add an empty div tag clear:both at the end.
(3) The parent div defines pseudo-classes: after and zoom.
(4) The parent div defines overflow: hidden.
(5) The parent div defines overflow:auto.
(6) The parent div is also floating, and the width needs to be defined.
(7) The parent div defines display:table.
(8) Add the br tag clear:both at the end.
16. What is the role of Doctype? What is the difference between standard mode and compatibility mode:
- Tell the browser's parser what document standard to parse this document. The absence of DOCTYPE or incorrect format will cause the document to be rendered in compatibility mode.
2. The typesetting and JS operating modes of the standard mode are all run according to the highest standard supported by the browser. In compatibility mode, the page is displayed in a loose backward compatible manner, simulating the behavior of old browsers to prevent the site from not working.
17. Ways to introduce css styles:
1. Inline style: directly set the css style in the style attribute
2. Embedded: write in the label
3. Imported:
4. Linked:
When importing styles on the 18th page, what is the difference between using link and @import?
(1) Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS and define rel connection attributes; while @import is provided by CSS and can only be used to load CSS;
(2) When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;
(3) Import is proposed by CSS2.1 and can only be recognized above IE5, while link is an XHTML tag, which has no compatibility issues.
Nineteen, the three characteristics of css:
1. Inheritance
2. Stackability
3. Priority
Twenty, CSS selector:
1. Tag selector
2. ID selector
3. Class selector
4. Adjacent selector
5. Sub selector
6. Descendant selector
7. Wildcard selector
8. Attribute selector
9. Pseudo-class selector
21. Inheritable styles in css:
Font-size font-family color text-indent
Non-inheritable styles:
border padding margin width height ;
How is the CSS priority algorithm calculated?
* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高
123456723. The difference between the title and alt attributes on the label:
title: Provide information for this attribute
alt: When the picture is not displayed, replace it with text
Twenty-four. Briefly describe the difference between src and href.
src is used to replace the current element, and href is used to establish a connection between the current document and the referenced resource.
src is the abbreviation of source, which points to the location of external resources. The content pointed to will be embedded in the location of the current tag in the document; when src resources are requested, the pointed resources will be downloaded and applied to the document, such as js scripts, img pictures And frame and other elements.
25. What are the two attributes in css that can make text overlap in the vertical and horizontal directions?
Vertical direction: line-height
Horizontal direction: letter-spacing
So the question is, do you know what is the magical effect of letter-spacing?
Answer: It can be used to eliminate the gap between inline-block elements.
26. What is the difference between display: none and visibility: hidden?
display: hide the corresponding element but not occupy the original space of the element.
visibility: Hide the corresponding element and squeeze the original space of the element.
Tell me about the standard CSS box model? What is the difference between the box model of lower version of IE?
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
12327. What is BFC? (Block Formatting Context)
BFC (Block Level Formatting Context), a box created with a new BFC is laid out independently, and the layout of the elements in the box will not affect the elements outside the box.
Two adjacent boxes in the same BFC have overlapping margins in the vertical direction.
BFC refers to the creation of an independent rendering area in the browser. The layout of all elements in this area will not affect the layout of elements outside the area. This rendering area only affects block-level elements.
Twenty-eight, CSS3 new features
- CSS3 implements border-radius, box-shadow,
- Add special effects to text (text-shadow,), linear gradient (gradient), rotation (transform)
- transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// rotate, zoom, position, tilt
- Added more CSS selectors multi-background rgba
- The only pseudo-element introduced in CSS3 is ::selection.
- Media query, multi-column layout
- border-image
Twenty-nine. List the values of display and explain their functions. What is the value of position, relative and absolute positioning origin?
1. The value of display
block Block type. The default width is the width of the parent element, you can set the width and height, and display in a new line.
The default value of none. It is displayed like the type of inline element.
inline Inline element type. The default width is the content width, and the width and height cannot be set, and the same is displayed.
The default width of inline-block is the content width, and the width and height can be set to display in the same line.
The list-item is displayed like a block type element, and style list tags are added.
table This element will be displayed as a block-level table.
inherit specifies that the value of the display attribute should be inherited from the parent element.
2. The value of position
absolute: Generate absolutely positioned elements, which are positioned relative to the first parent element other than static positioning.
fixed: (old IE does not support) Generate absolutely positioned elements, positioned relative to the browser window.
relative: Generate relatively positioned elements and position them relative to their normal positions.
static: The default value. No positioning, the element appears in the normal flow
* (Ignore top, bottom, left, right z-index declarations).
* inherit specifies that the value of the position attribute is inherited from the parent element.
30. What is the difference between browser standard mode and weird mode?
1) In strict mode: width is the content width, the real width of the element = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
In quirks mode: width is the actual width of the element, content width = width-(padding-left + padding-right + border-left-width + border-right-width)
2) You can set the height and width of the elements in the row
In Standards mode, setting wdith and height for span and other inline elements will not take effect, but in quirks mode, it will take effect.
3) The height can be set as a percentage
In the standards mode, the height of an element is determined by the content it contains. If the parent element does not set the height, setting a percentage of the height of the child element is invalid.
4) Using margin:0 auto to set horizontal centering will be invalid under IE
Use margin:0 auto to center the element horizontally in standards mode, but it will fail in quirks mode. The solution in quirk mode is to use the text-align attribute:
body{text-align:center};#content{text-align:left}
5) Setting image padding in quirk mode will be invalid
6) The font attributes in Table in quirk mode cannot inherit the settings of the upper layer
7) White-space:pre will fail in quirk mode
8) Different interpretations of the box model
31. Developers often optimize performance after the css/js code goes online. Starting from the user refreshing the web page, what are the places where a js request is generally cached?
dns cache, cdn cache, browser cache, server cache.
32. Why is it more effective to use multiple domain names to store website resources?
CDN caching makes it easier to break through browser concurrency limits
Save cookie bandwidth
Save the number of connections to the main domain name and optimize page response speed
Prevent unnecessary safety issues
Thirty-three, pseudo-classes and pseudo-elements:
CSS pseudo-classes: used to add special effects to certain selectors.
CSS pseudo-elements: used to add special effects to certain selectors.
34: New pseudo-classes and pseudo-elements in css3
Pseudo-element:
| p:first-of-type | Select each element that belongs to the first element of its parent element. |
|---|---|
| p:last-of-type | Select each element that belongs to the last element of its parent element. |
| p:only-of-type | Select each element that belongs to the only element of its parent element. |
| p:only-child | Select each element that belongs to the only child element of its parent element. |
Pseudo class:
| :hover | Add styles to the hovering element |
|---|---|
| :active | Add style to the activated element |
| :focus | Add styles to the focused element |
| :link | Add styles to unvisited links |
Thirty-five, html5 layout method:
1. Floating
2. Positioning
3. Column layout
4. Flexible layout
5. Responsive layout
36. Advantages of flexible layout:
1 Strong adaptability, very practical when making interfaces with different screen resolutions
2 You can freely divide the width and height of elements according to width and proportion
3 You can easily change the display order of elements
4 The flexible layout is fast and easy to maintain
37. Content-box and border-box. Why does content-box seem more reasonable, but border-box is still used frequently?
- content-box is W3C's standard box model element width+padding+border
- border-box is IE’s weird box model. Its element width is equal to the content width. The content width includes padding and border
- For example, sometimes adding padding or border on the basis of elements will break the layout, but it can be easily done by using border-box.
38. Realize three DIVs equally divided and arranged in a row (inspect border-box)
1. Set the border-box width to 33.33%
2.flexbox flex: 1
39. How to move from the upper left corner to the lower right corner of a DIV, and what are the methods? How to achieve it?
- Change the left value to window width-div width top value to window height = div height
- jquery's animate method
- css3 transition
Forty, the difference between rem and em?
em is relative to the parent element, rem is relative to the root element
Forty-one, progressive enhancement and graceful degradation
Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then improve effects, interactions, and additional functions for advanced browsers to achieve a better user experience.
Graceful degradation: Build a complete function at the beginning, and then be compatible with lower version browsers.
42. HTTP and HTTPS
The HTTP protocol is usually carried on top of the TCP protocol, and a security protocol layer (SSL or TSL) is added between HTTP and TCP. At this time, it becomes what we often call HTTPS.
The default HTTP port number is 80, and the HTTPS port number is 443.
Forty-three, performance optimization issues
Code level: Avoid using css expressions, avoid using advanced selectors, and wildcard selectors.
Cache utilization: cache Ajax, use CDN, use external js and css files for caching, add Expires header, configure Etag on the server side, reduce DNS lookups, etc.
Number of requests: Combine styles and scripts, use css image sprites, load image resources outside the initial first screen on demand, and delay load static resources.
Request bandwidth: compress files, open GZIP,
Optimization at the code level
Use hash-table to optimize search
Use less global variables
Use innerHTML instead of DOM operations to reduce the number of DOM operations and optimize javascript performance
Use setTimeout to avoid page unresponsiveness
Cache DOM node search results
Avoid using CSS Expression
Avoid global queries
Avoid using with (with will create its own scope and increase the length of the scope chain)
Combining multiple variable declarations
Avoid empty Src for pictures and iFrames. Empty Src will reload the current page, affecting speed and efficiency
Try to avoid writing Style attributes in HTML tags
Mobile performance optimization
Try to use css3 animation and turn on hardware acceleration.
Use touch event instead of click event appropriately.
Avoid using css3 gradient shadow effect.
You can use transform: translateZ(0) to turn on hardware acceleration.
Do not abuse Float. Float has a relatively large amount of calculation during rendering, so minimize the use
Do not abuse web fonts. Web fonts need to be downloaded, parsed, and redrawn on the current page to minimize their use.
Reasonably use requestAnimationFrame animation instead of setTimeout
The properties in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) will trigger GPU rendering, please use them reasonably. Overuse will cause the phone to consume more power
The PC terminal is also applicable to the mobile terminal
Forty-four, ES6 understanding:
Syntactic sugar (arrow functions, class definition, inheritance), and some new extensions (arrays, strings, objects, methods, etc.), redefinition of scope, and solutions for asynchronous programming (promise, async, await) , The emergence of deconstruction assignment
ES6 common features
Variable definitions (let and const, mutable and immutable, special cases of const defined objects) new API for
deconstructing and assigning
template string
arrays (example: Array.from(), entries(), values(), keys())
arrow Function (rest parameter, expansion operator, :: binding this)
Set and Map data structure (set instance member value uniquely stores key value, map instance stores key-value pairs)
Promise object (front-end asynchronous solution evolution History, generator function, async function)
Class syntax sugar (super keyword)
How to convert es6 to es5?
Use Babel transcoder, Babel's configuration file is .babelrc, stored in the root directory of the project. The first step in using Babel is to configure this file.
Forty-five, understanding of MVC and MVVM
MVC
View sends commands to Controller
After the Controller completes the business logic, it requires the Model to change state
Model sends new data to View and users get feedback
All communication is one-way.
Angular uses two-way binding (data-binding): View changes are automatically reflected in ViewModel, and vice versa.
Components Model, View, ViewModel
View: UI interface
ViewModel: It is an abstraction of View, responsible for the information conversion between View and Model, and transmits the Command of View to Model;
Model: Data access layer
Forty-six, the cookie and the session of the differences:
1. The cookie data is stored on the client's browser, and the session data is stored on the server.
2. The cookie is not very secure, others can analyze the cookies stored locally and cheat by cookies
The session should be used for safety.
3. The session will be saved on the server for a certain period of time. When access increases, it will take up the performance of your server
Considering to reduce server performance, cookies should be used.
4. The data saved by a single cookie cannot exceed 4K. Many browsers limit a site to save a maximum of 20 cookies.
47. Why HTTPS is safe
Because network requests need to be forwarded by many server routers in the middle. Intermediate nodes may tamper with information, and if HTTPS is used, the key is only available between you and the end station. The reason why https is more secure than http is because it uses ssl/tls protocol for transmission. It includes certificates, uninstallation, traffic forwarding, load balancing, page adaptation, browser adaptation, refer delivery, etc. Ensure the safety of the transmission process
48. Please name three ways to reduce page load time.
- 1. Optimize pictures
- 2. Selection of image format
- 3. Optimize CSS
- 4. Add a slash after the URL
- 5. Mark the height and width
- 6. Reduce http requests (merge files, merge pictures).
Forty-nine, what is FOUC? How do you avoid FOUC?
Because css is introduced using @import or there are multiple style tags and css files are introduced at the bottom of the page, the css file is loaded after the html, which causes the page to flicker and the screen is flickered.
Use link to load the css file and place it in the head tag