Deepen the understanding of front-end knowledge points

This article aims to deepen the understanding of the front-end knowledge, data from the network, collected and sorted by myself. Some open topics

1. Introduction: In addition to the basic personal information, the interviewer would like to listen to you a different place and your advantages.

2. Project Introduction

3. How to view front-end development.

4. How to learn the front-end development at ordinary times.

5. What is the plan for the next 3-5 years?

position values, relative and absolute are positioned relative to who.

Absolute: Generates an absolutely positioned element that is positioned relative to the last level of positioning that is not a static parent element.

Fixed (not supported by old IE) generates an absolutely positioned element, typically positioned relative to a browser window or frame.

Relative generates a relatively positioned element, positioned relative to its position in the normal stream.

static default value. There is no positioning, the element appears in the normal stream

Sticky generates viscous-positioned elements, and the position of the container is calculated according to the normal document flow

How to troubleshoot cross-domain problems

JSONP:

The principle is: Dynamic Insert script tag, through the script tag to introduce a JS file, this JS file loaded successfully will execute our URL parameters specified in the function, and we need the JSON data as parameters passed in.

Due to the restriction of the homology policy, XMLHttpRequest only allows resources to request the current source (domain name, protocol, port), and in order to implement Cross-domain requests, Cross-domain requests can be implemented through the script tag, and then the JSON data and the callback function are executed on the server, thus resolving cross-domain data requests.

The advantage is good compatibility, easy to use, support browser and server two-way communication. The disadvantage is that only get requests are supported.

Jsonp:json+padding (padding), as the name suggests, is to populate a box with JSON

<script>
    function Createjs (surl) {

        var oscript = document.createelement (' script ');
        Oscript.type = ' text/javascript ';
        OSCRIPT.SRC = sURL;
        document.getElementsByTagName (' head ') [0].appendchild (Oscript);
    }

    Createjs (' jsonp.js ');

    Box ({
       ' name ': ' Test '
    });

    function box (JSON) {
        alert (json.name);
    }
</script>
   
   
    
    1
    
    2
    
    3
    
    4 5 6 7 8
    
    9
    
    ten
    
    13
    
    of
    
    19
   
   

CORS

Server-side support for cors is mainly done by setting up Access-control-allow-origin. If your browser detects the appropriate settings, you can allow Ajax to be accessed across domains.

To cross a subdomain by modifying document.domain

Set the document.domain of the subdomain and the primary domain to the same primary domain. Prerequisite: These two domain names must belong to the same basic domain name! And the protocol used, the port should be consistent, otherwise can not be used to cross-domain document.domain

The primary domain uses the same document.domain

Using Window.name to cross domain

The Window object has a Name property that has a feature: in the life cycle of a window (Windows), All the pages loaded in the window are shared by a window.name, each page has read and write permission to the Window.name, Window.name is persisted in all pages that have been loaded in a window.

Using the newly introduced Window.postmessage method in HTML5 to transfer data across domains

Also has the flash, sets the proxy page and so on the server The Cross-domain way. It is an excellent Cross-domain method for individuals to think that the window.name approach is both uncomplicated and compatible with almost all browsers. the difference between XML and JSON.

(1). Data volume aspect.

JSON is relatively small in size and faster to deliver than XML.

(2). Data interchange aspect.

JSON is more convenient to interact with JavaScript, easier to parse, and better for data to interact with.

(3). Data description aspect.

JSON has less descriptive data than XML.

(4). Transmission speed.

JSON is much faster than XML.
   
   
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6 7 8 9 (15)
   
   

tell me about your opinion of Webpack.

Webpack is a modular packaging tool that allows you to use Webpack to manage your module dependencies and to compile the static files required by the output modules. It manages and packs the HTML, Javascript, CSS, and various static files (pictures, fonts, etc.) used in web development to make the development process more efficient. For different types of resources, Webpack has a corresponding module loader. The Webpack module Packer analyzes the dependencies between modules, and finally generates the optimized and merged static resources.

Webpack's two main features:

1.code splitting (can be completed automatically)

2.loader can handle various types of static files, and support in-line operation

Webpack is written in the form of COMMONJS, but support for Amd/cmd is comprehensive and facilitates code migration for old projects.

Webpack features Requirejs and browserify, but it still has many new features of its own: