l--Front-end Development interview knowledge points (HTML related)

Brief introduction

Front-end Development interview Knowledge Point outline:

HTML&CSS: The understanding of Web standards, browser kernel differences, compatibility, hack, CSS basic skills: layout, box model, selector priority and use, HTML5, CSS3, mobile adaptation.

javascript: Data types, object-oriented, inheritance, closures, plug-ins, scopes, cross-domains, prototype chains, modularity, custom events, memory leaks, event mechanisms, asynchronous mount callbacks, template engines, Nodejs, JSON, Ajax

Other: HTTP, security, regular, optimization, refactoring, responsive, mobile, team collaboration, maintainable, SEO, UED, architecture, career

1. Please talk about the drawbacks of cookies

Although cookies provide the convenience of persisting client data, they share the burden of server storage, but there are many limitations.

First: Generate up to 20 cookies per specific domain name

1. IE6 or lower version up to 20 cookies
2. IE7 and later versions can have a maximum of 50 cookies.
3. Firefox Maximum of 50 cookies
4. Chrome and Safari don't make hard restrictions

IE and opera will clean up the least recently used Cookie,firefox will randomly clean up cookies.

The maximum number of cookies is approximately 4096 bytes, and for compatibility, it is generally not more than 4095 bytes.

1. IE provides a kind of storage that can persist user data, called UserData, and support from IE5.0. Each data is up to 128k, up to 1M under each domain name. This persisted data is placed in the cache if the cache is not processed
2. , then there will always be.

Benefits: Very high scalability and availability

1. Control the size of the session object saved in the cookie through good programming.
2. Reduce the likelihood of cookies being cracked through encryption and secure transfer technology (SSL).
3. Only non-sensitive data is stored in a cookie, and there is no significant loss even if it is stolen.
4. Control the life cycle of cookies so that they do not always work. A thief is likely to get an expired cookie.

Disadvantages:

1. Limits on the number and length of cookies. There can be up to 20 cookies per domain, each cookie cannot exceed 4KB in length, or it will be truncated.
2. Security issues. If a cookie is intercepted, the person can get all the session information. Even if encryption does not help, because the interceptor does not need to know the meaning of the cookie, he can only forward the cookie as it is to achieve the purpose.
3. Some states cannot be saved on the client. For example, to prevent a duplicate submission of a form, we need to save a counter on the server side. If we keep this counter on the client, then he has no role to play.

2. Browser Local Storage

In the higher browser, JS provides Sessionstorage and globalstorage. The localstorage is provided in HTML5 to replace the globalstorage.

The Web Storage in HTML5 includes two ways of storage: Sessionstorage and Localstorage.

Sessionstorage is used for data in a local session, which can only be accessed by a page in the same paint session and destroyed when the session ends. So sessionstorage is not a persistent local store, only a session level and localstorage for persistent local storage, unless the data is actively deleted, the data will never expire.

The difference between 3.web storage and cookies

The concept of Web storage and the cookie acquaintance, the difference is that he is designed for larger capacity storage. The cookie size is limited, and every time a new page is requested, the cookie is sent in the past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.

In addition, Web Storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves.

But cookies are also essential: the role of cookies is to interact with the server as part of the HTTP specification, and the Web storage only for storing data locally

Browser support in addition to IE7 and the following are not supported, other standard browsers are fully supported (IE and FF need to run in the Web server), it is worth mentioning that IE always do good, such as ie6,ie7 in the UserData is actually a JavaScript local storage solution. With simple code encapsulation you can unify to all browsers that support Web Storage.

Both Localstorage and Sessionstorage have the same methods of operation, such as SetItem, GetItem, and RemoveItem.

4. Talk about your understanding of the meaning of righteousness?

1. When you remove or discard, you can make the page appear in a clear structure.

2 SEO: Good communication with search engine, help crawler crawl more effective information: Crawler relies on tags to determine the context and the weight of individual keywords

3. Facilitate other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way

4. Facilitate team development and maintenance, semantic more readable, is the next generation of Web pages of important trends, follow the standards of the standard team to follow this standard, can reduce differentiation.

5.Doctype function? How is strict mode differentiated from promiscuous mode? What is the point of them?

1.<! The doctype> declaration is at the front of the document and precedes the

2. The strict mode of typesetting and JS operation mode is the highest standard supported by the browser to run.

3. In promiscuous mode, the page is displayed in a relaxed backward-compatible manner. Simulates the behavior of an older browser to prevent the site from working.

4.DOCTYPE does not exist or is incorrectly formatted to cause the document to be rendered in promiscuous mode.

6. How many types of DOCTYPE documents do you know?

The tag declares three DTD types, representing strict versions, excessive versions, and framework-based HTML documents, respectively.

HTML 4.01 Specifies three document types: Strict, transitional, and frameset.

XHTML 1.0 specifies three types of XML documents: Strict, Transitional, and frameset.

Standards (standard) mode (that is, strict rendering mode) is used to render Web pages that follow the latest standards, while quirks (that is, loose mode or compatibility mode) is used to render web pages designed for traditional browsers.

What is the difference between 7.HTML and xhtml--?

Difference:

1. All marks must have a corresponding closing tag

2. Names of tag elements and attributes must be lowercase

3. All XML tags must be properly nested

4. All attributes must be enclosed in quotation marks

5. Encode all < and & special characters

6. Attach a value to all attributes

7. Do not make "--" in the comment content

8. Pictures must have explanatory text

8. Common compatibility issues?

