js通过url获取网页渲染的html_前端面试之html的相关信息

1.你是如何理解HTML语义的？

答：使用合适的标签标示内容。优点在于标签语义化有利于搜索引擎建立索引进行抓 取，有助于构建良好的HTML结构，便于团队开发和维护。

2.meta viewport 是做什么用的，怎么写？

答：meta表示不能被HTML的其它元素(link，script,base, style, title)之一表示的任何元素信息。viewpoint让web开发者控制视口的尺寸及比例，移动设备的viewpoint指设备屏幕上用来展示网页的那一块区域，也就是浏览器上用来展示网页的那部分，可能比浏览器的可视区大，也可能比浏览器可视区域小，一般情况，比浏览器可视区域大。属性包括width、height、initial-scale、maximum-scale、minimum-scale,使用方式是

3.canvas 元素是干什么的？

答： canvas是用来绘制图形的HTML元素。

4.html5新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

答：html5新特性：

• 语义特性: header footer
• 本地存储特性： localStorage, manifest
• 设备访问特性: Geolocation
• 连接特性: webSocket
• 网页多媒体特性: audio、video标签
• 三维、图形及特效：SVG，Canvas, css3D
• 性能、集成特性

解决兼容性的方法：

• 在IE8以下，通过document.createElement(新标签)，并设置css样式。document.createElement('header'), header {display: block};
• 条件注释的方式

HTML和HTML5

• 文档类型声明上：

html:

html5:

• 结构语义上 html: 基本没有体现结构语义，一般为

html5: 具有结构语义

5.Doctype作用？标准模式与兼容模式各有什么区别?

答： Doctype是document type(文档类型)，告诉浏览器解析器采用哪种规范(html、xhtml)来解析页面，Doctype不存在或格式错误的情况下，采用兼容模式。

标准模式(严格模式)展示的支持最新标准的网页。兼容模式(松散模式或怪异模式)展示的是兼顾传统浏览器的网页，向后兼容老式浏览器。

具体区别：

6.用户访问页面到最终渲染的整个过程？

用户输入url,浏览器向服务器发送请求，获取html,然后进入HTML渲染机制。首先，根据HTML生成DOM树；其次，根据css和js重排页面 https://segmentfault.com/a/1190000009317496

7.你对页面进行性能优化的思路和思想是什么？

答： 减少http请求; 减少DOM操作，避免不必要的重绘和重排;压缩文件体积；采用CDN；