HTML和CSS基础面试题(三)问：浏览器是如何渲染UI的？答：浏览器获取HTML文件，然后对文件进行解析，形成DO

问：浏览器是如何渲染UI的？

答：

浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
与此同时，进行CSS解析，生成Style Rules
接着将DOM Tree与Style Rules合成为 Render Tree
接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来

问：em、rem的区别

答：

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。

问：解释csssprites，如何使用。

答：
css精灵图把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

问：伪类和伪元素的区别

答： 1）伪类(pseudo-classes)

其核⼼就是⽤来选择DOM树之外的信息,不能够被普通选择器选择的⽂档之外的元素，⽤来添加⼀些选择器的特殊效果。
⽐如:hover :active :visited :link :visited :first-child :focus :lang等
由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。
由此可以看出，它的功能和class有些类似，但它是基于⽂档之外的抽象，所以叫伪类。

2）伪元素(Pseudo-elements)

DOM树没有定义的虚拟元素
核⼼就是需要创建通常不存在于⽂档中的元素，
⽐如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。
伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于⽂档中，所以称为伪元素。⽤于将特殊的效果添加到某些选择器

2）伪类与伪元素的区别

表示⽅法
- CSS2 中伪类、伪元素都是以单冒号:表示,
- CSS2.1 后规定伪类⽤单冒号表示,伪元素⽤双冒号::表示，
- 浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。
- CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。
- CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。浏览器对以:开头的伪元素也继续⽀持，但建议规范书写为::开头
定义不同
- 伪类即假的类，可以添加类来达到效果
- 伪元素即假元素，需要通过添加元素才能达到效果
总结:
- 伪类和伪元素都是⽤来表示⽂档树以外的"元素"。
- 伪类和伪元素分别⽤单冒号:和双冒号::来表示。
- 伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，
- 是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类。

4）相同之处：

伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。不同之处：
伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。
伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。

问：浏览器工作原理

答：

用户界面、2. 网络、3. UI后端、4. 数据存储、5. 浏览器引擎、6. 渲染引擎、7. js解释器

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

答：
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

问：常见的浏览器内核有哪些？

答：

Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

问：一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

答：

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

问：如何进行seo优化？

1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。

2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取

4、重要内容不要用js输出：爬虫不会执行js获取内容

5、少用iframe：搜索引擎不会抓取iframe中的内容

6、非装饰性图片必须加alt属性

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。

问：如何实现0.5px边框

答：
1、border+border-image+linear-gradient的方式

  <div class="border"></div>
  .border{
        width:200px;
        height: 200px;
        background-color: red;
        margin: 0 auto ;
        border-bottom:  1px solid blue;
        border-image: linear-gradient( to bottom,transparent  50%,Green 50%) 0 0 100% 0 ;
    }

2、伪元素+background-image的方式

 <div class="border"></div>
 .border {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 0 auto;
        position: relative;
    }

    .border:before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100px;
        height: 1px;
        background-color: blue;
        background-image: linear-gradient(to bottom transparent 50%, blue 50%);
    }

3、定位+伪元素+transfrom缩放(scale)的方式

 <div class="border"></div>

 .border {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 0 auto;
        position: relative;
    }

HTML和CSS基础面试题(三)