1. What is Web semantics and its advantages
Web semantematization refers to the representation of information contained in a page by HTML tags, including the semantematization of HTML tags and the semantematization of CSS naming
Semantic representation of HTML tags refers to the proper representation of textual structure by using tags that contain semantics, such as H1-H6
The semantic naming of CSS refers to adding meaningful classes to HTML tags and adding unexpressed semantics to IDS. For example, Microformat adds class descriptions that conform to rules
Advantage:
1) The page presents a clear structure after removing styles
2) Blind people read better with screen readers
3) Search engines better understand the page, conducive to inclusion
4) Facilitate the sustainable operation and maintenance of team projects
2, the front end needs to pay attention to SEO
1. Reasonable title, description and keywords
Title value to emphasize the key can, important keywords appear not more than 2 times, and to the front, different page title to be different; Description summarizes the content of the page, the length is appropriate, not excessive stacking keywords, different page description is different; 2. Semantic HTML code, in line with W3C specifications: semantic code makes it easy for search engines to understand web pages 3. Important content HTML code in the first: search engines grab HTML order from top to bottom, some search engines have restrictions on the length of grab, ensure that important content will be captured 4. Don’t use JS output for important content: crawler won’t execute JS to get content 5. Use iframe less: search engine won’t grab content in iframe 6. Alt must be added to non-decorative images 7. Speed up your site: Site speed is an important indicator of search engine ranking
3. What are the methods of session tracking in Web development
1) cookie
2) session
3) URL rewrite
4) Hide input
5) IP address
4. How to optimize images in front-end development
1, do not use pictures, try to use CSS3 instead. For example, you want to implement embellishments such as translucency, borders, rounded corners, shadows, gradients, and so on
2. Use vector SVG instead of bitmaps
3, use font icon Webfont, CSS Sprites, etc
4. Use CSS or JavaScript for preloading
5. Set a reasonable cache according to the HTTP protocol
6. WebP picture format can bring optimization to the front end. WebP supports lossless and lossy compression, dynamic and static images, and the compression ratio is better than GIF, JPEG, JPEG2000, PG and other formats
5. What you learned about Web attack techniques
(1) XSS (Cross-site Scripting) : Refers to an attack that runs illegal HTML tags or JS in the browsers of registered users of Web sites with security vulnerabilities. (2) SQL injection attack (3) CSRF (cross-site request forgery) : refers to the attacker through the set of traps, forced to complete the authentication of the user’s personal information or setting information and other status updates
6. What is progressive enhancement
Progressive enhancement refers to the emphasis on accessibility, semantic HTML tags, external style sheets, and scripting at Web design time.
Ensure that everyone can access the basic content and functionality of the page while providing a better user experience for advanced browsers and high-bandwidth users
The core principles are as follows:
All browsers must have access to basic content all browsers must have access to basic functionality all content is contained in semantic tags that provide enhanced layout through external CSS and enhanced functionality through non-invasive, external javascript
7. Which operations cause memory leaks
A memory leak is any object that persists after you no longer own or need it. The garbage collector periodically scans objects and counts the number of other objects that refer to each object. If the number of references to an object is zero (no other object has ever referenced it), or the only reference to the object is looped, then the object’s memory is reclaimed. Using a string instead of a function as the first argument to setTimeout causes a memory leak. Closures, console logging, loops (a loop is created when two objects reference and retain each other)
What happens from entering the URL to loading the page
Generally speaking, it can be divided into the following processes
-
The DNS
-
A TCP connection
-
Sending an HTTP request
-
The server processes the request and returns HTTP packets
-
The browser parses the rendered page
-
Connect the end of the
9. Describe Repaint & Reflow and how to optimize it
When you change the background color, border color, or font color, the browser redraws the color
When a page element changes (width, height, position, create element), the entire page is rearranged, and the browser recalculates the structure and renders the page again, called DOM backflow
Backflow must occur redraw, redraw does not necessarily cause backflow.
Solution:
Use createDocumentFragment or template string to concatenate the elements of the operation and pack them into a page
10. How to optimize website performance
Content:
1. Reduce HTTP requests: Merge files, CSS sprites, inline Image 2. Reduce DNS queries: The browser cannot download any files from this host until DNS queries are complete. Methods: DNS caching, distributing resources to the appropriate number of host names, balancing parallel downloads and DNS queries 3. Avoid redirection: Redundant intermediate access 4. Make Ajax cacheable 5. Lazy loading of unnecessary components 6. Reduce the number of DOM elements 8. Place resources in different domains: Browsers can only download a limited number of resources from one domain at a time, and increasing the number of domains can increase parallel downloads 9. Reduce the number of IFrames 10. Reduce 404 pages
The Server side
Use CDN. 2. Add Expires or cache-Control headers. Flush Buffer Early 6. Ajax GET request 7. Avoid empty SRC img tags
Cookie aspects
1. Reduce the cookie size. 2
CSS aspects
1. Put stylesheets at the top of the page 2. Don’t use CSS expressions 3. The Filter of IE is not used
In Javascript
1. Put scripts at the bottom of the page 2. Bring in javascript and CSS from outside 3. Compress javascript and CSS 4. Delete unnecessary scripts 5. Reduce DOM access 6. Design event listeners properly
pictures
1. Optimize images: select color depth and compress according to actual color requirements 2. Optimize CSS sprites 3. 4. Make favicon.ico small and cacheable
11. How to avoid XSS and CSRF
Defending against XSS attacks:
A: The HttpOnly browser prevents the JS of the page from accessing the Cookie with the HttpOnly attribute. B: Input check XSS Filter Performs format check on the input content, similar to whitelist, to invalidate some attacks based on special characters. Implement the same input check in client-side JS and server-side code c: Output check When a variable is output to an HTML page, it can be encoded or escaped to defend against XSS attacks
Defending against CSRF attacks:
A. Verification code, Referer Check to Check whether the request is from a legitimate source (can be forged)