1. What is the difference between XHTML and HTML
HTML is a basic WEB page design language, while XHTML is an XML-based markup language with the main difference: XHTML elements must be properly nested. XHTML elements must be closed. The label name must be lowercase. XHTML documents must have a root element. 2. What are the three layers of the front-end page? What does it do?
Structure layer Html presentation layer CSS behavior layer JS; 3. On which browsers has your page been tested? What are the kernels of these browsers?
Ie(Ie kernel) Firefox (Gecko) Google (Webkit,Blink) Opera (Presto) Safari(WBkit) 4. What is semantic HTML?
Intuitive understanding of tags is good for search engine crawl, with the right tag to do the right thing! Semantic HTML is to make the content of the page structured, easy to browser, search engine parsing; It is displayed in a document format without style CCS and is easy to read. Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is good for SEO. Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding. 5.HTML5 why only write! DOCTYPE HTML?
HTML5 is not based on SGML, so you don’t need to reference DTDS, but you need docTypes to regulate browser behavior (to make browsers behave the way they should); HTML4.01 is based on SGML, so you need to reference a DTD to tell the browser what type of document the document is using. 6. A Doctype? What is the difference between standard mode and compatible mode?
! The DOCTYPE declaration is located in the first line of the HTML document, before the HTML tag. Tell the browser’s parser what document to use to parse the document. A non-existent or improperly formatted DOCTYPE will cause the document to be rendered in compatibility mode. Standard mode typography and JS mode are run to the highest standards supported by the browser. In compatibility mode, pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work. 7. What are the new features and elements removed from HTML5? How to deal with the browser compatibility of HTML5 new tags? How to distinguish HTML from HTML5?
HTML5 is no longer a subset of SGML, but is all about adding graphics, location, storage, multitasking, etc. Canvas is used for video and audio elements for media playback. Local offline storage localStorage stores data for a long time. Data will not be lost after the browser is closed. SessionStorage data automatically removes semantic content elements such as article, footer, header, nav, section form controls when the browser is closed. Calendar, Date, Time, email, URL, search New technologies Webworker, websockt, Geolocation Elements removed pure elements: Basefont, Big, Center, FONT, S, Strike, TT, U; Elements that negatively affect usability: Frame, Frameset, Noframes; Support for new HTML5 tags: IE8/IE7/IE6 supports tags generated by the document.createElement method. You can use this feature to enable these browsers to support new HTML5 tags. Please describe the difference between cookies, sessionStorage and localStorage?
Cookies are passed back and forth between the browser and the server. SessionStorage and localStorage no sessionStorage and localStorage have larger storage space. SessionStorage and localStorage have more rich and easy to use interface; SessionStorage and localStorage are independent storage Spaces. 9. How to achieve communication between multiple tabs in the browser?
Call local storage CSS such as localStorge and cookies
1. Briefly describe the classification of elements in CSS
Block level elements: div, P,h1,form,ul,li; Inline elements: span >, a, label, input, img, strong, em. 2. How many ways CSS can hide elements (name at least three)
Opacity: The element itself still occupies its own position and functions on the layout of the page. It will also respond to user interactions; Visibility: The only difference with opacity is that it does not respond to any user interaction. In addition, elements are hidden in the screen reader software; Display: set Display to none Any direct user interaction with this element will not take effect. In addition, the screen reader does not read the contents of the element. The effect is as if the element doesn’t exist at all; Position: Does not affect layout and allows elements to remain operable; Clip-path: The clip-path property is not fully supported in IE or Edge. If you want to use external SVG files in your clip-path, browser support is even lower; 3.CSS clear float methods (at least two)
Use the OVERFLOW property of CSS for empty elements with the clear property; Using CSS :after pseudo-elements; Handling with adjacent elements; 4.CSS center (horizontal and vertical center)
Inline element center scheme
Horizontal center setting:
1. Inline elements
Set the text – align: center; 2. The Flex layout
Set the display: flex; justify-content:center; (Flexible use, support Chroime, Firefox, IE9+) vertical center Settings:
1. Single line of text with parent element height determined (inline element)
Set height = line-height; 2. Multi-line text with parent element height determined (inline element)
A: Insert the table (insert the table in the same way as horizontally centered) and set vertical-align:middle. B: Set display:table-cell and then vertical-align:middle. Block-level element centering scheme
Horizontal center setting:
1. Block elements with fixed width
Set left and right margin values to auto; 2. Block elements of variable width
A: Add the table tag (complete, including table, tbody, tr, TD) outside the element, write the element inside td, then set the margin value to auto; B: Set the displa:inine method for this element; C: Set position:relative and left:50% for the parent element, position:relative and left:50% for the child element. Vertical center setting:
Use position: Absolute (fixed) to set the left, top, margin-left, and margin-top attributes. Position :fixed (absolute); margin:auto; Use the display:table-cell attribute to center the content vertically. Transform: Translate (x,y) property; Use the :before element; 5. Write some solutions to IE6 bugs
Double offset BUG Float caused by using display 3 pixels problem using float caused by using dislpay: inline-3px hyperlink hover after click failed using the correct writing order Link visited Hover active Ie Add position:relative Png transparent use JS code change min-height minimum height! Important 解决 ‘select * from ie6 where iframe is used to nest a container with a width of 1px (ie6 default row height is created by using over:hidden,zoom:0.08 line-height:1px) 6. How much do you know about SASS or Less? Like that?
7.Bootstrap
Features, typography, use of plug-ins; 8. What is the difference between using link and @import when importing page styles?
Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, rel connection attributes, etc. @import is provided by CSS and can only be used to load CSS; When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded. Import is CSS2.1, only in IE5 above can be recognized, and link is XHTML tag, no compatibility problems; 9. Introduce the box model of CSS?
There are two kinds, IE box model, standard W3C box model; The content section of IE contains border and pading; Box model: Content, padding, margin, border. 10.CSS selectors Which attributes can be inherited? How is the priority algorithm calculated? CSS3 new pseudo class has those?
Id selector (# myID) Class selector (.myclassName) Tag selector (div, h1, P) Adjacent selector (H1 + P) subselector (ul > Li) descendant selector (LI A) wildcard selector (*) attribute selector (A [rel = “external”]) pseudo-class selector (a: hover, Li: Font size font family color, UL LI DL DD DT; Non-inheritable style: border padding margin width height; The nearest priority principle shall prevail if the style definition is the nearest in the case of the same weight; The priority is:! Key > id > class > tag important
CSS3 implements rounded corners (border-radius:8px), box-shadow (box-shadow:10px), text effects (text-shadow,), gradient, Transform :rotate(9DEg) scale(0.85,0.90) Translate (0px,-30px) skew(-9deg,0deg); rotate(9deg) scale(0.85,0.90) Translate (0px,-30px) skew(-9deg,0deg); // Rotate, zoom, position, tilt, added more CSS selectors multi-background RGBA JavaScript interview
1. What types of data are returned by javascript typeof
Object number function Boolean underfind; 2. What are the three types of cast and two types of implicit cast?
Mandatory (parseInt parseFloat, number) implicit (= = = = =); Pop () push() unshift() shift()
Push() end add pop() end remove Unshift() header add Shift () header remove 4. What is the difference between get and POST for Ajax requests?
One is behind the URL and one is placed inside the virtual carrier with size limits. Security issues are applied differently. One is the forum and so on. 5. The difference between call and apply
Call (this,obj1,obj2,obj3) object.apply (this,arguments
Use Eval Parse, which is more reliable for security reasons; 7. What is event delegation
Let the use of event bubbling principle, let their triggered events, let his parent element instead of execution! 8. What are closures, what are their features, and how do they affect pages? Briefly describe closures you understand
Closures are functions that can read variables inside other functions. 9. Add delete replace methods inserted into a contact
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10. What is javascript same-origin policy?
A script can only read properties of Windows and documents from the same source, which is a combination of host name, protocol, and port number 11. Write a method that B inherits from A;
function A(name){ this.name = name; this.sayHello = function(){alert(this.name+” say Hello!”);};
}function B(name,id){ this.temp = A; this.temp(name); // new A();
delete this.temp;
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}
12. How do I prevent event bubbling and default events
function stopBubble(e){ if (e && e.stopPropagation)
e.stopPropagation() else
window.event.cancelBubble=true}return false
13. What result will pop up after the following program is executed?
function fn() { this.a = 0; this.b = function() {
alert(this.a)
}
}
fn.prototype = {
b: function() { this.a = 20;
alert(this.a);
},
c: function() { this.a = 30;
alert(this.a);
}
}var myfn = new fn();
myfn.b();
myfn.c();
Talk about your understanding of This object.
This is a js keyword. The value of this can change depending on where the function is used.
But the general rule is that this refers to the object on which the function is called.
This is the Global object. As a method call, then this is the object
15. Results of the following procedure
function fun(n,o) { console.log(o) return {
fun:function(m){ return fun(m,n);
}
};
}var a = fun(0); a.fun(1); a.fun(2); a.fun(3); var b = fun(0).fun(1).fun(2).fun(3); var c = fun(0).fun(1); c.fun(2); c.fun(3);
/ / the answer:
/ / a: undefined, 0, 0
/ / b: undefined, 0
/ / c: undefined. Zero,1,1
16. The output of the following program
var name = ‘World! ‘;
(function () { if (typeof name === ‘undefined’) { var name = ‘Jack’; console.log(‘Goodbye ‘ + name);
} else { console.log(‘Hello ‘ + name);
}
}) ();
17. Know Node? What are the usage scenarios of Node?
High concurrency, chat, real-time notification push 18. Introduce a framework you use most often
Jquery, rn, presents, etc.; 19. Do you know anything about front-end automation build tools? Just a quick introduction
Gulp, Grunt, etc. 20. Describe what back-end languages you know and how well you know them
other
1. What are the advantages and disadvantages of Node?
(advantages)
Because Node is event-driven and non-blocking, it’s great for handling concurrent requests,
Therefore, proxy servers built on Node perform much better than servers implemented with other technologies, such as Ruby.
Additionally, the client code that interacts with the Node proxy server is written in the javascript language,
So both the client and the server are written in the same language, which is a wonderful thing.
(disadvantages)
Node is a relatively new open source project, so it’s not very stable, it’s always changing,
And there is not enough third-party library support. It looks like Ruby/Rails back in the day.
2. What performance optimization methods do you have?
(1) reduce the number of HTTP requests: CSS Sprites, JS, CSS source compression, image size control suitable; Web Gzip, CDN hosting, data cache, picture server.
(2) Front-end template JS+ data, reduce bandwidth waste caused by HTML tags, front-end variables to save AJAX request results, each operation of local variables, no request, reduce the number of requests
(3) Use innerHTML instead of DOM operations to reduce DOM operations and optimize javascript performance.
(4) Set className instead of style when there are many styles to set.
(5) Use less global variables and cache the results of DOM node search. Reduce I/O read operations.
Avoid using CSS Expression, also known as Dynamic properties.
(7) Image preloading, style sheets at the top, scripts at the bottom with time stamps.
(8) Avoid using tables in the main layout of the page. Tables are not displayed until the content is completely downloaded. Displaying div+ CSS layout is slow. For ordinary websites, there is a unified idea, which is to optimize the front end as far as possible, reduce database operations, reduce disk IO. Optimization refers to the forward end, in the case of does not affect the function and experience, and can not on the server is being executed in the browser, can be directly on the cache server returned to the application server, applications can obtain results don’t directly to the external, the machine can achieve the data not to remote, memory to be able to take not to take the disc, Do not query what is in the cache. Reducing database operations means reducing the number of updates, caching results to reduce the number of queries, letting your program complete the database operations as much as possible (such as join queries), reducing disk I/O means minimizing the use of file systems as caching, reducing the number of read and write files, etc. Program optimization is always about optimizing the slow parts, you can’t “optimize” in a different language.
3. What are the HTTP status codes? What does it mean to represent separately?
100-199 Indicates the actions that the client should take.
200-299 Indicates that the request is successful.
300-399 Is used for files that have been moved and is often included in the location header to specify new address information.
400-499 Indicates errors on the client. The current request cannot be understood by the server. 401 The current request requires the user to verify that the 403 server understands the request but refuses to execute it.
500-599 is used to support server errors. 503 — Service unavailable
4. What happens when a page is loaded and displayed from the time the URL is entered? (The more detailed the process, the better)
Find the browser cache DNS resolution, find the IP address corresponding to the domain name, redirect (301), send the second GET request for HTTP protocol session client send headers (request headers) document download document tree establishment, According to the mark request required to specify the MIME type of the file file display browser side to do the work is roughly divided into the following steps: load: according to the request URL domain name resolution, to the server to initiate a request, receive files (HTML, JS, CSS, images, etc.). Parsing: Parses the loaded resources (HTML, JS, CSS, etc.) and suggests the corresponding internal data structures (such as HTML DOM tree, JS property sheet, CSS style rules, etc.) 5. What development tools do you use and why?
Sublime,Atom,Nodepad++; 6. Tell me about the most popular things these days. What websites do you visit?
Node.js, MVVM, React-Native,Angular,Weex, CSDN,Segmentfault, Blog Garden,Stackoverflow, etc. 7. Tell me about your project (if any)? I also want to talk about the techniques used in this project and how to solve the problems encountered. Or add my QQ: 2742277586 understanding