sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话页面才能访问并且当会话结束后数据也会随之销毁；
而loacalStorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，Storage仅仅是为了本地存储数据而生；拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie,getCookie；Cookie的大小是受限的，并且每次请求一个新页面Cookie都会被发送过去，无形中浪费了带宽，另外Cookie还需要指定作用域，不可以跨域调用

src | href 区别

src用于替换当前元素，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内；<script src="xx.js"></script>当浏览器解析到该元素时会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似将所指向资源嵌入标签内，这也是为什么将js脚本放在底部而不是头部。
href指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，如果在文档中添加<link href="xxx.css" rel="stylesheet"/>那么浏览器会识别为css文件，就会并行下载资源并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css，而不是使用@import方式

网页制作会用到的图片格式

png-8
png-24
jpeg
gif
svg
Webp webp是谷歌开发的一种旨在加快图片加载速度的图片格式，图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间

微格式

是一种让机器可读的语义化XHTML词汇集合，是结构化数据的开放标准，是为特殊应用而制定的特殊格式。让网站内容在搜索引擎结果界面可以显示额外的提示

缓存

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次JS请求一般情况下有哪些地方会有缓存处理:

dns缓存
cdn缓存
浏览器缓存
服务器缓存

一个页面上有大量的图片，加载很慢，有哪些方法优化

图片懒加载，在页面上的为可视区域添加一个滚动条事件，判断图片位置与浏览器顶端距离与页面的距离，如果前者小于后者优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先加载。如果图片为css图片，可以使用CSSsprite,SVGsprite,Iconfont,Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致

HTML 结构语义化

为了在没有css代码时也能呈现很好的内容结构、代码结构；
提高用户体验，比如title,alt用于解释名词和图片信息；
利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多信息；
方便其他设备解析，以语义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，如果遵循 W3C 标准的团队都遵循这个标准可以减少差异化，利于规范化

以前端角度出发做好 SEO 需要考虑什么

了解搜索引擎如何抓取网页和如何索引网页；
Meta标签优化，主题title,网站免俗Description和关键词keywords，还有一些其他隐藏文字如作者Author，目录Category，编码语种Language等；
如何选取关键词并在网页中防止关键词，确定主关键词一般在5个左右，然后针对这些关键词进行优化，包括关键词密度、相关度、突出性等等；
了解主要的搜索引擎，不同的搜索引擎对页面的抓取和索引、排序的规则都不一样；主要的互联网目录，目录是人工编辑的，主要收录网站主页；
按点击付费的搜索引擎；
搜索引擎登录，网站做完后要让别人找到你最简单的办法就是将网站提交到搜索引擎；
链接交换和链接广泛度；
合理的标签使用

对 DOM 设置 CSS 样式

外部样式表，引入外部 css 文件；
内部样式表，将 css 代码放在<head>标签内部；
内联样式，将 css 样式直接定义在 HTML 元素内部

`CSS`都有哪些选择器

派生选择器(用GTML标签申明)
ID选择器(用DOM的ID申明)
类选择器(用一个样式类名申明)
属性选择器(用DOM的属性申明，属于CSS2，IE6不支持，不常用)

除了前3中基本选择器还有一些扩展选择器：后代选择器(利用空格间隔)、群组选择器(利用逗号间隔)
行内，ID 选择器，类选择器，派生选择器

CSS 中可以通过哪些属性定义使得一个 DOM 元素不显示在浏览器可视范围内

设置display属性为none；
设置visibility属性为hidden；
设置宽高为0；
设置opacity为0；
设置z-index位置在-1000em

超链接访问过后 hover 样式就不出现的问题是什么

被点击访问过的超链接样式不再具备hover和active了，解决方法是改变CSS属性的排列顺序LVHA:link,visited,hover,active

什么是 css hack

针对不同的浏览器写不同的css code的过程，就是css hack

行内元素和块级元素的具体区别

