1.http caching mechanism, browser cache in the end what is?
The so-called http caching, the browser is a feature to your own, a cache database, sandwiched between the server and client, you only need to set some parameters can be realized Cache / Do not cache / cache in the aging / external aging caching (default cached)
browser cache and cache into strong negotiation cache, the browser loads a page simple process is as follows: (1) browser to http header information based on this resource to determine whether the cache hit strong. If the hit is added directly in the cache of resources, not the request will be sent to the server. (2) If a strong cache misses, the browser will load the resource request is sent to the server. Server browser to determine whether the local cache failure. If available, the server does not return resource information, the browser continues to load resources from the cache. (3) If a cache miss negotiated, the server will complete resource back to the browser, the browser load the new resource, and update the cache. --------------------------------------------- 2. The browser cookie and awareness of the session
cookie-based session is implemented. cookie stored in the client browser and the session saved on the server. cookie mechanism is used to determine the identity of the customer by checking the customer who "pass", then the session is a mechanism to verify the identity of customers through "customer list" to check on the server. session is equivalent to a program built on a customer file server, customers only need to check when visiting customer file table on it. the difference between cookie and session: the existence of the location: cookie exists in the client, the temporary folder; session in memory of the server, a session object to a domain user's browser security service cookie in the clear stored at the customer end, security is low, you can post encrypted by an encryption algorithm stored; session stored in the server's memory, good safety life cycle (at 20 minutes, for example) cookie life cycle is cumulative, from the time of creation, it is start time, 20 minutes after the end of the life cycle cookie; session life cycle is the interval from the time of creation, such as the start time of 20 minutes without access session, then the session life cycle is destroyed. However, if within 20 minutes (as in the first 19 minutes) visited the session, then the session will recalculate the life cycle. Off the opportunity to cause the end of the session life cycle, but does not affect the access of the cookie cookie for multiple users share a browser; a user's browser session as exclusive ----------------- ----------------------------- common front end frame 3:.
on Bootstrap, Angular, Vue, REACT -------- . responsive layout -------------------------------------- 4:
Responsive Web design allows a web site also fit a variety of devices and multiple screens, you can make the layout and functionality of the site with the user's environment (screen size, input, device / browser capabilities) varies in response to major layout :( media queries by media query) to set different styles for different elements of the same below the dimensions of a screen .------------------------- --------------------- 5. Learn mixing app :() hybrid App means between web-app (page APP, such as Jingdong web), native-app app between the two (native applications, such as mobile phone applications above APP), combines the advantages of 2 persons. Package is a client of the case, in fact, which is HTML5 pages. --------------------------------------------- 6.async / await the difference between promise and
promise to solve the asynchronous callback ES6 is born, to avoid a correction hell. async / await based Promise achieved, it can not be used for ordinary callback function. async / await asynchronous code that looks like a synchronization code. Use Async / Await significantly save a lot of code. We do not need to write .then, no need to write an anonymous function handle resolve Promise of value, you do not need to define redundant data variables, but also to avoid the nested code. async / await at the same time so that we can capture the asynchronous and synchronous code is thrown. Promise if an exception occurs then () function, the outside of the try Promise / catch is not captured, in which case we need to use the Promise of the catch () function. ---------------------------------------------- 7. Development Environment and operating environment:
General development environment is to have a lot of debugging code, and debug information output environment. Operating environment to debug parts are removed or blocked, and faster. Development Environment: server program development environment is designed to ape their development, configuration can be more casual, in order to facilitate development and debugging, usually open all error reporting. Production environment: is the value of a formal offer external services, usually turn off error reporting, open the error log. -------------------------------------------------8 .jquery and vue difference
jQuery is using the selector ($) to select DOM object, its assigned value, event binding and other operations, and in fact native HTML only difference is that you can more easily select and manipulate DOM objects , and the data interface are together. Such as the need to obtain a content label tag: $ ( "lable") val () ;, it is still dependent on the value of the DOM element. Vue Vue is through the object and the data is completely separated from the View. Operate on the data no longer need to refer to the corresponding DOM object, it can be said of data and View are separate, they are bound to each other to achieve this target by Vue vm. This is the legend of MVVM. vue applicable scenarios: Background page complex data manipulation, form filling page jquery applicable scenarios: for example, some html5 animated pages that need to operate js page style page but both also can be used in conjunction with, the focus vue data binding, jquery focus on operating style, animation effects, etc., will be more efficient completion of business needs ---------------------------- ----------------------- 9.html in the tag line, block-level tags, the tag line speed
Block-level tags: exclusive line, and other elements do not stay in the same row, width and height can be provided. (Div, p, h1-h6 , ul, li, dl, dt) in the row label: energy and other elements stay in the same line, you can not set the width and height. (A, span, strong, u , em) rows in the block tag: and other elements can stay in the same row, width and height can be provided. (Img, input, textarea) ------------------------------------------- ---------- 10.Css3 box model
in CSS, each visual element on an HTML page will be rendered as a rectangular region, commonly referred to as box model. Box model defined four major areas: content (content), Padding (padding), border (border), margins (margin).
Box Model There are two types: traditional content-box and the border-box just after CSS3 introduced, defined by the box-sizing property. Although the border-box bit more intuitive, but because of compatibility reasons, the default value is still the traditional content-box.
content-box: width and height are defined by the content (the Content) width and height portions rather than the entire height of the box, padding (padding), the border (border) and margins (margin) on the outside are sequentially added. Background fills in padding and content sections.
border-box: width and height definition includes border (border), the padding (padding) and content (content), but does not include margins (margin) ---------------- ------------------------------------- 11 prototype chain
Each object can have a prototype _proto_, this prototype can also have its own prototype, and so on, forming a prototype chain. Find a specific property, we go to find this object, and if not, then went inside to its prototype object, or if not, then go looking to prototype objects prototype object of this operation is to go ...... delegate on the whole prototype chain, this is what we call the prototype chain.
__proto__ prototype chain query is actually used, it always points to the prototype prototype object;
prototype (prototype object) is a function unique to automatically created when the constructor is defined, it is always referred to __proto__.
All objects have __proto__ properties, functions, in addition to this special object __proto__ property, as well as the unique attributes of the prototype prototype. There are two default prototype object attributes, constructor and property __proto__ property. prototype property may be added to the function and the objects can be shared (inherited) methods, properties, and __proto__ is to find a function or object prototype chain manner. constructor, this attribute contains a pointer that points back to the original constructor. -------------------------------------------------- . --12 Why enter vue ui in cmd can open vue-cli scaffolding:
@ VUE / cli3.0 increase a visualization project management tools after installation is complete global cli3.0, you can directly enter the command in cmd: start vue ui to address the default is localhost: 8000 ----------------------------------------- . --- 13 cross-domain:
When 1. JSONP (front-end server send call function 2.CORS cross-domain resource sharing (server response headers allow the browser the proxy server 3. When the cross-domain with the access-control-origin (a browser request to a server across domains b server, a server request to the server b ------------------------------------------ how --14.methods in use arrow function
does not this point ------------------------------------ ------------- 15.js data type
Undefined, Null, Bollean, Number, String ----------------------- -------------------------- 16. lifecycle hook function
①beforeCreate component instance that will be created, in general the opportunity to open a loaded animation. ②created component instance is created, a method in which the timing of data access to instances of attributes and methods, but can not operate dom. Because the page has not loaded successfully, the page is not displayed. Note: The method of calling methods, complete network requests, vue recommendation of two data acquisition mode 1, beforeRouteEnter before routing the request to load data, complete data request to perform next (), displays the target route (advantage: when the page is displayed to ensure, certain can get data) 2, created, launched in the timing of the request, to obtain data ③beforeMount component instance will be mounted to the mount point, the page is not displayed, development rarely used ④mounted assembly template has been rendered to the specified el, page display, you can operate dom. ⑤beforeUpdate components will be updated ⑥updated component update is complete Note: update on the hook function, are related to dynamic rendering pages, whenever the data changes, the change will update the page will trigger these hooks, the hooks trigger frequency is high, we seldom operation, even though the operation, but also to ensure that the internal method lightweight. ⑦beforeDestroy components will be destroyed ⑧destroyed components to complete destruction. Often time-consuming operation to remove the opportunity, such as timers, etc. ------------------------------------ ---------------- 17 ajax native implementation of step
1. Create an object ajax var xhr = new XMLHttpRequest (); . 2 tells ajax request address and request method (ajax under open method) xhr.open ( 'get', ' http: //www.example.com'); request for the first parameter, the second parameter is the address of the request / server route request address corresponding to the transmission request 3 xhr.send ();. 4 and the client to obtain the server response data xhr.onload = function () {console.log ( xhr.responseText);} xhr.responseText fetch response data server
There are two post requests: Request Format parameters need to be set (. 1) post request xhr.setRequstHeader ( 'Content-Type', 'application / x-www-form-urlencoded'); (2) json format xhr.setRequstHeader ( ' Content-Type ',' application / json '); fixed wording, the first parameter name attribute of the message, the second parameter value corresponding to the attribute of the packets
get request carries parameter in open () behind url; post request, ------------------------------------------- carry parameters in send (), ----- 18.es6 new features
1.const and letlet represent declare variables, constants and const statement represents, both as a block-level scope; const declared variables will be considered to be constant, meaning that its value is after the setup is complete you can not change:
2. template string before ES6, we tend to deal with such a template string: the "\" and "+" to build the basic template for ES6 for string formatting. The expression embedding the string splicing. Defined by $ {}; ES6 backquote ( `) get directly;
3. function ES6 arrow, arrows function is a shorthand form of a function, parameter parentheses package, followed by a =>, followed by the body of the function; arrow function of three characteristics: no function keyword to create a function return keyword omit inherit the current context this keyword
4.for ... of and for ... infor ... of for traversing an iterator for ... in property in an object used to traverse
The objects and arrays deconstruction Example: const {data: res} data is deconstructed const {data: res} = await this $ http.get (); ----------------. ------------------------------------ 19.css weight
! Important -> #id -> attribute selector, class, or pseudo-classes -> tag selector element or pseudo -> wildcard * ----------------------- ----------------------- 20.Css pseudo-classes and pseudo elements and pseudo elements are pseudo-class needs to add some special styles to basically the same definition pseudo-class selectors like class already exists as an element to add extra style; pseudo-element is an element added to their virtual style.
Common pseudo-classes: hover, activehover refers to a style trigger when the mouse is moved onto the element; refers to a style when the activate mouse down.
Common pseudo-elements: before and after are often reused often pseudo-elements.
21. The local storage LocalStorage
sessionStorage, will only be effective when the window is open, one-time caching session, close the browser automatically released localStorage, as long as there is no manual clearance, will remain permanently stored as files stored cookie, is to track user information, the default one-time session, to maintain the browser is closed --------------------------------- ------------------ layout movable end 22: streaming (percentage) layout, the layout of REM, responsive layout (media queries), Flex (elastic) layout --- ------------------------------------------------twenty three. What is the life cycle of the page:
1. A page request: page request occurs before the start of the page life cycle, when the user requests a page, ASP.NET will determine the need for analysis and compilation Page 2. Start: At the beginning, set the page properties such as Request and Response. At this stage, the page will also determine if the request is a postback request or a new request and set IsPostBack property page 3. Initialization: During page initialization, you can use the controls in the page, and set the UniqueID property of each control. 4. Load: during loading, if the current request is a postback request, the information recovered from the load control properties control state and view state will be used. 5. Verify: During verification, will call all the validator controls the Validate method, which sets the IsValidate validator controls and attributes of each page. 6. postback event handler: If the request is a postback request, all event handler is invoked 7. presents: Before rendering, view state is saved for the page and all controls. In the rendering phase, the page calls the Render method for each control, it will provide a text writer for Response OutputStream property and controls the output of the write-page 8. Uninstall: fully rendered pages and pages to send the client, ready to discard the page after the call to unload. In this case, uninstall the page properties and cleanup.
It can be said from creation - before and after the process before and after the destruction of creation, loading, before and after the update, before and after the destruction ----------------------------- . ----------------------- 24 What is MVVM:
a design idea. Model layer represents the data model, View UI component representatives. ViewModel is a synchronous View and Model objects. In mvvm framework, between the view and model no direct link, but the interaction between interaction, model and viewmodel by viewmodel is bidirectional, so changes will be synchronized to view data on the model, data model changes also It will be immediately reflected in the view. -------------------------------------------------- 25.git commonly used commands
Configure the name and E-mail: git config --golbal user.name/user.email view the configuration git config --list initializes the local repository git init git status to view the status file to add files to the staging area git add the file name to submit to the local repository git viewing log commit -m branch git branch create a branch git branch develop switching branch git checkout branch Ming Kelong warehouse git clone git push to push the server address of the branch name ------------------ ----------------------------------- 26.js of those three parts? A detailed description of what?
js three parts, i.e. ECMAScript, DOM, BOM three parts. ECMAScript is the core interpreter, DOM (Document Object Model) is the Document Object Model, BOM (Browser Object Model) is a browser object model.
ECMAScript is a language, it does not contain the definition of the input and output; ECMA-262 defines the syntax type, the statement, keywords, reserved words, operator, objects, ECMAScript language is a description of various aspects of the provision of . javascript implements ECMAScript.
BOM (Browser Object Model) is a browser object model. It provides independent and objects to interact with the content in the browser window because the BOM is mainly used for communication between the management window to window, so the window is the core object
DOM is the Document Object Model, which mainly includes the acquisition of elements, modify the contents of the three aspects of style, operating elements, the vast majority of our operations are DOM manipulation, DOM manipulation is compatible with most, because having multiple browsers compatible with the wording. -------------------------------------------------- --27.js inheritance
1. inheritance chain prototype (prototype is equal to the new instance of the instance of the parent class.) 2. then inherited by the constructor (with .call () and .apply () will be introduced into the parent class constructor subclass function (the function in the subclass to do a self-executing functions of the parent class (copy))) 3. Inheritance composition (composition and inheritance chain prototype borrow constructors inherited) (common) (combines the advantages of both modes, mass participation and multiplexing) 4 prototypal inheritance (packaging an object with a function, and then return to the calling function, this function becomes free to add a property or an instance of an object .object.create () is the principle). - -------------------------------------------------- 28. What is a closure?
Functions can be nested functions inside the function reference will not be garbage collection mechanism parameters or variables of the outer function parameters and variables, because the internal function also cited ------------------ ------------------------------ 29.jQuery in which there are several types of selectors?
From my own point of view, there may be three types of selectors, as follows: 1, the basic selector: return the matched dom element directly from the ID, CSS class name, the name of the element. 2, selector level: also called path selector may be selected according to the respective path element DOM hierarchy. 3, the selector filter: the filter in front of the relevant conditions based on the obtained matching element dom. -------------------------------------------------- What 30.http protocol is?
HTTP (Hypertext Transfer Protocol) is a request response mode based, stateless application layer protocol, usually based on the TCP connection, the HTTP1.1 release mechanism is given continuously connected, most Web development, Web applications are built on top of the HTTP protocol.
http are "application layer protocol", and is based on TCP / IP protocols. HTTP protocol is usually carried over the TCP protocol, sometimes carried over TLS or SSL protocol layer, this time, it becomes that we often say HTTPS.
In the TCP / IP protocol, TCP protocol provides reliable connectivity services, the connection is initialized by the three-way handshake. Refers to the three-way handshake is required when the client and server to establish a TCP connection to send a total of three packages to confirm the establishment of the connection. The purpose of the three-way handshake is connected to both the synchronous serial number and confirmation number and information exchange TCP window size, has failed to prevent the connection request segment suddenly transferred to the server, resulting in an error. 1. The first handshake: establishing a connection: The client sends syn (syn = j) packet to the server, the server waits for determining 2. The second handshake: server receives syn packets (ack = j + 1), while themselves syn transmitting a packet (syn = k), i.e., SYN + ACK packet. 3. Third handshake: the client receives the SYN + ACK packet to the server, the server sends an acknowledgment packet ack (ack = k + 1) , this packet been sent, TCP connection is successful ---------- which request method ---------------------------------------- 31.Http in the agreement?
GET: request for resource access has been URI (uniform resource identifier) identified, can pass parameters through the URL to the server POST: used to transmit information to the server, similar to the main function of the GET method, but it is generally recommended to use the POST method PUT: file transfer, message body contains the contents of the file, save it to a corresponding URI location hEAD: get the message header with the gET method is similar, but does not return the message body, generally used to verify that the URI effective dELETE: delete the file, and the PUT method Instead, delete the corresponding URI location of file OPTIONS: query response HTTP method URI support --------------------------------- What ------------------ 32.JSON and JSONP that?
JSON is a data interchange format, and JSONP is an unofficial one to be created out of developers cross-domain data exchange protocol.
JSON data format used in front-end development in this area are more plain text-based, cross-platform transfer simple; JavaScript native support for almost all of the background language support; lightweight data format, take up very few characters, particularly suitable for Internet delivery; readable strong; easier to write and parsing;
JSONP general protocol for data interaction Ajax cross-domain request. There is no cross-domain Ajax request direct access to a common file problems, are not subject to influence whether a cross-domain (who owns the src attribute of tag has the ability to cross-domain) but call js file on a web page, then cross through the web end time-domain data access, managed to put into the data inside the js file format. It can be further processed in the web end after acquisition.
In order to facilitate the use of the client data, gradually formed an informal transport protocol, it JSONP call it, a point of the protocol is to allow users to pass a callback parameter to the server, then the data returned from the server will use this callback as a function parameter names to wrap the JSON data so that clients can freely customize their function to automatically process the returned data.
------------------------------------------------ 33. What are the new css3 properties?
1.css3 border: border-radius, box-shadow , border-image2.css3 background: background-size: size attribute specifies the background image. 3.css3 2D conversion: transform (), translate () , rotate () 4.css3 3D Conversion: rotateX () about the x axis; rotateY () about the y axis. Example: transform: rotateX (120deg); 5.css3 transition animation 6.css3 --------------------------------- ---------------- 34. What is the hook function?
Hook function is part of the Windows message handling mechanism, the application can for all messages, event by setting the "hook" in the system-level filtering, message access under normal circumstances can not be accessed. Essence is defined by a hook used to program a processing system messages, system calls, and hung into the system.