2017 HTML for front-end questions (1)

1.doctype(文档类型) 的作用是什么？

• Validation of the document:
  It tells the user agent and the validator that the document was written according to what DTD. This action is passive,
  Each time the page loads, the browser does not download the DTD and checks for legitimacy, which is enabled only when the page is manually validated.

• Determines the rendering mode of the browser: for the actual operation, tell the browser which parsing algorithm to use when reading the document.
  If it is not written, the browser parses the code according to its own rules, which can seriously affect the layout of HTML layouts.

• The browser has three ways to parse the HTML document.

  • Non-bizarre (standard) mode
  • Weird mode
  • Partial weird (near standard) mode

2.HTML 和 XHTML 有什么区别？？ 如果页面使用 ‘application/xhtml+xml‘ 会有什么问题吗？

A: XHTML syntax requires strict, once encountered an error, immediately stop parsing, and display an error message.
If the page uses ' Application/xhtml+xml ', some older browsers will not be compatible.

• XHTML elements must be nested correctly.
• XHTML elements must be closed.
• The label name must be in lowercase letters.
• The XHTML document must have a root element.
• All attributes must use double quotation marks

3.如果网页内容需要支持多语言，你会怎么做？在设计和开发多语言网站时，有哪些问题你必须要考虑？

A: The encoding uses UTF-8, the space domain name needs to support multi-browsing address, prepares many sets of templates.

在设计和开发多语言网站时，需要考虑:

• Choose to apply a character set
• Language writing habits & navigation structure
• Database-driven Web site
• CSS box will not appear the same as the content size of the misaligned offset

4.使用 data- 属性的好处是什么？

A: data-provides custom properties for front-end developers, which can be obtained through the object's DataSet property.
Browsers that do not support this property can be obtained through the GetAttribute method:

    <div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>    div.dataset.commentNum; // 10

It is important to note that after data-, the properties of multiple words separated by hyphens are obtained using camel style.
Not all browsers support the. DataSet property, which is only supported by Chrome and opera in the tested browser.

5. 请描述 cookies、sessionStorage 和 localStorage 的区别。☆☆☆

Answer Sessionstorage, localstorage, cookies are stored on the browser side of the data with local data,
You can avoid data being passed back and forth unnecessarily between the browser and the server.
Sessionstorage and Localstorage are provided by the HTML5 Web Storage API and can be used to save data between Web requests.

• Cookies are sent to the server side. The rest of the two will not. Cookies each domain name storage is relatively small (different browsers, roughly 4K) the storage of all domain names are limited (different browsers, roughly 4K) have a number of restrictions (different browser)
  is sent to the server with the request

• Localstorage persistent storage of a single domain name is large (5MB recommended, different browsers) the total number is unlimited

• Sessionstorage can only store more effectively in Session (no restrictions are recommended, but actually browsers are different)
  The concept of sessionstorage is very special and introduces the concept of a "browser window".
  Sessionstorage is the data that is always present in the same window (or tab) of the same origin.
  This means that as long as this browser window is not closed, even if you refresh the page or go to another page of the same origin, the data still exists.
  When the window is closed, Sessionstorage is destroyed. Sessionstorage objects are also different when "standalone" opens different windows, even on the same page

6.请解释 <script>、<script async> 和 <script defer> 的区别。

For:

• Script
  When the parser encounters a script tag, the parsing of the document stops, and the script is downloaded and executed immediately, and the document continues to be parsed after the script finishes execution.

• Defer script
  When the parser encounters a script tag, the parsing of the document does not stop, and other threads download the script until the document is resolved and the script executes.

• Async Script
  When the parser encounters a script tag, the parsing of the document does not stop, the other threads download the script, the script starts executing after the download is complete, and the document stops parsing until the script executes.

  If the script is not dependent on any script and is not dependent on any script, then use defer.
  If the script is modular and does not depend on any script, then async is used.

  Defer scripts are executed in the order in which they are declared. Async scripts, as long as the script download is complete, will be executed immediately, not necessarily in the order of Declaration.

7.为什么通常推荐将 CSS <link> 放置在

答：浏览器从上到下依次解析html文档。将 css 文件放到头部， css 文件可以先加载。避免先加载 body 内容，导致页面一开始样式错乱，然后闪烁。将 javascript 文件放到底部是因为：若将 javascript 文件放到 head 里面，就意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。为避免这样的问题一般将全部 javascript 文件放到 body 元素中页面内容的后面。页面加载的问题，先把页面加载出来，然后再去加载效果，提高用户体验度

8.什么是渐进式渲染 (progressive rendering)？

A: The rendering is split from the specific use of the scene, the different level actually corresponds to different page content, the forum is a clearer example, imagine a forum:

Static part of a webpage, HTML fixed content, such as navigation bar and bottom

• The content of the first screen of the page, such as a forum topic
• What you can't see on the top of the page, such as how many replies are under the topic
• A page that toggles the route to be displayed, such as another page of navigation
• In this case, there are obviously a number of possible scenarios for rendering segmentation

All-in-client rendering

• 1, 2, 3 render on server, 4 wait until user clicks from browser
• 1, 2 render on server, comment loaded by client
• Only 1 renders on the server, and dynamic data is all crawled by the client.

And these scenarios for the service side, the performance of the cost is different, forming a gradient,
And in the last case, the Server Precompiled page is good, almost no burden of rendering.
Depending on the actual scenario, more level can be designed. It's just not that simple.

9.是否了解其他基于HTML的模板引擎？

A: Now the market is more fire is Jade Bar is interested to go
jade-HTML template Engine from node. js

10.H5有哪些新特性？

Answer: Drag & Drop, Pattern, DataList, download, prefetch and Dns-perfetch
and Layout Attributes section, article, NAV, etc.

Remember: Many interviewers just list new tags

3 Friends of old Cold
Links: Http://www.jianshu.com/p/9e00f7ca28ab
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

2017 HTML for front-end questions (1)