块级元素特性：独占一行，宽高内边距外边距可以控制 div p h1-h6 from ul
行内元素：和相邻的行内元素在同一行，宽高靠里面内容撑起，宽高不可以设置 a b i br span input select

外边距重叠

外边距重叠就是margin-collapse，在CSS当中，相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且所结合成的外边距称为折叠外边距

`rgba()`和`opacity`的透明效果的不同

opactiy作用于元素以及元素内的所有内同的透明度，rgba()只作用于元素的颜色或背景色

`css`中可以让文字在垂直和水平方向上重叠的两个属性

垂直方向:line-height，水平方向letter-sapcing。letter-spacing还可以用于消除inline-block元素间换行符空格间隙问题

垂直居中一个元素

已知宽高的元素 50%，transform;
未知宽高的元素 left,right,top,bottom:0

`px`和`em`的区别

px的值是固定的指定是多少就是多少，计算比较容易
em的值不是固定的，并且em会继承父级元素的字体大小

`reset`的`css`文件

不同浏览器对一些元素有不同的默认样式，需要用重置样式文件来处理。normalize相比reset没有重置所有的样式风格，提供了一套合理的默认样式、
既能让众多浏览器达到一致和合理，但又不扰乱其他的东西

sass 和 less

都是css预处理器，是css上的一种抽象层，less是一种动态样式语言，将css富裕了动态语言的特性，如变量、继承、运算、函数。
结构清晰，便于扩展；
可以方便的屏蔽浏览器私有语法诧异；
可以轻松实现多重继承；
完全兼容 CSS 代码

`display:none`和`visbility:hidden`的区别

display隐藏对应的元素但不挤占该元素原来的空间，visibility 隐藏病占原来空间

`CSS`中`link`和`@import`的区别

link属于html标签，而@import是css中提供的
在页面加载的时候，link会同时被加载，而@import引用的css会在页面加载完成后才会加载引用的css，
@import只有在ie5以上才可被识别，而link是html标签，不存在浏览器兼容问题
link引入样式的权重大于@import的引用

简单介绍盒模型

css的盒子模型有两种：IE盒子模型、标准的W3C盒子模型

盒模型：内容、内边距、外边距、边框
IE盒模型宽高为内容、内边距和边框，标准 W3C 盒模型为内容宽高

`BFC`是什么

BFC块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题。BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

`HTML`和`XHMTL`区别

XHTML元素必须被正确的嵌套
XHTML元素必须被关闭
标签名必须用小写字母
XHTML文档必须拥有根元素

`Html`常见兼容性问题

双边距，float引起的，使用 display:inline ``-3px
超链接hover点击后失效使用正确的书写顺序lvha
IE z-index问题，给父级添加position:relative
Png透明，需要使用JS代码
min-height最小高度
select在IE6下遮盖，使用iframe嵌套
无法定义1px左右的宽度容器，IE6默认行高造成的，使用over:hidden,zoom:0.08 line-height:1px;
IE5-8不支持opacity，opacity:0.4;filter:alpha(opacity=60) /*for IE5-7*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"

对`WEB`标准以及`W3C`的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和JS脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所反问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性

浏览器渲染机制、重绘、重排

网页生成过程：

HTML被HTML解析器解析成DOM 树
css则被css解析器解析成CSSOM 树
结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
生成布局（flow），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上

重排(也称回流):

当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。触发：

添加或者删除可见的DOM元素
元素尺寸改变——边距、填充、边框、宽度和高度

重绘：

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
触发：改变元素的color、background、box-shadow等属性

重排优化建议：

分离读写操作
样式集中修改
缓存需要修改的 DOM 元素
尽量只修改position：absolute或fixed元素，对其他元素影响不大
动画开始GPU加速，translate使用3D变化

transform 不重绘，不回流
是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

DOM、BOM 对象

BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 JavaScript 有能力与浏览器"对话"。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
- 核心DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型

什么是 `XML DOM`？

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

什么是 `HTML DOM`？

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。