preface

According to the moOCs “Quick Handling of front-end technology and matching big factory interview requirements” course organized by the topic, updated. If you think you’ve got it covered, check out my previous posts on this topic

Take interview questions often

1. Performance optimization

1.1 the principle of

  • ① Use more memory, cache, or other methods
  • ② Reduce CPU computation and network loading time
  • ③ Performance optimization for all programming — space for time

1.2 Make loading faster

  • ① Reduce resource volume: compress code
  • ② Reduce access times: merge code, SSR server-side rendering, caching
  • ③ Use a faster network: CDN

1.3 Make rendering faster

  • ①CSS is placed in the head, JS is placed at the bottom of the body
  • ② Start executing JS as soon as possible with DOMContentLoaded trigger
  • ③ Lazy loading (image lazy loading, slide loading more, pagers)
  • ④ Cache DOM queries
  • ⑤ Frequent DOM operations are merged and inserted into the DOM structure
  • ⑥ Throttling, anti-shake and other common performance optimization methods

1.4 the cache

  • (1) Add the hash suffix to static resources to calculate the hash based on the file content
  • ② If the file content remains unchanged, the hash and URL will remain unchanged
  • ③ If the URL and file are unchanged, the Http cache mechanism is automatically triggered and 304 is returned

1.5 SSR

  • ① Server-side rendering: load and render web pages and data together
  • ② Non-SSR (front and back end separation) : load the page first, then load the data, and then render the data

1.6 a lazy loading

  • Page content data is too much, you can do pagers, which can save a page load time
  • Slide lazy load, when there is no data at the bottom to load new content
  • Click lazy load, click the button, similar to load more trigger load new content

1.7 Anti-shake and packaging

“Image stabilization“

  • Anti-shake, as the name implies, to prevent jitter, so as not to mistake an event for many events, typing the keyboard is a daily contact with anti-shake operation
  • “[Anti-shake is important to clear zero]” (after watching the anti-shake throttling experience this key point)

“Application Scenarios” (to help you better understand anti-shake)

  • ① Login, SMS and other buttons to avoid users click too fast, so that multiple requests are sent, need to shake
  • ② When adjusting the browser window size, the number of resize times is too frequent, resulting in too much calculation, so it needs to be in place once
  • ③ Save the text editor in real time. Save it after 1 second if there is no change operation
  • ④ When the user enters the end or pause, the change event will be triggered. Similar to the search box, the content that may be searched will appear after the input information is stopped for 1 second

“Handwritten anti-shake package“

