HTML、CSS、JavaScript常见面试问题的总结（HTML篇）

HTML、CSS、JavaScript常见面试题总结（CSS篇）   

HTML部分

目录

   HTML部分

问题一：前端性能优化？

问题二：主流浏览器内核私有属性 css 前缀 ？

 问题三：disabled 和 readonly 的区别 ？

问题四：css reset 和 normalize.css 有什么区别 ？

问题五：浏览器架构

问题六：对 web 标准、可用性、可访问性的理解  

问题七：渐进增强和优雅降级的定义 ？

问题八： 如何实现浏览器内多个标签页之间的通信

问题九：请描述一下 cookies，sessionStorage 和 localStorage 的区别？ 

问题十：简述一下你对 HTML 语义化的理解 ？

问题十一：HTML5 有哪些新特性、移除了那些元素 ？

问题十二：什么是重绘和回流？（浏览器绘制过程）？

 问题十三：为什么操作 DOM 慢？（浏览器绘制过程）？ 

 问题十四：如何优化关键渲染路径？（浏览器渲染过程）

 问题十五：渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程） 

 问题十六：浏览器的渲染原理？ 

问题十七：常见浏览器所用内核？

问题十八：介绍一下你对浏览器内核的理解？

问题十九： 页面导入样式时，使用 link 和 @import 有什么区别？ 

问题二十：行内元素与块级元素、行内块的区别？ 

---

问题一：前端性能优化？

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。可以从这些方面来进行优化。
    第一个方面是页面的内容方面
    （1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成 等待的情况。
    （2）通过 DNS 缓存等机制来减少 DNS 的查询次数。
    （3）通过设置缓存策略，对常用不变的资源进行缓存。
    （4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时,再去请求加载。
    （5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。
    第二个方面是服务器方面
    （1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。
    （2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。
    （3）尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时 携带不必要的 cookie
    第三个方面是 CSS 和 JavaScript 方面
    （1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。
    （2）避免使用 @import 标签。

link与@import区别：

两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
import的写法比较多：推荐使用 @import url(index.css);

   详细的资料可以参考：   《前端性能优化之雅虎35条军规》   《你真的了解 gzip 吗？》   《前端性能优化之 gzip》

问题二：主流浏览器内核私有属性 css 前缀 ？

 mozilla 内核 （irefox,flock 等）      -moz  

webkit  内核 （safari,chrome 等）   -webkit  

opera  内核  （opera 浏览器）        -o  

trident 内核  （ie 浏览器）              -ms

 问题三：disabled 和 readonly 的区别 ？

1、disabled 指当 input 元素加载时禁用此元素。input 内容不会随着表单提交。        
2、readonly 规定输入字段为只读。input 内容会随着表单提交。
3、无论设置 readonly 还是 disabled，通过 js 脚本都能更改 input 的 value

问题四：css reset 和 normalize.css 有什么区别 ？

为什么会有 CSS Reset 的存在呢？那是因为早期的浏览器支持和理解的 CSS 规范不同，导致渲染页 面时效果不一致，会出现很多兼容性问题。
    reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
    normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置，而尽力让这些样式保持一致并 尽可能与现代标准相符合。
    1.Normalize.css 保护了有价值的默认值。
    Reset 通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果；Normalize.css 保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。 当一个元素在不同的浏览器中有不同的默认值时，Normalize.css 会力求让这些样式保持一致并尽可能与现代标准相符合。
    2.Normalize.css 修复了浏览器的 bug
    它修复了常见的桌面端和移动端浏览器的 bug。这往往超出了 Reset 所能做到的范畴。关于这一点， Normalize.css 修复的问题 包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多 出现在各浏览器和操作系统中的与表单相关的 bug。
    3.Normalize.css 没有复杂的继承链
    使用 Reset 让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在 Normalize.css 中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
    4.Normalize.css 是模块化的
    这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了 特定的值。因此这能让你自己    选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
  5.Normalize.css 拥有详细的文档
    Normalize.css 的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在 Github Wiki 中有进一步的    说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异， 并且你可以更容易地进行自己的测试。

