1. Front-end structure organization and file naming specification

The front-end structure is organized by the following principles:

  • The organization of code in the same project should be clear
  • Files of the same type are grouped into the same folder
  • File naming rules must be consistent and meaningful

HTML naming conventions

  • HTML code all tag names and attributes should be lowercase
  • Attribute values should be enclosed in quotes
  • The id and class of an element are named according to a specific specification
  • The code is indented 4 Spaces
  • Add necessary comments to the HTML code block

CSS Naming conventions

  • Use the Class selector for styling whenever possible
  • Class names are prefixed by the class name of the parent element, using a – concatenation
  • Class names and styles are separated by Spaces
  • Add CSS code comments

JavaScript naming conventions

  • Variable names are case sensitive. The first character cannot be a number, and Spaces and other punctuation marks are not allowed
  • Use names that make sense
  • Disallow JavaScript keywords and retain full names
  • Add JavaScript code comments

2. Code and performance optimization

1. HTML code optimization

The purpose of optimizing HTML code on the one hand is to make the site more search engine friendly, a beautiful front-end site is user-friendly, and in all aspects of the optimized site is search engine friendly, is the ideal site. On the other hand, it also facilitates the maintenance of the code. The HTML code of a standard web page should satisfy the following criteria as much as possible:

  1. Close the HTML tag correctly, as in<div>box</div> .
  2. Appropriate indentation between HTML code levels, using two or four Spaces.
  3. Attribute values need to use double quotation marks, as shown in<div id="mydiv">box</div>
  4. Effective separation of structure and style, i.e. separation of HTML and CSS files.
  5. Effective separation of structure and behavior, i.e. separation of HTML and JS files.
  6. Use semantic tags, such as header tags<header>.
  7. Remove redundant container elements, less code level.
  8. Instead of using tables for layout, use DIV+CSS. You can also use the online website (http://validator.w3.org/) to format and validate the HTML code.

2. SEO optimization

  • Reasonable title, description, keywords: search for the weight of the three decreased one by one, the title value can emphasize the key, important keywords should not appear more than 2 times, and to the front, different pages of title to be different; Description summarizes the content of the page, the length is appropriate, not excessive stacking keywords, different page description is different; Keywords list the key keywords
  • Semantic HTML code that conforms to W3C specifications: semantic code makes it easy for search engines to understand web pages
  • Important content HTML code in the front: search engines grab HTML order from top to bottom, some search engines have restrictions on the length of the grab, to ensure that important content will be captured
  • Do not output important content in JS: crawlers do not execute JS to retrieve content
  • Use iframes sparingly: Search engines do not crawl iframes
  • Alt must be used for non-decorative images
  • Improve site speed: Site speed is an important indicator of search engine ranking

3. The CSS optimization

  • CSS style redundant style removal, structure optimization
  • Place the style sheet at the top of the page
  • Use less SCSS expressions
  • The @import import style is not applicable with link
  • Compress CSS
  • Disable loading effects with GIF images (reduce CPU consumption and improve rendering performance)
  • Use CSS3 code instead of JS animation (avoid redrawing, rearranging and backflow as much as possible)
  • For some small ICONS, you can use Base64-bit encoding to reduce network requests.
  • Page header blocks the page; (Because the JS thread and the Renderer thread are mutually exclusive in the Renderer process)
  • Instead of manipulating style directly, set className when there are many styles to set

4. Optimize the server

  • Reduce HTTP requests, merge files, Sprite images
  • Reduce DNS queries and use caching
  • Reduce the number of Dom elements
  • Use the CDN
  • Configure ETag, a means of HTTP caching
  • Use Gzip compression for components
  • Reduce the size of cookies

5. JavaScript optimization

  • Separation of code from structure: The effective separation of HTML and JavaScript. There are two kinds of separation, one is the separation of JavaScript in HTML, and the other is the separation of HTML in JavaScript.
  • Separation of style and structure: The effective separation of CSS and HTML, in this case, CSS and HTML in JavaScript.
  • Separation of data from code: Can also be considered a manifestation of separation of front and back ends. The backend interface is only responsible for returning jSON-formatted data, not tagged or even combined data with styles or JavaScript. The data can be simulated using JSON files or related plug-ins such as mocks. This has the advantage of taking the data out of the code and not affecting the code when the data changes.
  • JavaScript DOM optimization: Minimize rearrangements and redraws; Change styles with cssText; Batch modify DOM; Improves file loading speed.
  • Place the script at the bottom of the page
  • Bring in js externally
  • Compression js
  • Use Eslint syntax for detection
  • Reduce Dom manipulation
  • Proficient in using design patterns
  • Disallow iframe (block parent document onload event)
  • Hollow href and SRC blocks loading of other resources on the page
  • Web gZIP, CDN hosting, data cache, picture server

6. Webpack optimization

  • Code compression plugin UglifyJsPlugin
  • Gzip compression is enabled on the server
  • Load the resource file require.ensure on demand
  • Optimize source-map in DevTool
  • Strip the CSS file and package it separately
  • The removal of unnecessary plug-ins is usually the result of the same set of configuration files for the development and production environments
  • The development environment does not do meaningless work such as extracting CSS to compute file hash etc
  • Configuration devtool
  • Optimizing the search path at build time indicates whether a directory needs to be built or not

7. Load optimization:

  • Merge CSS and JavaScript
  • Merge small images and use sprites
  • Cache all cacheable resources
  • Use external links to reference CSS and JavaScript
  • Compress HTML, CSS, JavaScript
  • To enable GZip
  • Use first screen loading, on-demand loading, scrolling loading
  • Load via Media Query
  • Adding a Loading progress bar
  • Reduce the Cookie
  • Avoid redirection
  • Load third-party resources asynchronously

8. Page rendering optimization

  • The HTML document structure should have as few layers as possible, preferably no more than six
  • Try to put the script behind to avoid blocking page loading
  • A small number of first screen styles can be placed on a sticky note
  • Keep the style hierarchy as simple as possible
  • The script reduces DOM manipulation, reduces backflow, and tries to cache style information that accesses the DOM
  • Minimize JS modifications by changing the class name
  • Reduce DOM lookups and cache DOM lookups
  • Try to stop the animation when it’s off-screen or scrolling

9. Image optimization

  • Use wisdom figure
  • Use (CSS3, SVG, IconFont) instead of images
  • Using Srcset
  • WebP is superior to the JPG
  • PNG8 superior to GIF
  • The image is not wider than 640

10. Script optimization

  • Reduce redrawing and reflow
  • Cache Dom selection and computation
  • Use event processing to avoid batch binding events
  • Use ID selectors whenever possible
  • Use TouchStart and Touchend instead of click

Front-end resource optimization

  • Sprite Mosaic: CSS Sprite, also called CSS Sprite, is a web application processing method that combines scattered background images into a large image and uses the background-position property of CSS to locate the background so as to reduce the number of image requests and speed up the loading speed.
  • Compression: Code compression, packaging tools (compression JavaScript, compression CSS)
  • Preloading: Preloading simply means that all required resources are requested and loaded locally in advance so that they can be accessed directly from the cache when they are needed later.
  • Lazy loading: the first screen load, the technical display to use the technique is lazy loading, that is, to the visual area to load again.