Front-end performance and security are more important and are often mentioned.
Some personal understanding:
performance
File merge
File compression
Sprite picture
gzip [Generally configured on nginx or Apache in the backend, I feel like the front end is out of the question]
Dynamic loading
cdn (Generally, the operation and maintenance side has dedicated personnel to handle it, and the front-end cannot be mentioned)
Safety
sql injection [cross-site attack]
Question:
If you have experience, please share it and summarize it. Thanks!
天蓬老师2017-05-18 11:00:41
Performance:
Principle 1: Reduce http requests, merge images, css files
Principle 2: Cache utilization: use CDN, use external js and css, add Exp. ires header, reduce DNS queries, configure Etag, and use Ajax caching.
Principle 3: Request bandwidth: enable GZIP, streamline js, remove duplicate scripts, and optimize images.
Principle 4: Page structure: put styles at the head, and js at the bottom, refresh the document output as soon as possible
Principle 5. Avoid css expressions and avoid redirects
In fact, starting from specific business scenarios, you will understand more deeply. For example, search results page
Security:
XSS
phpcn_u15822017-05-18 11:00:41
The main idea of reducing http requests is to reduce the number of resources linked within the HTML document:
When the project goes online, CSS`JavaScript` and other files will be compressed, merged and packaged to reduce the number and size of source files
Create multiple small pictures into sprites
Convert resources to base64encoding
Using cache can speed up web page opening and effectively reduce http requests
Use lazy loading to load corresponding resources on demand
Use CDN to load resources
Place CSS at the head of the page to prevent page flickering
Load JavaScript asynchronously or lazily to prevent JavaScript from running and blocking page loading
Delay requests for files outside the first screen, that is, load first-screen content first.
Selectors are parsed from right to left, and the nesting order should not be too deep
Reduce scope chain lookups in JavaScript and avoid using eval和Functionand other slow-performance interfaces
DOM operations are very expensive, you can use DocumentFragmentto temporarily store nodes that are inserted into the document at one time
Front-end security mainly refers to security issues that indirectly affect user data through the browser.
Cross Site Scripting refers to a malicious attacker inserting malicious Script code into a Web page. When a user browses the page, the Script code embedded in the Web will be executed, thereby achieving the purpose of maliciously attacking the user. , such as stealing users’ cookies.
The problem with XSS is to find vulnerabilities that can be inserted into the target website to execute scripts. For example, if a certain editing content is directly stored in the database without processing the user's input, then when the user accesses the page, the malicious script will be rendered on the page. Corresponding attacks may be performed.
Cross-site request forgery, for example, the article deletion function of the target website receives a request to delete an article from a malicious website client. This request is cross-site and forged (not the intention of the target website user).
The implementation method is to first construct a GET request on the malicious website (due to the same-origin restriction of Ajax, you can use the src request of img, etc.), and then deceive the target website user to access the malicious website, then the corresponding request will be initiated when accessing (and With corresponding user identification information such as cookies), attacks will also occur at this time
Interface forgery, stealing user information, etc...
PHP中文网2017-05-18 11:00:41
Performance code compression, image compression, reducing http requests, ajax asynchronous, etc. are all beneficial to performance
Secure XXS encryption code