Shulou(Shulou.com)06/02 Report--

This article introduces "how to master performance optimization, Web security, Linux common commands" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

1. Performance optimization

1.1 principles

① uses memory, caching, or other methods

② reduces the amount of CPU calculation and network loading time.

③ adapts to the performance optimization of all programming-space for time

1.2 make loading faster

① reduces resource volume: compress code

② reduces visits: merging code, SSR server-side rendering, caching

③ uses a faster network: CDN

1.3 make rendering faster

① CSS in head,JS, at the bottom of body

② starts executing JS as soon as possible and triggers with DOMContentLoaded

③ lazy load (picture lazy load, slide load more, pager)

④ caches DOM queries

⑤ frequent DOM operations, merged and inserted into the DOM structure

⑥ throttling, anti-shaking and other common performance optimization methods

1.4 caching

① static resources are suffixed with hash to calculate hash based on the contents of the file.

If the contents of the ② file remain unchanged, the hash will remain unchanged, and the url will remain unchanged.

If the ③ url and the file remain unchanged, the Http cache mechanism will be automatically triggered, and a return of 304will be returned.

1.5 SSR

① server-side rendering: load web pages and data together and render them together

② non-SSR (front and rear separation): first load the web page, then load the data, and then render the data

1.6 lazy loading

If there is too much page content data, it can be used as a pager, which can save the loading time of a page.

Slide lazy load, and then load new content when there is no data at the bottom.

Click lazy load, click the button, similar to load more trigger to load new content

1.7 Anti-shaking and its package

"Anti-shaking"

Anti-shaking, as the name implies, to prevent shaking, so as not to mistake one event for multiple events. Keystroke is an anti-shaking operation that comes into contact with every day.

"[Anti-shaking is important to clear zero]" (after watching the anti-shaking throttling, then realize this key point)

"Application scenario" (to help you better understand anti-shaking)

① login, SMS and other buttons prevent users from clicking too fast, so that multiple requests are sent and need to be anti-shaking.

When ② resizes the browser window, the number of resize is too frequent, resulting in too much calculation, which needs to be put in place at once.

The ③ text editor saves it in real time, after 1 second without any changes.

The change event will only be triggered when ④ user input ends or pauses, similar to when the input information in the search box stops for 1 second before the content that may be searched appears.

"handwritten anti-shake package"

Function debounce (fn, delay = 500) {let timer = null / / timer in the closure, not exposed Lest the error return function () {if (timer) {clearTimeout (timer)} / / clear timer timer = setTimeout (() = > {fn.apply (this, arguments) timer = null}, delay)}} caused by accidental acquisition and modification

1.8 Throttle and its package

"cut expenditure"

As the name implies, control the flow of water. Control the frequency of events, such as once a second, or even once a minute. Similar to current restrictions controlled by servers and gateways

"[throttling is more important than locking]"

"Application scenario" (to help you better understand anti-shaking)

① scroll event that controls the calculation of location information every other second

② browser plays events to control the calculation of progress information every other second

When ③ drags an element, it is necessary to get the dragged position of the element at any time. Using the drag event directly will trigger frequently and easily lead to stutters. Throttling is used at this time, no matter how fast the dragging speed is, it is controlled to trigger every other 100ms.

Handwritten throttling package

Function throttle (fn, delay = 100) {let timer = null return function () {if (timer) {return} timer = setTimeout (() = > {fn.apply (this, arguments) / / if fn () cannot be used here, an error will be reported. Unable to get the event source object event timer = null}, scheduled tasks that are repeated within the time set by delay) / / delay will be cleared}}

1.9Why is the anti-shake clearTimeout (timer) and the throttling return?

Anti-shake is that the trigger interval is greater than the time trigger, so the last timer should be cleared every time the time is less than the interval, while throttling will only be triggered every time no matter how many times it is triggered in the time, so use return

Suppose time=100ms, a person enters one character per 50ms for 10 times in a row, that is, anti-shaking after 500ms will only be triggered once, while throttling will be triggered 5 times. Why? Because anti-shake means that an event is triggered after the stop 100ms is entered, while throttling controls the 100ms to trigger an event, anti-shake triggers once and throttling triggers five times. (combined with the two sentences of "realizing that anti-shaking is important in clearing zero, throttling is important in adding locks")

2.Web security

2.1 XSS attack

XSS cross-site request attack

The following are all possible XSS injection attacks

In the text embedded in HTML, malicious content is injected with script tags.

In inline JavaScript, the spliced data breaks through the original restrictions (strings, variables, method names, etc.)

In tag attributes, malicious content contains quotation marks to break through the limitation of attribute values and inject other attributes or tags

Executable code such as _ javascript: is included in the href, src and other attributes of the tag

Inject uncontrolled code in onload, onerror, onclick, and so on

In the style attribute and tag, contain code similar to background-image:url ("_ javascript:..."); (the new version of the browser can already prevent it)

In the style attribute and tag, it contains something like _ expression (...) The CSS expression code (the new version of the browser is already protected)

"XSS attack scenario"

A blog site, I publish a blog, in which embedded script, script content: get cookie, send to my server (server with cross-domain) to read the person's cookie will be stolen

"XSS prevention"

① replaces special characters, such as

② then becomes directly displayed instead of being executed as a script.

The front end of ③ needs to be replaced, and the back end also needs to be replaced. Double insurance.

The mainstream front-end framework of ④ has been prevented.

2.2 XSRF attacks

"XSRF cross-site request camouflage"

"XSRF attack scenario"

You are shopping and take a fancy to a product. The id of the product is 100. The payment interface is xxx.com/pay?id=100, but there is no verification (now all payments will be verified, which is explained here, so it is assumed that there is no verification). I am an attacker, I have a fancy to a product, id is 200. I think you sent an email with an attractive title. But in fact, the body of the email is hidden.

(with other pay-for-execution scripts) you click to view this email and help me buy items with id 200s.

"XSRF prevention"

Use the post interface

Add authentication, such as password, SMS verification code, fingerprint, etc.

3. Describe the whole process from entering url to rendering the page

"loading process"

① DNS resolution: domain name-> IP address

The ② browser initiates a Http request to the server based on the IP address

The ③ server processes the Http request and returns it to the browser

"rendering pass"

① generates DOM Tree from HTML code

② generates CSSOM from CSS code

③ integrates DOM Tree and CSSOM to form Render Tree

④ renders the page according to Render Tree

When ⑤ encounters, suspend rendering, give priority to loading and executing JS code (JS code may change the DOM structure and re-render), and finish before continuing.

⑥ until the rendering of Render Tree is complete

4.Linux common commands

"File and folder operations"

Ls xxx View folder (spread out)

Ls-a (the meaning of all, including. Hidden file at the beginning)

Ll View folder (list)

Ll xxx (view files under the xxx folder)

Mkdir xxx (create xxx folder)

Rm-rf xxx (delete all xxx and all its child files)

Cd xxx (enter the xxx directory)

Mv abc xxx (rename abc file to xxx file)

Mv xxx sss path (move the xxx file to the sss path directory)

Cp a.js a1.js (copy and copy a.js to a1.js) rm a1.js (delete a single file directly)

Touch d.js (New File d.js)

Vi d.js (create or enter a file d.js and edit)

Cat xxx (view all the contents of the xxx file but do not enter)

Head xxx (check the xxx file without entering the first few lines)

Grep "babel" xxx (look for babel content in the xxx file)

"Vim Editor Operations"

Press I to start editing

Esc can exit edit mode

W save write: Q exit

: wq (quit after saving)

: Q! (force exit, do not save)

This is the end of "how to master performance optimization, Web security, and common Linux commands". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.