1. 1简述一下你对 HTML 语义化的理解？.
1.用正确的标签做正确的事情。
2.html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样>式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
3.搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
1.2 标签上 title 与 alt 属性的区别是什么？
alt 是给搜索引擎识别，在图像无法显示时的替代文本；
title 是关于元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。
alt 是给搜索引擎识别，在图像无法显示时的替代文本；
title 是关于元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。
1.3 iframe的优缺点？
优点：
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- Security sandbox
- 并行加载脚本
缺点：
- iframe会阻塞主页面的Onload事件
- 即时内容为空，加载也需要时间
- 没有语意
1.4 href 与 src？
href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。）
src source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。
href与src的区别
1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
2、作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；
3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
1.5 HTML、XHTML、XML有什么区别
HTML(超文本标记语言): 在html4.0之前HTML先有实现再有标准，导致HTML非常混乱和松散
XML(可扩展标记语言): 主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但是更加轻量高效，所以XML现在市场越来越小了
XHTML(可扩展超文本标记语言): 基于上面两者而来，W3C为了解决HTML混乱问题而生，并基于此诞生了HTML5，开头加入的做法因此而来，如果不加就是兼容混乱的HTML，加了就是标准模式。
1.6 知道img的srcset的作用是什么？
可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
所以，有了这些属性，浏览器会：
查看设备宽度
检查 sizes 列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载 srcset 列表中引用的最接近所选的槽大小的图像
srcset提供了根据屏幕条件选取图片的能力
1.7 link和@import的区别？
link属于XHTML标签，而@import是CSS提供的。
页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
link方式的样式权重高于@import的权重。
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
1.8 谈谈对BFC的理解 是什么？
书面解释：BFC(Block Formatting Context)这几个英文拆解
Block: Block在这里可以理解为Block-level Box,指的是块级盒子的标准
Formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
BFC是指一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.
它的作用是在一块独立的区域，让处于BFC内部的元素与外部的元素互相隔离.
如何形成？
BFC触发条件:
根元素，即HTML元素
position: fixed/absolute
float 不为none
overflow不为visible
display的值为inline-block、table-cell、table-caption
作用是什么？
防止margin发生重叠
两栏布局，防止文字环绕等
防止元素塌陷
1.9 html5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器谦容问题？如何区分HTML和HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
* 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
1.10 浏览器的内核分别是什么？经常遇到的浏览器的谦容性有哪些？原因，解决方法是什么，常用hack的技巧？
* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+background-color:#a200ff;/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
* （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
1.11 html常见兼容性问题？
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.IE z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; /* for IE 8*/
}
\10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片
1.12 什么是外边距重叠？重叠的结果是什么？
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
1.13 你能描述一下渐进增强和优雅降级之间的不同吗？
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
1.14 HTML5和css3的新标签
HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio…CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image, border-color, transform…;
1.15 DOCTYPE的作用？严格模式和混杂模式的区别？
！DOCTYPE告诉浏览器以HTML5标准解析页面，如果不写，则进入混杂模式
严格模式（标准模式）：以w3c标准解析代码
混杂模式（怪异模式）：浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的方法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
1.16 说一下HTML5的离线存储？
HTML5的离线存储是一种Web应用程序缓存技术，通过将Web应用程序的资源（如HTML文件、CSS样式表、JavaScript代码和图像等）保存到本地计算机上，可以使Web应用程序离线访问时仍然能够正常工作。离线存储可以提高Web应用程序的性能和可访问性，并提供了一种更加稳定和可靠的方式来提供Web应用程序。
在HTML5中，使用Application Cache API来实现离线存储，通过在HTML文件头部添加一个manifest属性指向一个描述了需要缓存的资源列表的清单文件，即可启用离线存储。一旦Web应用程序被离线缓存，用户可以在没有网络连接的情况下访问该应用程序，而无需从远程服务器下载资源。
尽管离线存储可以提高Web应用程序的性能和可访问性，但开发人员应该注意其缺点。由于离线存储的数据是保存在本地计算机上的，因此如果数据被篡改或损坏，Web应用程序可能会受到安全威胁或无法正常工作。此外，离线存储的数据也可能占用大量的本地存储空间，这可能会影响用户的设备性能。
1.17 说一下怎么做好seo？
1.网站结构优化：要保证网站的结构清晰、简洁，避免使用过多的Flash、JavaScript等对搜索引擎不友好的技术。
2.关键词优化：要根据网站所属的行业、目标用户等因素确定关键词，并将其合理地应用在标题、正文、图片等各个位置，但同时也要避免过度使用关键词，以免被搜索引擎识别为垃圾信息。
3.内容优化：要提供高质量、有价值的内容，吸引用户留下来，增加用户停留时间和页面访问量，同时也可以提升网站的信誉度和排名。
4.外部链接优化：要通过寻找相关的高质量外部链接，来提高网站的权重和排名。
1.18 说一下drag api？
Drag API是一种Web API，可以将拖放功能添加到网页中。它允许用户通过点击和拖动鼠标，将某些元素从一个位置移动到另一个位置。
使用Drag API，开发者可以在网页上实现自定义拖放功能，并对其进行细粒度的控制。例如，可以定义哪些元素可以被拖动，哪些元素可以作为拖放目标，以及如何处理拖放事件等。
Drag API提供了几个主要的接口和事件：
1.Draggable：通过将draggable属性设置为true，将一个元素标记为可拖动的。
2.Dragstart事件：当用户开始拖动一个元素时触发。
3.Dragenter事件：当一个可拖动元素进入一个可以放置的元素区域时触发。
4.Dragover事件：当一个可拖动元素在一个可以放置的元素区域内移动时触发。
5.Drop事件：当用户松开鼠标，释放一个可拖动元素并将其放置到一个可以放置的元素区域时触发。
6.Dragend事件：当用户完成拖动操作后触发。
通过使用Drag API，开发者可以创建各种有趣和交互性强的网页应用程序，例如拖动图片上传、拖动元素排序、拖动图表等。它可以改善用户体验，提高网站的吸引力和互动性
1.19 说一下canvas和svg的区别？
Canvas 和 SVG 都是 HTML5 提供的常见的绘图技术，但两者的实现原理和应用场景却有很大的区别。
1.实现原理 Canvas 是基于像素的绘图技术，它通过 JavaScript 操纵画布上的像素来进行绘图。在使用 Canvas 绘图时，我们可以获得一个类似于画布的空间，然后在其上利用数组进行像素点的操作和绘制出需要的图案。而 SVG 采用矢量绘图的方式，也就是基于数学公式，将各种图形和元素的形状、大小、位置等属性通过计算机计算后转化为一条条向量路径，最终表现在屏幕上。
2.应用场景 Canvas 更适用于动态展示大量复杂的图形或动画效果，如游戏、数据可视化、海报设计等，因为它能够快速地控制像素点，具备更高的灵活度和交互性。而 SVG 主要用于静态或固定比例的图形绘制，例如图标、标识、矢量地图等，由于其本身是矢量形式的，当缩放或变形后不会失真。此外，SVG 还提供了丰富的交互事件和 CSS 样式支持，对于需要编辑和修改的图形元素而言，使用 SVG 更为方便。
3.性能和可维护性 由于 Canvas 是基于像素操作的，涉及到大量的计算和渲染，因此在处理静态的图形绘制时，相较于 SVG 具备不优秀的性能表现。但对于大型动态图像以及需要实时交互的应用，Canvas 比 SVG 更具优势。由于 SVG 是基于 XML 标记语言来构建图形，因此代码量更多，当 SVG 绘制的图形变得更加复杂时，其代码的可维护性就会降低。
（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
其特点如下：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
其特点如下：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。
综上所述，Canvas 和 SVG 两种技术各自有其适合的应用场景，需要针对具体业务需求进行选择。如果需要展示一些简单的固定图案或数据统计图表等，采用 SVG 更加适合；而如果是要制作一些互动性强的动画、游戏，则使用 Canvas 更为方便有效。
1.20 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行
1.21 说说你对 SSG 的理解
SSG（Static Site Generation，静态网站生成）是指在构建时预先生成静态页面，并将这些页面部署到 CDN 或者其他存储服务中，以提升 Web 应用的性能和用户体验。
具体来说，SSG 的实现方式通常包括以下几个步骤：
1.在开发阶段，使用模板引擎等技术创建静态页面模板；
2.将需要展示的数据从后台 API 中获取或者通过其他渠道获取，并将其填充到静态页面模板中，生成完整的 HTML 页面；
3.使用构建工具（例如 Gatsby、Next.js 等）对静态页面进行构建，生成静态 HTML、CSS 和 JavaScript 文件；
4.部署生成好的静态文件到服务器或者 CDN 上，以供用户访问。
相比于传统的动态网页，SSG 具有如下优势：
1.加载速度快：由于不需要每次请求都动态地渲染页面，SSG 可以减少页面加载时间，从而提高用户体验和搜索引擎排名；
2.安全性高：由于没有后台代码和数据库，SSG 不容易受到 SQL 注入等攻击；
3.成本低：由于不需要动态服务器等设备，SSG 可以降低网站的运维成本和服务器负担。
需要注意的是，SSG 不适用于频繁更新的内容和动态交互等场景，但对于内容较为稳定和更新较少的网站则是一个性能优化的好选择。
1.22 说一下web worker?
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
通过postMessage将结果回传到主线程，这样复杂操作的时候，就不会阻塞主进程了
[阮一峰文章](Web Worker 使用教程 - 阮一峰的网络日志 (ruanyifeng.com))
1.23 说一下img的srcset作用？alt和title的区别?
- 响应式页面中经常用到根据屏幕密度设置不同的图片
- 这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片
- alt是图片失效的时候的备用图片地址，title是图片标题
1.24 说说你对 Dom 树的理解
什么是 DOM
从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。
DOM 提供了对 HTML 文档结构化的表述。
在渲染引擎中，DOM 有三个层面的作用：
从页面的视角来看，DOM 是生成页面的基础数据结构。
从 JavaScript 脚本视角来看，DOM 提供给 JavaScript 脚本操作的接口，通过这套接口，JavaScript 可以对 DOM 结构进行访问，从而改变文档的结构、样式和内容。
从安全视角来看，DOM 是一道安全防护线，一些不安全的内容在 DOM 解析阶段就被拒之门外了。
简言之，DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。
DOM树如何生成
HTML 解析器（HTMLParser）： 负责将 HTML 字节流转换为 DOM 结构。
那么网络进程是如何将数据传给HTML解析器的呢？
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1w0cvHXF-1683893094351)(C:\Users\32063\AppData\Roaming\Typora\typora-user-images\image-20230511155523413.png)]
从图中我们可以知道，网络进程和渲染进程之间有一个共享数据通道，网络进程加载了多少数据， 就将数据传给HTML解析器进行解析。
HTML解析器接收到数据（字节流）之后，字节流将转化成DOM，过程如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2OHMEm6l-1683893094352)(C:\Users\32063\AppData\Roaming\Typora\typora-user-images\image-20230511155547442.png)]
有三个阶段：
1、通过分词器将字节流转化为Token。 分词器先将字节流转换为一个个 Token，分为 Tag Token 和文本 Token。
注意，这里的Token并不是我们之前理解的Token，这里就是一个片段。
2、Token解析为DOM节点。
3、将 DOM节点添加到DOM树中。
JavaScript影响DOM的生成
我们知道，JavaScript可以修改DOM，它也会影响DOM的生成。
1、内嵌 JavaScript 脚本 比如我们嵌入了一段标签的代码，之前的解析过程都一样，但是解析到script标签时， 渲染引擎判断这是一段脚本，此时 HTML 解析器就会暂停 DOM 的解析， 因为接下来的 JavaScript 可能要修改当前已经生成的 DOM 结构。</div><div><br /></div><div>暂停解析之后，JavaScript 引擎介入，并执行<script>标签中的这段脚本。 脚本执行完成之后，HTML 解析器恢复解析过程，继续解析后续的内容，直至生成最终的 DOM。</div><div><br /></div><div>2、引入 JavaScript 文件 基本上跟之前是一致的，不同点在于，暂停解析之后执行JavaScript 代码，需要先下载这段 JavaScript 代码。</div><h2 id="cFkcJ">1.25 Node 和 Element 是什么关系？<br /></h2><div>Node与Element的关系，从继承方面思考可能清晰很多。</div><div><br /></div><div>Element 继承于 Node，具有Node的方法，同时又拓展了很多自己的特有方法。</div><div><br /></div><div>在Element的一些方法里，是明确区分了Node和Element的。比如说：childNodes与 children, parentNode与parentElement等方法。</div><div><br /></div><div>Node的一些方法，返回值为Node，比如说文本节点，注释节点之类的，而Element的一些方法，返回值则一定是Element。</div><div><br /></div><div>区分清楚这点了，也能避免很多低级问题。</div><div><br /></div><div>简单的说就是Node是一个基类，DOM中的Element，Text和Comment都继承于它。换句话说，Element，Text和Comment是三种特殊的Node，它们分别叫做ELEMENT_NODE,TEXT_NODE和COMMENT_NODE。</div><div><br /></div><div>所以我们平时使用的 html上的元素，即Element，是类型为ELEMENT_NODE的Node。</div><h2 id="WP73O">1.26 导致页面加载白屏时间长的原因有哪些，怎么进行优化？</h2><h3 id="sxXpa"><a name="t30"></a><a></a>一、白屏时间</h3><div>白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。</div><h3 id="UQLue">二、白屏时间的重要性</h3><div>当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的<strong>提升用户的体验，减少用户的跳出，提升页面的留存率。</strong></div><h3 id="38ERF">三、白屏的过程</h3><div>从输入url，到页面的画面展示的过程<br />1、首先，在浏览器地址栏中输入url</div><div><br /></div><div>2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。</div><div><br /></div><div>3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。</div><div><br /></div><div>4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。</div><div><br /></div><div>5、握手成功后，浏览器向服务器发送http请求，请求数据包。</div><div><br /></div><div>6、服务器处理收到的请求，将数据返回至浏览器</div><div><br /></div><div>7、浏览器收到HTTP响应</div><div><br /></div><div>8、读取页面内容，浏览器渲染，解析html源码</div><div><br /></div><div>9、生成Dom树、解析css样式、js交互,渲染显示页面</div><div>浏览器下载HTML后，首先解析头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。当DOM树构建完成后，立即开始构造CSSOM树。理想情况下，样式表下载速度够快，DOM树和CSSOM树进入一个并行的过程，当两棵树构建完毕，构建渲染树，然后进行绘制。</div><div><br /></div><div>Tips:浏览器安全解析策略对解析HTML造成的影响：</div><div><br /></div><div>当解析HTML时遇到内联JS代码，会阻塞DOM树的构建，会先执行完JS代码;当CSS样式文件没有下载完成时，浏览器解析HTML遇到了内联JS代码，此时，浏览器暂停JS脚本执行，暂停HTML解析。直到CSS文件下载完成，完成CSSOM树构建，重新恢复原来的解析。</div><div><br /></div><div>JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。</div><h3 id="EjAFD">四、白屏-性能优化</h3><h4 id="l3Bik"><a></a>1. DNS解析优化</h4><div>针对DNS Lookup环节，我们可以针对性的进行DNS解析优化。</div><ul><li>DNS缓存优化</li><li>DNS预加载策略</li><li>稳定可靠的DNS服务器</li></ul><h4 id="e5o9j">2. TCP网络链路优化</h4><div>多花点钱吧</div><h4 id="3Q0He"><a></a>3. 服务端处理优化</h4><div>服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等…</div><h4 id="DLRJr">4. 浏览器下载、解析、渲染页面优化</h4><div>根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：<br />尽可能的精简HTML的代码和结构</div><div>尽可能的优化CSS文件和结构</div><div>一定要合理的放置JS代码，尽量不要使用内联的JS代码</div><div>将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的时间提前，从而缩短首屏渲染时间；</div><div>延迟首屏不需要的图片加载，而优先加载首屏所需图片（offsetTop<clientHeight）</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22document.documentElement.clientHeight%2F%2F%E8%8E%B7%E5%8F%96%E5%B1%8F%E5%B9%95%E5%8F%AF%E8%A7%86%E5%8C%BA%E5%9F%9F%E7%9A%84%E9%AB%98%E5%BA%A6%5Cnelement.offsetTop%2F%2F%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9B%B8%E5%AF%B9%E4%BA%8E%E6%96%87%E6%A1%A3%E9%A1%B6%E9%83%A8%E7%9A%84%E9%AB%98%E5%BA%A6%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22WAzad%22%7D"></div><div><span class="lake-fontsize-12" style="color: #4D4D4D;">因为JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。</span></div><h2 id="FPDbk">1.27 渐进式jpg有了解过吗？<br /></h2><div>渐进式 JPEG（Progressive JPEG），即PJPEG，是该标准的三种流行压缩模式之一。</div><div><br /></div><div>渐进式 JPEG 以特定方式压缩照片和图形，与基线 JPEG 不同，PJPEG 在 Web 浏览器中呈现时，会首先给出模糊图像的外观。然后一点一点地开始图片渲染，直到它显示完全渲染的图像。浏览器实际上是逐行解释图像，但在占位符中提供了完整图像的模糊预览。随着 Web 浏览器的渲染引擎处理数据，图像的对比度开始变得更清晰、更详细。直到最后渲染完毕，用户将看到完整的清晰图像。</div><div><br /></div><div>PJPEG 能够起到一种很有意义的心理效果，让用户有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。</div><div><br /></div><div>PJPEG 适用于大部分常用的浏览器，包括 Chrome、Firefox 和 Internet Explorer 9 及更高版本。旧版本的 Internet Explorer 在显示渐进式 JPEG 时存在一些问题，不过这只是很小一部分用户。而不支持渐进式 JPEG 格式的浏览器会像普通 JPEG 一样加载照片。</div><h2 id="asrEf">1.28 怎么实现“点击回到顶部”的功能？</h2><h3 id="njycW"><a name="t36"></a><a></a>1、锚点</h3><div>使用锚点链接是一种简单的返回顶部的功能实现。<br /><span class="lake-fontsize-12" style="color: #4D4D4D;">该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。</span></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cbody%20style%3D%5C%22height%3A2000px%3B%5C%22%3E%5Cn%20%20%20%20%3Cdiv%20id%3D%5C%22topAnchor%5C%22%3E%3C%2Fdiv%3E%5Cn%20%20%20%20%3Ca%20href%3D%5C%22%23topAnchor%5C%22%20style%3D%5C%22position%3Afixed%3Bright%3A0%3Bbottom%3A0%5C%22%3E%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%3C%2Fa%3E%5Cn%3C%2Fbody%3E%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22BwvzY%22%7D"></div><h3 id="0D3Dq">2、scrollTop</h3><div>scrollTop属性表示被隐藏在内容区域上方的像素数。<br />元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度</div><div>由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cbody%20style%3D%5C%22height%3A2000px%3B%5C%22%3E%5Cn%20%20%20%20%3Cbutton%20id%3D%5C%22test%5C%22%20style%3D%5C%22position%3Afixed%3Bright%3A0%3Bbottom%3A0%5C%22%3E%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%3C%2Fbutton%3E%5Cn%20%20%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20%20%20test.onclick%20%3D%20function()%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20document.body.scrollTop%20%3D%20document.documentElement.scrollTop%20%3D%200%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%226ekC9%22%7D"></div><h3 id="vgEsG">3、scrollTo</h3><div>scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角</div><div>设置scrollTo(0,0)可以实现回到顶部的效果</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cbody%20style%3D%5C%22height%3A2000px%3B%5C%22%3E%5Cn%20%20%20%20%3Cbutton%20id%3D%5C%22test%5C%22%20style%3D%5C%22position%3Afixed%3Bright%3A0%3Bbottom%3A0%5C%22%3E%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%3C%2Fbutton%3E%5Cn%20%20%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20%20%20test.onclick%20%3D%20function()%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20scrollTo(0%2C0)%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22tV1ff%22%7D"></div><h3 id="BxnmM">4、scrollBy()</h3><div>scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量</div><div>只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cbody%20style%3D%5C%22height%3A2000px%3B%5C%22%3E%5Cn%20%20%20%20%3Cbutton%20id%3D%5C%22test%5C%22%20style%3D%5C%22position%3Afixed%3Bright%3A0%3Bbottom%3A0%5C%22%3E%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%3C%2Fbutton%3E%5Cn%20%20%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20%20%20test.onclick%20%3D%20function()%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20var%20top%20%3D%20document.body.scrollTop%20%7C%7C%20document.documentElement.scrollTop%5Cn%20%20%20%20%20%20%20%20%20%20%20%20scrollBy(0%2C-top)%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22wTkK1%22%7D"></div><h3 id="v9wuV">5、scrollIntoView()</h3><div>Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域<br />该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true</div><div><br /></div><div>使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cbody%20style%3D%5C%22height%3A2000px%3B%5C%22%3E%5Cn%20%20%20%20%3Cdiv%20id%3D%5C%22target%5C%22%3E%3C%2Fdiv%3E%5Cn%20%20%20%20%3Cbutton%20id%3D%5C%22test%5C%22%20style%3D%5C%22position%3Afixed%3Bright%3A0%3Bbottom%3A0%5C%22%3E%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%3C%2Fbutton%3E%5Cn%20%20%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20%20%20test.onclick%20%3D%20function()%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20target.scrollIntoView()%3B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%5Cn%22%2C%22heightLimit%22%3Atrue%2C%22margin%22%3Atrue%2C%22id%22%3A%22YPMXB%22%7D"></div>
