1. What SEO should be paid attention to at the front end?

What is SEO?

SEO (Search Engine Optimization) Search Engine OptimizationCopy the code
  1. Follow W3C specification, semantic HTML code A. non-decorative images with Alt B. Use appropriate tags to leave appropriate things c. Important content without JS output: crawlers do not execute JS to get content D. Crawlers don’t crawl iframe content, use iframe less e. important content HTML comes first

2. Speed up your website

2. What is the difference between Alt and title for the IMG tag

Common: all mouse hover up display

Alt is a unique attribute of the IMG tag. It is an equivalent description of the image content. It is displayed when the image is not loaded, which can improve the accessibility of the image

Title: All tags are present, and the mouse hover displays relevant content

What is a closure?

A closure is A function that can access variables inside other functions

Closures exist for a reason: We can indirectly access variables inside functions

Closures allow you to access the scope of an outer function in an inner function

function makeAdder(x) { return function(y) { return x + y; }; } var add5 = makeAdder(5); var add10 = makeAdder(10); console.log(add5(2)); // 7 console.log(add10(2)); / / 12Copy the code

4. Typeof type judgment?

Typeof displays the correct type for each base type (symbol type)

// value typeof 37 === 'number'; Typeof = = = 3.14 'number'; typeof(42) === 'number'; typeof Math.LN2 === 'number'; typeof Infinity === 'number'; typeof NaN === 'number'; Typeof Number(1) === 'Number '; // Typeof Number(1) ===' Number '; // Number attempts to parse the argument into a numeric typeof 42n === 'bigint'; // String typeof '' === 'string'; typeof 'bla' === 'string'; typeof `template literal` === 'string'; typeof '1' === 'string'; Typeof (typeof 1) === 'string'; // typeof always returns a String typeof String(1) === 'String '; // String converts arbitrary values to strings, safer than toString // Boolean values typeof true === 'Boolean '; typeof false === 'boolean'; typeof Boolean(1) === 'boolean'; // Boolean() converts arguments based on whether they are true or imaginary typeof!! (1) === 'boolean'; // Two calls! The (logical non) operator is equivalent to Boolean() // Symbols typeof Symbol() === 'Symbol '; typeof Symbol('foo') === 'symbol'; typeof Symbol.iterator === 'symbol'; // Undefined typeof undefined === 'undefined'; typeof declaredButUndefinedVariable === 'undefined'; typeof undeclaredVariable === 'undefined'; // Object typeof {a: 1} === 'object'; / / using Array. IsArray or Object. The prototype. ToString. Call / / distinguish between Array and ordinary objects typeof [1, 2, 4) = = = 'Object'; typeof new Date() === 'object'; typeof /regex/ === 'object'; // See the regular expressions section for historical results // The following examples are confusing, dangerous, and useless. Avoid them. typeof new Boolean(true) === 'object'; typeof new Number(1) === 'object'; typeof new String('abc') === 'object'; Typeof function() {} === 'function'; typeof class C {} === 'function' typeof Math.sin === 'function';Copy the code

5. The difference between == and ===

The == equality operator, which returns Boolean results, tries strong conversions and compares different operands

=== strictly equal to the operator, strictly equal to no type conversion attempt, will directly treat the operands of different types as different

6. Window.onload vs. DOMContentLoaded

DOMOnloaded fires when the page is loaded, but onLoad fires when the page elements and resources are loaded

7. HTTP request method and purpose

Get: parameters will be carried in the URL post: parameters can be placed in the body, you can submit data to the url specified resource put: specifies the location of the resource on the server

8. What happens between the browser entering the URL and the page being displayed (difficult, learn separately)

  1. Domain name resolution: The browser sends the requested URL to the DOMAIN Name System (DNS), finds the real IP address, and sends the request to the server. DNS reverse lookup: IP -> domain name
  2. The browser receives data from the background: The server sends data to the background and returns data. The browser receives files (HTML, JS, CSS, and image resources).
  3. Browser parsing resource: the browser parses the loaded resource syntax and establishes the corresponding data structure (HTML DOM structure).
  4. Load the resource file and render the page

Detailed edition notes

9. HTTP status codes and their meanings

  • 1xx: indicates the information status code100 ContinueGenerally, after the header is sent, the server sends this message to confirm the POST request
  • 2xx: success status code200 OK 201 created 202 accepted
  • Xx: redirect
  • 4xx: Client error
  • 5xx: Server error

TODO parsing

10. How to optimize image loading

TODO parsing

  • Image lazy loading, you can add a scrolling event in the invisible area of the page to judge the distance between the image position and the top of the browser and the distance between the page, if the former is less than the latter, the first loading.
  • If it is a slide, album, etc., you can use the image preloading technology to download the first and last images of the current display.
  • If the image is CSS image, you can use CSSsprite, SVGsprite, Iconfont, Base64 and other technologies.
  • If the image is too large, you can use a specially encoded image that will load with a particularly compressed thumbnail to improve the user experience.
  • If the image display area is smaller than the actual size of the image, compress the image on the server based on service requirements. The compressed image size is the same as that on the display.