总结：
  css reset 是早的一种解决浏览器间样式不兼容问题的方案，它的基本思想是将浏览器的所有样式都 重置掉，从而达到所有浏览器    样式保持一致的效果。但是使用这种方法，可能会带来一些性能上的问题，并且对于一些元素的不必要的 样式的重置，其实反而会造成    画蛇添足的效果。
    后面出现一种更好的解决浏览器间样式不兼容的方法，就是 normalize.css ，它的思想是尽量的保留 浏览器自带的样式，通过在原    有的样式的基础上进行调整，来保持各个浏览器间的样式表现一致。相对与 css reset， normalize.css 的方法保留了有价值的默    认值，并且修复了一些浏览器的 bug，而且使用 normalize.css 不会造成元素复杂的继承链。

问题五：浏览器架构

    * 用户界面     
         * 主进程      
         * 内核          
             * 渲染引擎          
             * JS 引擎              
                 * 执行栈          
            * 事件触发线程              
                 * 消息队列                  
                       * 微任务                  
                       * 宏任务          
            * 网络异步线程          
            * 定时器线程

问题六：对 web 标准、可用性、可访问性的理解  

可用性（Usability）： 产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观 感受可好，是从用户的角度来看    产品的质量。可用性好意味着产品质量高，是企业的核心竞争力
可访问性（Accessibility）：Web 内容对于残障用户的可阅读和可理解性        
可维护性（Maintainability：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的 成本，成本低则可维护性好。    二是代码是否容易被人理解，是否容易修改和增强功能。

问题七：渐进增强和优雅降级的定义 ？

 渐进增强：针对低版本浏览器进行构建页面，保证基本的功能，然后再针对高级浏览器进行效果、交互 等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

问题八： 如何实现浏览器内多个标签页之间的通信

 实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信， 因此我们可以找一个中介者让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
    第一种实现的方式：是使用 websocket 协议，因为 websocket 协议可以实现服务器推送，所以服务 器就可以用来当做这个中介者。 标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。
    第二种是使用 ShareWorker 的方式：shareWorker 会在页面存在的生命周期内创建一个唯一的线 程，并且开启多个页面也只会使用同一个线程。这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，然后通过这个 共享的线程来实现数据的交换。
    第三种方式是使用 localStorage 的方式：我们可以在一个标签页对 localStorage 的变化事件进 行监听，然后当另一个标签页 修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充 当的中介者的角色。
    还有一种方式是使用 postMessage 方法：如果我们能够获得对应标签页的引用，我们就可以使用 postMessage 方法，进行通信。
 
 

问题九：请描述一下 cookies，sessionStorage 和 localStorage 的区别？ 

 SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。

区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为 了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http请 求中携带（即使不需要），会在浏览器和服务器间来回传递。            
 存储大小：   cookie 数据大小不能超过4 k 。 sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以 达到 5M 或更大。
 有期时间：   localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。        sessionStorage  数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且 重新加载或恢复页面仍会 保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中 初始化一个新的会话。 cookie设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。         
 作用域：    sessionStorage  只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。        localStorage 在所有同源窗口中都是共享的。   cookie 在所有同源窗口中都是共享的。
 

问题十：简述一下你对 HTML 语义化的理解 ？

（1） 用正确的标签做正确的事情。  

（2） html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;  

（3） 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;  

（4） 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO ;  

（5） 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

问题十一：HTML5 有哪些新特性、移除了那些元素 ？

 HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    新增的有：        

     绘画 canvas;    用于媒介回放的 video 和 audio 元素;    本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;    sessionStorage 的数据在浏览器关闭后自动删除;    语意化更好的内容元素，比如 article、footer、header、nav、section;    表单控件，calendar、date、time、email、url、search;    新的技术 webworker, websocket;    新的文档属性 document.visibilityState
   移除的元素有：
    纯表现的元素：basefont，big，center，font, s，strike，tt，u;    对可用性产生负面影响的元素：frame，frameset，noframes

问题十二：什么是重绘和回流？（浏览器绘制过程）？

重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局 的操作，比如 background-color，我们将这样的操作称为重绘。       

回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作， 会影响到布局的操作，这样的操作我们称为回流。
常见引起回流属性：
    任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。
   （1）添加或者删除可见的 DOM 元素；    
   （2）元素尺寸改变——边距、填充、边框、宽度和高度    
   （3）内容变化，比如用户在 input 框中输入文字    
   （4）浏览器窗口尺寸改变——resize事件发生时    
   （5）计算 offsetWidth 和 offsetHeight 属性    
   （6）设置 style 属性的值    
   （7）当你修改网页的默认字体时。

常用且会导致回流的方法：
    clientWidth、clientHeight、clientTop、clientLeft
    offsetWidth、offsetHeight、offsetTop、offsetLeft
   scrollWidth、scrollHeight、scrollTop、scrollLeft
   scrollIntoView()、scrollIntoViewIfNeeded()
   getComputedStyle()
   getBoundingClientRect()
  scrollTo()

性能影响：
    回流比重绘的代价要更高。
    有时即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。
    现代浏览器会对频繁的回流或重绘操作进行优化：
    浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

如何避免？
CSS

1、避免使用table布局。
2、尽可能在DOM树的最末端改变class。
3、避免设置多层内联样式。
4、将动画效果应用到position属性为absolute或fixed的元素上。
5、避免使用CSS表达式（例如：calc()）。
JavaScript
1、避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
2、避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
3、避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
4、对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

    回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很 可能会导致父节点的一系列回流。

 问题十三：为什么操作 DOM 慢？（浏览器绘制过程）？ 

 一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗 

 问题十四：如何优化关键渲染路径？（浏览器渲染过程）

为尽快完成首次渲染，我们需要大限度减小以下三种可变因素：
（1）关键资源的数量。    （2）关键路径长度。    （3）关键字节的数量。
 优化关键渲染路径的常规步骤如下：
   （1）对关键路径进行分析和特性描述：资源数、字节数、长度。    
   （2）大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等。    
   （3）优化关键字节数以缩短下载时间（往返次数）。    
   （4）优化其余关键资源的加载顺序：您需要尽早下载所有关键资产，以缩短关键路径长度
 

 问题十五：渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程） 

 JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇 到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器 再从中断的地方恢复继续解析文档。
    也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。
 

 问题十六：浏览器的渲染原理？ 

（1）首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
（2）然后对 CSS 进行解析，生成 CSSOM 规则树。
（3）根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含 有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插 入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
（4）当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根 据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通 常这一行为也被称为“自动重排”。
（5）布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕 上，绘制使用 UI 基础组件。
     值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到 屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同 时，可能还在通过网络下载其余内容。

问题十七：常见浏览器所用内核？

    （1） IE 浏览器内核：Trident 内核，也是俗称的 IE 内核；
    （2） Chrome 浏览器内核：统称为 Chromium 内核或 Chrome 内核，以前是 Webkit 内核，现 在是 Blink内核；
    （3） Firefox 浏览器内核：Gecko 内核，俗称 Firefox 内核；
    （4） Safari 浏览器内核：Webkit 内核；
    （5） Opera 浏览器内核：初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核；
    （6） 360浏览器、猎豹浏览器内核：IE + Chrome 双内核；
    （7） 搜狗、遨游、QQ 浏览器内核：Trident（兼容模式）+ Webkit（高速模式）；
    （8） 百度浏览器、世界之窗内核：IE 内核；
    （9） 2345浏览器内核：好像以前是 IE 内核，现在也是 IE + Chrome 双内核了；
    （10）UC 浏览器内核：这个众口不一，UC 说是他们自己研发的 U3 内核，但好像还是基于 Webkit 和 Trident ，还有说是基于火狐内核 

问题十八：介绍一下你对浏览器内核的理解？

 主要分成两部分：渲染引擎和 JS 引擎。
   渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也 可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格 式。
   JS 引擎：解析和执行 javascript 来实现网页的动态效果。
 开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引 擎
 

问题十九： 页面导入样式时，使用 link 和 @import 有什么区别？ 

   （1）从属关系区别。 @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加 载 CSS 文件，还可以定义 RSS、rel 连接属性、引入网站图标等。
   （2）加载顺序区别。加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页 面加载完毕后被加载。
   （3）兼容性区别。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容 性问题。
   （4）DOM 可控性区别。可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基 于文档的，无法使用 @import 的方式插入样式。

问题二十：行内元素与块级元素、行内块的区别？ 

 块级元素：

（div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等）

从浏览器的显示结果可以看出，块级元素新开启一行（即使是设置了width属性也是独占一行）、尽可能撑满父级元素的宽度，可以设置width和height属性；table元素浏览器默认的display属性为table。

行内元素：

（span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

从浏览器的显示结果可以看出，相邻的行内元素不换行，宽度即为内容的宽度、padding的4个方向都有效（从span标签可以看出，对于行内非替换元素，不会影响其行高，不会撑开父元素；而对于替换元素，则会撑开父元素）、margin只有水平方向有效（其中垂直方向的margin对行内替换元素（比如img元素）有效，对行内非替换元素无效）、不可以设置width和height属性。行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。

 

HTML、CSS、JavaScript常见面试题总结（CSS篇）