Front-end interview questions CSS: https://my.oschina.net/u/3674939/blog/1637877

Front-end interview questions HTML: https://my.oschina.net/u/3674939/blog/1637883

Front-end interview questions JavaScript: https://my.oschina.net/u/3674939/blog/1640595

Front-end security

XSS (Cross Site Script): Cross-Domain Scripting Attack

Principle: inject script attack into page

Prevention: Disinfection

CSRF (Cross Site Request Forgery): Cross Site Request Forgery

Rationale: Fake a request from a trusted user to exploit a trusted website. A user logs in to website a, clicks or triggers a link in website b that can access an interface of website a

Prevention: perform token verification or various verifications

error handling

Front-end errors: code errors and resource loading errors

Error catch method:

Code error:try...cath window.onerror

Resource loading error:object.onerror performance.getEntries() error事件

Report error: ajax and image objects

(new Image()).src = 'http://api'

page load

The process from entering url to getting html

The browser obtains the IP address of the domain name according to the DNS server resolution
Send an http request to the machine at this IP address
The server receives, processes and returns the http request
The browser gets the return content

Reference: http://www.dailichun.com/2018/03/12/whenyouenteraurl.html

The process by which the browser renders the page

Generate DOM Tree based on HTML structure parsing
Generate CSSOM based on CSS parsing
Integrate DOM and CSSOM to form Render Tree
Start drawing according to the Render Tree 5. The browser sends the information of each layer to the GPU (rendering engine), and the GPU composites each layer and displays it on the screen

Reference: segmentfault.com/a/1190000014070240

Reflow (reflow) and redraw

reflow (reflow): The browser rearranges the elements in the page according to the calculation result, that is, rearranges the layout
trigger:

DOM operations, such as additions, deletions, and changes

Modify some styles, such as width and height, margins

Modify the default font size of web pages

repaint (repaint): the browser will repaint the element on the page to be rendered

-trigger:

After triggering reflow

Modify style

window.onload和DOMContentLoaded

All resources of the page will be executed after loading, including css, pictures, videos, etc.
The DOM can be executed after rendering. At this time, css, pictures, and videos are not loaded (jQuery, zepto.js method)

performance optimization

Resource loading optimization

Compression and merging of static resources
Static resource caching (reasonable use of browser caching)
Accelerate with CDN
Use server-side rendering
DNS/link pre-resolving 6. Reduce http requests

Reference: https://mp.weixin.qq.com/s/hzqhAykXJexMO5x5N51Fog

Rendering optimization

Lazy loading (image lazy loading, pull-down loading more)

Image lazy loading principle code:

<img id="img" src="preview.png" data-realsrc="real.png"/>
<script type="text/javascript">
  var img = document.getElementById('img');
  img.src = img.getAttribute('data-realsrc');
</script>

Reduce DOM queries and cache DOM queries (such as saving to variables)

Cache DOM query code

//未缓存
for (var i=0;i<document.getElementTagName('p').length;i++){
  //code...
}
//缓存
var plist = document.getElementTagName('p');
for (var i=0;i<plist.length;i++){
  //code...
}

Reduce DOM operations, and combine multiple operations to perform as much as possible
event throttling

Some events are triggered frequently, such as scroll, mouse events, keyboard events, etc. If you bind performance-consuming functions or ajax requests to these events, it may lead to unresponsive pages, poor user experience and poor performance.

The solution is to add a timer for event throttling. For example, Baidu's input text will display the result immediately.

Perform operations early (like DOMContentLoaded)

About the online rollback process

online:

Commit the tested code to the master branch of git

Package all the code of the current server and record the version number, backup

Overwrite the code submission of the master branch to the online server and generate a new version number

rollback: