头部背景图片
小畅的学习笔记 |
小畅的学习笔记 |

面试宝典-HTML

2019-07-23
#HTML

秋招季，总结一下HTML部分面经~

一. 行内元素、块级元素、空元素举例

  • 空元素没有内容的HTML元素。
    空元素在开始标签中关闭的。（单标签）如：br、hr、img、input、param、meta、link
  • 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
  • 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

块级元素和行内元素区别

  1. 占据空间
  • 块级元素总是单独占一行，并从新的一行开始；
  • 行内元素和其他同为行内元素占据同一行。
  1. Width,height,Margin-padding是否可设置
  • 块级可以，行内不可以。
  • 通过改变元素的display可改变此属性。
  1. 宽度
  • 行内元素宽度与内容相关；
  • 块级元素不设置则与浏览器同宽。
  1. 容纳内容
  • 块级元素可容纳内联元素和其他块元素；
  • 行内元素只可容纳文本和其他行内元素。

二. Repaint（重绘）和Reflow（重排|回流）

  • repaint：重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
    重绘不会带来重新布局，并不一定伴随重排。

  • reflow：重排是更明显的一种改变，可以理解为渲染树需要重新计算。
    重排一定会引起浏览器的重绘，会影响排版。

常见的引起重排的具体操作：

  1. 调整窗口大小；
  2. 改变字体大小；
  3. 样式表改动；
  4. 元素内容变化，尤其是输入控件；
  5. CSS伪类激活；
  6. DOM操作；
  7. offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算， 会使浏览器将渐进回流队Flush，立即执行回流

减少重排次数和缩小重排方法：

  1. 将多次改变样式属性的操作合并成一次操作。
  2. 将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
  3. 在内存中多次操作节点，完成后再添加到文档中去。
  4. 由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个素进行复杂的操作时，可以先隐藏它，操作完成后再显示。
  5. 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。

三. H5新增标签和删除标签

删除的标签：

  • 纯表现的元素：basefont、big、center、font等
  • 对可用性产生负面影响的元素：frame、frameset、noframes

    新增标签主要是语义化的标签如：

<header></header> <!--头部-->
<nav></nav> <!--导航栏-->
<section></section> <!--区块（有语义化的div）-->
<main></main> <!--主要区域-->
<article></article> <!--主要内容-->
<aside></aside> <!--侧边栏-->
<footer></footer> <!--底部-->
  • 除此之外新增
`<video><audio><Progress>(进度条)`
  • 标签语义化概念及语义化好处：标签语义化就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，不论是谁，都能看懂这块内容是什么，并且有利于搜索引擎。
  • 语义化标签好处 ：HTML结构清晰可读性较好无障碍阅读有利于搜索引擎根据标签内容确定上下文和权重问题移动设备可以完美展现页面（CSS支持较弱的设备）有利于团队维护和开发代码

四. H5新增事件

H5新的Web应用API，许多API都定义了事件。如：
http://blog.csdn.net/charlene0824/article/details/52165429

  • Audio.video触发网络事件、数据缓冲状况、播放状态。
    Canpaly\durationchange\loadstart\play\playing\waiting
  • 拖放API，（抓取一种对象后拖到另一个位置）
    如:dragstart,drag,dragenter,dragdrop,dragover在拖放源和放置目标上设置
  • 历史管理机制
    Hashchange（location.hash，获取片段标识符）
  • 表单验证机制
    当验证失败会触发invalid
  • 离线web应用缓存支持(manifest)
    Offline，online
  • 异步通信使用message事件通信
    如websocket，webworker，server-sent
  • Web存储
    两种（前两种，cookies本来就有）Localstorage、sessionStorage、cookies

  • 三者都是在浏览器端存储数据。

  1. 数据存储大小限制不同。
    cookies：数据始终在同源的http请求中携带，即cookie在服务器和浏览器间回传。故存储的数据大小最小，一般为4k。
    sessionStorage和localStorage：数据在本地保存，不会自动把数据发给服务器。所以一般5M或者更大。

  2. 数据有效期不同
    cookies：数据在cookie设置的有效期之前都有效，即使窗口和浏览器关闭。
    sessionStorage：数据在关闭浏览器窗口后自动清除。存储的数据仅在同源同窗口内有效，即使在不同浏览器相同页面也是无效的。一般用于存储会话数据。
    localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

  3. 数据作用域不同
    Cookies和localStorage：在所有同源窗口敏感词享。
    sessionStorage：不在不同浏览器窗口敏感词享。

  • 请你谈谈Cookie的弊端

  1. 每个特定的域名下最多生成的cookie个数有限制
  2. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
  3. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
  4. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。

  • web storage和cookie的区别

  1. Cookie的大小是受限的
  2. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
  3. cookie还需要指定作用域，不可以跨域调用
  4. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
  5. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
  6. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage

六. a的href有几种

  1. 超链接目标的 URL；
  2. 有效文档的相对或绝对 URL；
  3. 伪协议：
    • JavaScript 代码段(javascript:伪协议[通过一个链接调用js函数或者表达式等]void(0)指定无返回值[没有返回值的函数真正返回的都是 undefined]，若有返回值，会覆盖掉a的内容如：
<a href="javascript:void(window.open('about:blank'))">Click me</a>)
  • 其他的伪协议还有：
  1. mailto:(邮件地址)[点击链接会打开outlook进行邮件发送]
  2. tel:(电话)[会打开弹窗选择程序拨打电话，如skype]
  3. file:本机文件地址

七. 浏览器内核

  • IE: trident内核
  • Firefox(Mozilla)：gecko内核
  • Safari：webkit内核
  • Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
  • Chrome：Blink(基于webkit，Google与Opera Software共同开发)

前缀对应：

  • -moz-对应 Firefox,
  • -webkit-对应 Safari and Chrome
  • -o- for Opera
  • -ms- for Internet Explorer

八. 列举IE与其他浏览器不一样的特性？

  1. IE的排版引擎是Trident （又称为MSHTML）
  2. Trident内核曾经几乎与W3C标准脱节（2005年）
  3. Trident内核的大量 Bug等安全性问题没有得到及时解决
  4. JS方面，有很多独立的方法，例如绑定事件的attachEvent、创建事件的createEventObject等
  5. CSS方面，也有自己独有的处理方式，例如设置透明，低版本IE中使用滤镜的方式

九. Meta

  1. 响应式meta
    width,height：宽度高度
    initial-scale：初始比例
    maximum-scale：允许用户缩放到的最大比例，
    minimum-scale：允许用户缩放到的最小比例,
    user-scalable：用户是否可以手动缩放,no,yes）
<meta name = “viewport” content = “width = device-width, initial-scale = 1, maximum-scale = 1, user-scale = no”>
  1. 防止搜索引擎爬取页面
<meta name = “robots” content = “noindex”>

只防止Google

<meta name = “googlebot” content = “noindex”>

防止爬取连接指向的页面

<a href = “privatepage.html” rel = “nofollow”>link to pricate page</>

十. 加快HTML页面加载速度

1. 页面减肥

删除不必要的空格、注释；将inline的script和css移到外部文件；可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具（uglify）来给JavaScript减肥

2. 减少文件数量

减少页面上引用的文件数量可以减少HTTP连接数；许多JavaScript、CSS文件可以合并最好

3. 减少域名查询

DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好

4. 缓存重用数据

使用缓存吧

5. 优化页面元素加载顺序

首先加载页面最初显示的内容和与之相关的JavaScript和CSS；然后加载DHTML相关的东西；
图片、flash、视频等很肥的资源就最后加载

6. 减少inline JavaScript的数量

浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大
不使用document.write()这种输出内容的方法，使用W3C DOM方法来为现代浏览器处理页面

7. 指定图像和tables的大小

如果浏览器可以立即决定图像或tables的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作；这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变；image使用height和width；table使用table-layout: fixed并使用col和colgroup标签指定columns的width，少用table，table的渲染很耗时间(table是解析完成后加载，div是读到一句就开始加载)

8. CDN加速

十一. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

  1. <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
  2. 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

  • HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
  • XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
  • Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
  • （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

十二. HTML与XHTML——二者有什么区别区别：

  1. 所有的标记都必须要有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须使用小写
  3. 所有的XML标记都必须合理嵌套
  4. 所有的属性必须用引号””括起来
  5. 把所有<和&特殊符号用编码表示
  6. 给所有属性赋一个值
  7. 不要在注释内容中使“–”
  8. 图片必须有说明文字

十三. 文档加载、渲染过程

1. 浏览器加载和渲染html的顺序

  1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
  2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）
  3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
  4. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载
  5. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前经渲染的）重新进行渲染。
  6. JS、CSS中如有重定义，后定义函数将覆盖前定义函数

2. JS的加载

  1. 不能并行下载和解析（阻塞下载）
  2. 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document.write或appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.
Lililich's Blog
66Article 38Tags 13Categories