Important Front-End Interview Topics
Category Programming Technology
1. Viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- width: Sets the viewport width, which can be a positive integer or the string "device-width".
- device-width: Device width.
- height: Sets the viewport height. Usually, setting the width will automatically determine the height, so it may not be necessary to set this.
- initial-scale: Default zoom ratio (initial zoom ratio), a number that can include decimals.
- minimum-scale: Minimum zoom ratio allowed by the user, a number that can include decimals.
- maximum-scale: Maximum zoom ratio allowed by the user, a number that can include decimals.
- user-scalable: Whether manual zooming is allowed.
Extended Question: How to handle the issue where 1px on mobile is rendered as 2px?
- Local Handling
Set initial-scale
to 1 in the meta tag's viewport attribute.
Use rem according to the design draft standards, and additionally use transform: scale(0.5)
to reduce by half.
- Global Handling
Set initial-scale
to 0.5 in the meta tag's viewport attribute.
Use rem according to the design draft standards.
2. Methods for Cross-Origin Requests
First, understand the browser's same-origin policy
The Same-Origin Policy (SOP) is a convention introduced by Netscape in 1995. It is one of the most critical security features of browsers. Without SOP, browsers are vulnerable to attacks like XSS and CSRF. The same-origin means that the "protocol + domain + port" must be identical. Even if two different domains point to the same IP address, they are not considered the same origin.
So, how do you solve cross-origin issues?
1. Cross-domain using JSONP, native implementation:
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// Pass parameters and specify the callback function as onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// Callback function
function onBack(res) {
alert(JSON.stringify(res));
}
</script>
2. Cross-domain using document.domain + iframe
This solution is only applicable to scenarios where the main domain is the same but the subdomains are different.
Parent window: (http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe> <script> document.domain = 'domain.com'; var user = 'admin'; </script>
Child window: (http://child.domain.com/b.html)
<script> document.domain = 'domain.com'; // Retrieve variables from the parent window alert('get js data from parent ---> ' + window.parent.user); </script>
Drawback: See the rendering and loading optimization below.
- Cross-domain using nginx proxy
- Cross-domain using a nodejs middleware proxy
- Set the security domain in the header information by the backend
3. Rendering Optimization
- Avoid using iframes (blocks the parent document's onload event)
- Iframes can block the main page's onload event.
- Search engine crawlers cannot interpret such pages, which is not good for SEO.
- Iframes and the main page share the connection pool, and browsers limit the number of connections to the same domain, which can affect parallel loading of the page.
Consider these drawbacks before using iframes. If you need to use an iframe, it's best to dynamically add the src attribute value via JavaScript, which can bypass these issues.
- Avoid using GIF images for loading effects (reduces CPU consumption and improves rendering performance).
- Use CSS3 instead of JS for animations (to avoid repaints, reflows, and redraws).
- For small icons, use base64 encoding to reduce network requests. However, it's not recommended for large images as it consumes more CPU.
Advantages of small icons:
- Reduce HTTP requests.
- Avoid cross-domain issues.
- Changes take effect immediately.
- Avoid placing heavy scripts in the head of the page.
- Avoid placing heavy scripts in the head of the page.