1.png24-bit pictures appear on the IE6 browser background, the solution is to make PNG8, you can also refer to a script processing.

2. The default margin and padding of the browser are different. Solution is to add a global *{margin:0;padding:0} to unify.

3.ie6 Two-sided bug: block attribute tag after float, there are rows of margin in the case, the IE6 display in the margin than set the larger.

4. Floating IE produces double distance (IE6 bilateral problem: under IE6, if the element is set to float, and the margin-left or Margin-right,margin values are set to double. ）

5. Gradual recognition of the way, from the overall part of the gradual exclusion.

First, the use of the "\9" tag, ie browser from all the circumstances of the separation.

Next, use "+" again to separate IE8 and IE7, IE6, so that IE8 has been independently identified.

{    background-color: #f1ee18;   /* all recognition */     . Background-color: #00deff \9; /* IE6, 7, 8 identification */      +background-color: #00deff; /* IE6, 7 identification */      _background-color: #00deff; /* IE6 Recognition */ }

6.IE, you can get custom properties using the method that gets the general properties, or you can use GetAttribute () to derive the custom attributes, or Firfox, only by using getattribute ().

Workaround: Use GetAttribute () uniformly to get the custom attributes.

What are the new features and elements removed from 9.HTML5? How do I handle browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5?

HTML5 is now not a subset of SGML, mainly about image, location, storage, multi-tasking and other functions.

New features:

Drag release (Drag and Drop) API

Semantically better content tags (header, nav, footer, aside, article, section)

Audio, Video API

Canvas API

Geography (geolocation) API

Local offline storage Localstorage long-term storage data, no loss of data after browser shutdown

Sessionstorage data is automatically deleted after the browser is closed

form controls, calender, date, time, email, url, search

The new technology webworker,websocket,geolocation

To remove an element:

Elements of pure expression: Basefont, big, center, font, S, Strike, TT, u;

Elements that have a negative impact on usability: frame, frameset, noframes;

Support for HTML5 new tags:

ie6,7,8 supports the label generated by the Document.createelement method, which allows these browsers to support HTML5 new tags and, after the browser supports new tags, add a default style

Of course the best way is to use the mature framework directly, the most used is the Html5shim framework

<!-- [If LT IE 9] >      -

How to differentiate: DOCTYPE declaration \ New structure element \ Feature element 10.iframe advantages and disadvantages?

Advantages:

Address loading issues such as slow loading of third-party content and ads

Security Sandbox

Parallel Load Scripts

Disadvantages:

IFrame blocks the onload time on the main page

Loading takes time even if the content is empty

No semantics.

How is 11.webSocket compatible with low browsers?

Adobe Flash sockets, Active htmlfile (IE), multipart-based XHR, long polling based XHR

12. What are the differences between threads and processes?

A program has at least one process, and a process has at least one thread.

The thread's dividing scale is smaller than the process, which makes the multi-thread procedure high concurrency.

In addition, the process has a separate memory unit during execution, and multiple threads share memory, which greatly improves the running efficiency of the program.

Threads are still different from the process during execution. Each independent thread has a program entry, sequence of sequence execution, and exit of the program. However, threads cannot be executed independently, and must be dependent on the application, which provides multiple threads of execution control.

From a logical point of view, the meaning of multithreading is that in an application, multiple execution parts can be executed concurrently. However, the operating system does not consider multiple threads as separate applications to implement scheduling and management of processes and resource allocation. That's the difference between a process and a thread.

A process is a program with a certain independent function about a single run activity on a data set, a process that is an independent unit of the system's resource allocation and scheduling.

A thread is an entity of a process that is the basic unit of CPU dispatch and dispatch, which is a smaller unit that can run independently than a process. The thread itself basically does not own the system resources, only has a point in the operation of the necessary resources (such as program counters, a set of registers and stacks),

However, it can share all of the resources owned by the process with other threads that belong to one process.

One thread can create and revoke another thread, and can execute concurrently between multiple threads in the same process.

13. How do you optimize your website?

1. File merge (CSS sprites, multiple js,css file merging, etc.)

2. File minimization/File compression

3. Use of CDN Hosting (content Delivery network, i.e., distribution networks)

4. Use of the cache (multiple domain names to provide caching)

14. Please say three ways to reduce page load time?

1. Picture optimization (GIF instead of PNG, DATAURL, etc.)

2. Image format Selection (GIF: Provides less color and can be used in some places where color requirements are not high)

3. Optimize CSS (compress merge CSS, such as margin-top,margin-left ...)

4. After the website slashes (such as the www.cnblogs.com/directory, will determine the "directory is what good type, or directory")

5. Indicate height and width (if the browser does not find these two parameters, he needs to download the picture while calculating the size, if the picture is many, the browser needs to constantly adjust the page. This affects not only speed, but also the browsing experience. When the browser knows the height and width parameters, even

The picture temporarily cannot be displayed, the page will also free up the space of the picture, and then continue to load the later content, loading time is faster, the browsing experience is better. )

6. Reduce HTTP requests (merge price, merge picture)

15. What is Fouc (no flicker of style content)? How do you avoid fouc?

<type= "Text/css"  media= "All">@import ". /fouc.css "</style>

The @import of referencing CSS files is the culprit for this problem. IE will first load the entire HTML document DOM, and then to import the external CSS file, so in the page Dom loading completed to the completion of the CSS import, there will be a period of time on the page content is no style, the length of time with speed, the speed of the computer has a relationship. Workaround: Add a <link> or <script> element between

l--Front-end Development interview knowledge points (HTML related)