Closure:
Closure: https://segmentfault.com/a/1190000000652891
js chained scope structure, role: ① function external access to local function internal variables; ② save variables in memory, will not be recycled by garbage collection mechanism
Disadvantages: memory The consumption is very large, so the closure cannot be abused, otherwise it will cause performance problems of the web page, which may lead to memory leaks in IE. The solution is to delete all unused local variables before exiting the function
cookie
HTTP
browser local storage:
HTML5 provides localStorage, persistent local storage. Unless the data is actively deleted, the data will never expire.
Compared with sessionStorage, it is not a persistent local storage, but only session-level storage.
CSS related:
①The difference between display:none and visibility:hidden:
display does not occupy space, visibility (clearness) is transparent, but still occupies space
②The difference between
link and @import in CSS (1) link belongs to HTML tag, while @import is CSS Provided;
(2) When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;
(3) The import can only be recognized in IE5 or above, and the link is an HTML tag, No compatibility issues;
(4) The weight of the link style style is higher than the weight of @import.
③The similarities and differences between the position:absolute and float attributes
:
setting the `float` and `absolute` attributes on inline elements can make the element out of the document stream, and its width and height can be set.
Difference:
float will still occupy position, position will cover other elements in the document flow.
④ The box-sizing property
is mainly used to control the parsing mode of the element's box model. The default is content-box.
content-box: Lets the element maintain the W3C standard box model. The width/height of the element is determined by the width/height of border + padding + content. Setting the width/height attribute refers to the width/height of the content part.
Border-box: Let the element maintain the IE traditional box model (IE6 and below and IE6~7 quirks mode). Setting the width/height property refers to border + padding + content
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框[Note]: Under standard browsers, the box model is parsed according to the W3C specification. Once the border or inner distance of an element is modified, it will affect the box size of the element, and the box size of the element has to be recalculated, thereby affecting the entire page. layout.
⑤ What are the CSS selectors? Which properties can be inherited? How is the priority algorithm calculated? What are the new pseudo-classes in CSS3?
Priority: !important > id > class > tag
important has higher priority than inline, but inline is higher than id
pseudo-element ::enabled :disabled controls the disabled state of form controls: checked radio The box or checkbox is checked
html-related:
semantic:select the appropriate tag The
<!DOCTYPE> declaration comes first in the document, before the <html> tag. Tells the browser in which mode to render the document
DOCTYPE Document types: strict, transitional, and frame-based HTML documents, the absence of a DOCTYPE or an incorrect format can cause the document to render
HTML and XHTML in promiscuous mode - what's the difference :
XHTML is relatively more rigorous, for example, pictures must be added with text descriptions, and the names of elements and attributes of all tags must be in lowercase
Common compatibility issues:
① The default margin and padding of the browser are different. The solution is to add a global *{margin:0;padding:0;} to unify (in the initialization css)
the text smaller than 12px will be forced to be displayed at 12px by default under the Chrome Chinese interface, which can be displayed by adding the CSS property -webkit-text -size-adjust: none; resolve.
③ After the hyperlink is accessed, the hover style will not appear. The hyperlink style that has been clicked and visited no longer has hover (hover) and active. The solution is to change the arrangement order of the CSS properties: LVHA : a:link {} a:visited { } a:hover {} a:active {}---LoVe/HAte
To clear the float:
①Add height directly to the parent, provided you know and calculate the content height
②At the end of the parent tag, add the tag <div class="clear"></div>, and then add the css attribute to the clear class: clear :both;
That is, the extra tag method <div style="clear:both;"></div> (disadvantage: However, this method will add extra tags to make the HTML structure look less concise)
③The simpler method: add css attributes to the parent :overflow:hidden; can. Because this property is to close the parent to the content, so as to clear the float.
DOM manipulation - how to add, remove, move, copy, create and find nodes
(1) create a new node
createDocumentFragment() //create a DOM fragment
createElement() //create a specific element
createTextNode() //create a Text node
(2) Add, remove, replace, insert
appendChild()
removeChild()
replaceChild()
insertBefore() //Insert a new child node before the existing child node
(3) Find
getElementsByTagName() //Pass Tag name
getElementsByName() //Through the value of the element's Name attribute (IE has strong fault tolerance, it will get an array, including the id equal to the name value)
getElementById() //through the element Id, uniqueness
The difference between html5 and html:
It can be roughly understood as: HTML 5 ≈ HTML4.0+CSS3+JS+API
①In the document declaration, HTML5 is more concise, <!DOCTYPE html>. And HTML has a long code, such as <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
② The structure and semantics are more optimized <header>, <nav>, <article>, <aside>, <footer>.
③ Many new functions have been added: drawing, video tags, etc.
Realize communication between multiple tabs in the browser:
Call local storage, cookies and other local storage
methods to reduce page loading time : ①Optimize
CSS; ②Optimize images; ③Indicate height and width (if the browser does not find these two parameters , it needs to calculate the size while downloading the picture. If there are many pictures, the browser needs to constantly adjust the page. This not only affects the speed, but also affects the browsing experience.
When the browser knows the height and width parameters, even if the picture cannot be displayed temporarily, the page will not be displayed. It will also free up the space of the picture, and then continue to load the following content. As a result, the loading time is faster and the browsing experience is better.) The
difference between css link and @import usage:
both import css into html, usage:
①In html li
<style type="text/css">
@import url (CSS file path address)
</style> ②Use @import url directly
in css (CSS file path address) <link> is an html tag, which can only be used in html source code. @import can be regarded as a css style, which is used to introduce css style functions . @import requires <style type="text/css"> tag when using html, and can directly "@import url (CSS file path address);", such as css file or css code to import other css files null and undefined Difference: null does not exist; and undefined is undefined new operator: 1. Create an empty object, and the this variable refers to the object, and also inherits the prototype of the function. 2. Properties and methods are added to the object referenced by this. 3. The newly created object is referenced by this, and finally implicitly returns this js lazy loading method: defer and async, dynamic DOM creation method (create script, insert into DOM, callBack after loading), asynchronous on demand Loading js is to divide js into many modules, just like the lazy loading of pictures, and the pictures are loaded and displayed when the pictures appear in the visible area (drop down on the scroll bar). js asynchronous loading: http://blog.csdn.net/m13666368773/article/details/7586106 Synchronous loading: Similar to the developed waterfall model, it will prevent the browser's subsequent processing, such as file loading, rendering, etc. The reason why it needs to be synchronized Executed because there may be behaviors such as outputting document content, modifying dom, and redirecting in js
Solve cross-domain problems: The principle of jsonp is to dynamically insert script tags
The difference between document.write and innerHTML:
①document.write can only redraw the entire page
②innerHTML can redraw part of the page to
determine whether the current script is running in the browser or node environment:
control Check alert(this); judge whether the Global object is a window, if not, the current script is not running in the browser.
How do you understand the position of front-end interface engineer?
The front end is the programmer closest to the user, closer than the back end and the database.
1. Realize interface interaction; 2. Improve user experience
. What happened in the process from inputting URL to page loading and displaying? The
connection establishes a TCP/IP connection, and the browser sends HTTP GET request to the remote server through this connection . The remote server finds the resource and returns that resource with an HTTP response, an HTTP response status of 200 indicates a proper response. After the Web server provides the resource service, the client starts to download the resource.
How do you usually manage your projects?
First determine the global style (globe.css), and
mark the coding mode (utf-8) page (such as the start and end of the page module); mark
several ways to create javascript objects in the module;
1, factory mode 2, constructor Mode 3, prototype mode
[Note] The ajax process
(1) creates an XMLHttpRequest object, that is, creates an asynchronous call object.
(2) Creates a new HTTP request, and specifies the method, URL and authentication information of the HTTP request.
(3) Set the function that responds to the status change of the HTTP request.
(4) Send the HTTP request.
(5) Obtain the data returned by the asynchronous call.
(6) Use JavaScript and DOM to achieve partial refresh.
Asynchronous loading and lazy loading
1. Asynchronous loading Solution: Dynamically insert script tags
2. Get js code through ajax, and then execute it through eval
3. Add defer or async attributes to script tags
4. Create and insert iframe, let it execute js asynchronously
5. Lazy loading: some js code and It is not required immediately when the page is initialized, but only in some cases later.
The difference between GET and POST:
Get is to pass the value through the address bar, while Post is to pass the value by submitting the form
GET: generally used for information acquisition, using URL to pass parameters, there is also a limit to the amount of information sent, generally 2000 characters POST: Generally used to modify resources on the server, there is no limit to the information sent.
Javascript non-blocking loading specific way:
put the script at the bottom. <link> is still placed in the head to ensure that the page that is displayed normally can be loaded before the js is loaded.
The disadvantage of ajax before the <script> tag is placed in </body> is that
it runs on the client side, and undertakes part of the work originally undertaken by the server, reducing the server load under a large number of users.
1. Security issues AJAX exposes the details of data interaction.
2. It is not easy to debug.
Front-end modularization:
use define to define modules, use require to call modules, export export modules
Website refactoring: optimize the website
What happened after entering the url to the page loading?
① The URL contains the protocol, IP, and resource path. So after entering the address, the IP will be searched first, and then an HTTP request will be sent to the server.
② After the server processes the request, it returns an HTTP response, and the browser displays HTML Medium resources
③ Rendering according to resource type
Cookie:
data can be persisted on the client side, but there is a size limit
Initialize CSS style: solve browser compatibility
JSON is a syntax for storing and exchanging text information, used for data exchange
① Sending to the server The data is usually a string, you can use the JSON.stringify() method to convert the JavaScript object to a string.
②When receiving server data, it is usually a string. You can use the JSON.parse() method to convert the data into a JavaScript object
MongoDB
non-relational database, and store the data in the document. The data structure consists of key-value pairs, and the document type is equivalent to a JSON object
. Multiple databases can be created in mongodb.
The default database is "db", which is stored in the data directory.
AngularJS
AngularJS is a JS framework. HTML is expanded through directives, and data is bound to HTML through expressions
:
URL: http://www.google:8080/script/jquery.js
http:// (protocol number) www (subdomain) google ( Main domain name) 8080 (port number) script/jquery.js (requested address)
Definition: When any of the protocol, subdomain name, main domain name, and port number are different, they are considered different domains
Handling cross-domain methods: proxy, obtain content under other domain names through the background, and then return it to the front end. That is, the service of A makes a proxy in the background, and the front end only needs to access the server of A, which is equivalent to accessing the server of B. This kind of proxy is
related to the technical CSS in the background:
① The z-index attribute sets the stacking order of the elements
② Position type: absolute, relative, fixed, static (no positioning by default)
③ Horizontal centering: The row-level element sets the text-align of its parent element. The block-level element sets its own left and right margins to auto ④Vertical
centering:
1. Vertical centering of single-line text: line-height
2. Vertical centering of pictures:
① Parent element set line-height; picture set (vertical) vertical-align : middle;(center)
②Applicable: general
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {display: table;}
#child {display: table -cell;vertical-align: middle;}
lower version IE fix bug:
#child {display: inline-block;}
3. Multi-line content is centered, and the container height is variable: give consistent padding-bottom and padding-top
4. Treat the container as a table cell:
CSS provides a series of diplay property values, including display: table, display: table-row, display: table-cell, etc., which can display elements as table cells. This is coupled with vertical-align: middle, which is the same as valign="center" in the table.
display: table-cell;height: 300px;vertical-align: middle;
Vertical centering example URL: http://www.blueidea.com/tech/web/2006/3231.asp
HTTP protocol network:
It is an application layer protocol based on TCP, the format and data interaction behavior of client and server data transmission, and is initially used to transmit the content of HTML pages to the client.
Usually, the HTTP client initiates a request to establish a A TCP connection to the specified port of the server (default is port 80).
{TCP byte stream-based transport layer communication protocol} The
HTTP server listens on that port for requests sent by the client. Upon receiving the request, the server sends back (to the client) a status line, such as "HTTP/1.1 200 OK", and a (response) message whose body may be the requested file, an error message, or some other information
The transport protocol used to transmit hypertext from the WWW server to the local browser. After the input URL (Uniform Resource Locator) is determined, HTTP extracts the webpage code from the server to the browser for rendering.
Box model:
used in page layout, standard W3C box model And the traditional IE box model.
Difference: The standard box model content is only content, while the content of IE contains padding, border
The difference between inline elements and block-level elements:
block-level elements will automatically wrap, while inline elements will not automatically wrap.
Inline elements set width Invalid, height is invalid (line-height can be set), margin is invalid up and down, padding is invalid up and down Inline
elements are converted to block-level elements display:block Compatibility of inline
block-level elements
below IE8
div {
display: inline-block;
*zoom: 1;
*display: inline;
}
Analysis:
*zoom: 1 is used to trigger hasLayout under IE
*display: inline is used to set display: inline and display: block once hasLayout is triggered.
Document flow and text flow:
The document flow is relative to the box model. The
text flow is relative to the
element in the sub-paragraph. After floating, it will jump out of the document flow, that is to say, when there are elements behind it, other elements will be ignored. The area it occupies is laid out directly under it. But the text will recognize the area occupied by the floated element and be laid out around it, that is, not dragged out of the text flow.