``` - **width**: Sets the viewport width, which can be a positive integer or"> ``` - **width**: Sets the viewport width, which can be a positive integer or" />
Easy Tutorial
❮ Mapreduce Usage Js Filter Dropdown ❯

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" />

Extended Question: How to handle the issue where 1px on mobile is rendered as 2px?

  1. 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.

  1. 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.

  1. 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>
    
  2. 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.

  1. Cross-domain using nginx proxy
  2. Cross-domain using a nodejs middleware proxy
  3. Set the security domain in the header information by the backend

3. Rendering Optimization

  1. Avoid using iframes (blocks the parent document's onload event)

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.

  1. Avoid using GIF images for loading effects (reduces CPU consumption and improves rendering performance).
  2. Use CSS3 instead of JS for animations (to avoid repaints, reflows, and redraws).
  3. 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:

  1. Avoid placing heavy scripts in the head of the page.
  2. Avoid placing heavy scripts in the head of the page.

Follow on WeChat

❮ Mapreduce Usage Js Filter Dropdown ❯