function debounce ( fn , delay = 500 ) {
 
    let timer = null // The timer is inside the closure and is not exposed to the outside world, so as not to accidentally obtain the modification and cause errors

    return function () {
 if( timer ){  clearTimeout( timer )  } // Empty the timer   timer = setTimeout( (a)= > {   fn.apply( this , arguments )   timer = null   } , delay )  }  } Copy the code

1.8 Throttling and its packaging

“The throttle“

  • As the name suggests, control the flow of water. Control the frequency of events, such as once a second or even once a minute. Similar to traffic limiting controlled by servers and gateways
  • “【 Throttling focuses on locking 】“

“Application Scenarios” (to help you better understand anti-shake)

  • ① Scroll event to calculate position information every second
  • ② Browser plays events and controls the calculation of progress information every second
  • (3) When dragging an element, it is necessary to get the drag location of the element at any time. At this point, throttling is used, and no matter how fast the drag speed is, it is controlled to trigger once every 100ms

“Handwritten throttling package“

function throttle ( fn , delay = 100 ) {

    let timer = null

    return function (){
  if( timer ){  return  }   timer = setTimeout( (a)= > {   fn.apply( this , arguments ) // if fn () is not used, an error will be reported and the event source object cannot be obtained   timer = null   } , delay ) // The scheduled tasks that are repeated within the delay period are cleared  } } Copy the code

1.9 Why Is clearTimeout(Timer) Used for Alarm Stabilization and Return for Throttling?

  • If the triggering interval is longer than time, the last timer should be cleared each time it is shorter than time. However, throttling is triggered only once every time no matter how many times it is triggered within time. Therefore, return is used
  • Assuming time=100ms, a person enters a character every 50ms for 10 consecutive times, i.e., after 500ms, anti-shake will only trigger once and throttling will trigger 5 times. Why is that? Because the meaning of anti-shake is to trigger the event after 100ms input stop, and throttling is to control 100ms trigger an event, so once the anti-shake trigger, throttling will trigger five times. (Combined with the “experience of anti – shake focus on zero, throttle focus on lock” these two sentences)

2. Web security

2.1 XSS attacks

“XSS cross-site request Attack” the following are possible XSS injection attacks

  • In text embedded in HTML, malicious content is injected as script tags
  • In inline JavaScript, concatenated data breaks the original limits (strings, variables, method names, etc.)
  • In tag attributes, malicious content includes quotes to override attribute values and inject other attributes or tags
  • In the href, SRC and other attributes of the tag, it contains javascript: and other executable codes
  • Inject uncontrolled code in events such as onload, onError, and onClick
  • In the style attribute and tag, include something like background-image:url(“javascript:…”) ); (newer versions of browsers are already defensible)
  • In the style attribute and tag, contain something like expression(…) CSS expression code (newer versions of browsers are already defensible)

    “XSS attack scenario“

  • A blog site, I published a blog, which embedded<script>Script, script content: get cookies, sent to my server (server with cross-domain) read the cookie will be stolen

“XSS prevention“

  • (1) Replace special characters, for example<into&lt;.>into&gt;
  • (2) the<script>Will become&lt; script&gt;, instead of executing as a script
  • ③ The front end should be replaced, and the back end should also be replaced, double insurance
  • (4) The mainstream front-end framework has been well prevented

2.2 CSRF attacks

“CSRF cross-site request masquerade“

“CSRF attack scenario“

  • You’re shopping, you see something, and the item ID is 100. The paid interface isxxx.com/pay?id=100“, but there is no verification (now the payment will have verification, as explained here, so assume there is no verification). I am the attacker. I have my eye on a product with id 200. I think you sent an E-mail with a catchy subject line. But the body of the email is hidden<img src='xxx.com/pay?id=200'>(with other executing payment scripts) You clicked on this email and bought the product with ID 200 for me.

“CSRF prevention“

  • Using the POST interface
  • Add authentication, such as password, SMS verification code, and fingerprint

3. Describe the entire process from entering the URL to rendering the page

“The loading process“

  • ①DNS resolution: domain name -> IP address
  • ② The browser sends an Http request to the server based on the IP address
  • ③ The server processes the Http request and returns it to the browser

“Rendering process“

  • ① Generate THE DOM Tree from the HTML code
  • ② Generate CSSOM according to CSS code
  • ③ Integrate DOM Tree and CSSOM to form Render Tree
  • ④ Render the page according to the Render Tree
  • (5) meet<script>The rendering is paused, the JS code is loaded and executed first (it is possible for the JS code to change the DOM structure and re-render), and then it is finished
  • ⑥ Until the Render Tree is finished

4. Common Linux commands

“File and folder operations“

  • ls xxxView folders (tiled expansion)
  • ls -aAll, all, all, all Hidden files at the beginning)
  • llView folders (List)
  • ll xxx(View files in XXX folder)
  • mkdir xxx(create XXX folder)
  • rm -rf xxx(delete XXX and all subfiles)
  • cd xxx(Enter XXX directory)
  • mv abc xxx(Rename ABC file to XXX file)
  • Mv XXX SSS path(Move XXX file to SSS path directory)
  • cp a.js a1.js(Copy a.js to a1.js)
  • rm a1.js(Delete a single file directly)
  • touch d.js(Create new file d.js)
  • vi d.js(Create or enter a file d.js and enter edit)
  • cat xxx(View all contents of XXX file without entering)
  • head xxx(Check the first few lines of the XXX file without entering)
  • grep "babel" xxx(Find Babel content in XXX file)

“Vim editor operation“

  • Press I to start editing
  • Esc can exit editing mode
  • :wKeep writing
  • :qexit
  • :wq(Save and exit)
  • :q!(Forced exit without saving)

At the end of the article

If you think my writing is good, you can give me a thumbs up. If there is anything wrong or bad, please comment and point out so that I can correct it. (This series is coming to an end, so you can review the previous ones, and I will update some other ones. Please stay tuned.)

Other articles

  • 5. Front-end basics — Http, Ajax, cross-domain
  • Front end basics ④ – events and DOM
  • ③ Asynchronous (Interview scenario)
  • Front End Basics ② — Scopes and closures
  • Front end basic knowledge ① — CSS interview questions
  • Gluten series ① — Didi SP side interview question
  • Gluten series ② — Didi intern cool the meridian

This article is formatted using MDNICE