CSS3HTML5笔记

精灵图

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的
“background-image”，
“background-repeat”，
“background-position”
的组合进行背景定位，`background-position`可以用数字能精确的定位出背景图片的位置

link,@import

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

1. Link 属于 html 标签，而 @import 是 CSS 中提供的
2. 在页面加载的时候，link 会同时被加载，而 @import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
3. @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
4. Link 引入样式的权重大于 @import 的引用（ @import 是将引用的样式导入到当前的页面中）

伪类,伪元素

伪元素和伪类的区别？

1、伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。

2、伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）
伪类是给页面中已经存在的元素添加一个类。

CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（`:first-line`，`:first-letter`）或将元素添加到标记中（与 content:...组合），而不必修改标记（`:before`，`:after`）。
- `:first-line`和`:first-letter`可以用来修饰文字。
- 上面提到的`.clearfix`方法中，使用`clear: both`来添加不占空间的元素。
- 使用`:before`和`after`展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。

外边距重叠

什么是外边距重叠？重叠的结果是什么？

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

折叠结果遵循下列计算规则：
1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

优化规则

尽可能的减少 HTTP 的请求数
使用 CDN ( Content Delivery Network)
添加 Expires 头(或者 Cache-control )
Gzip 组件
将 CSS 样式放在页面的上方
将脚本移动到底部 (包括内联的 )
避免使用 CSS 中的 Expressions
将 JavaScript 和 CSS 独立成外部文件
减少 DNS 查询
压缩 JavaScript 和 CSS (包括内联的)
避免重定向
移除重复的脚本
配置实体标签 ( ETags)

doctype

Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

1.声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

2.标准模式和混杂模式 ( quirks mode ) 。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

3.混杂模式通常模拟老式浏览器 ( 比如 Microsoft IE 4 和 Netscape Navigator 4 ) 的行为以防止老站点无法工作。

4.在 IE 6 出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对 IE 5 和更低版本的向后兼容性，Opera 7 和更高版本也在混杂模式中使用有缺点的 IE 盒模型。

浮动元素居中

让最外面的层相对定位，left 等于 50% ，然后内部嵌套层也使用相对定位且 left 设为-50% 这样的效果就是内层相对整行为水平居中；
使用 display: table;
直接使用table 布局

css & js文件管理

如果让你来制作一个访问量很高的大型网站，你会如何来管理所有 CSS 文件、JS与图片？

1、css 文件，以及 js 文件尽量分别都放在一个文件里，因为客户端请求服务器的次数就会减少。
2、背景图尽量采用聚合技术，就是放在一个图片里，用 background-position 来定位；
3、css 文件里尽量都精简一些，比如说#sidebarcontent{}啥的，我们直接可以用 #s-c{}因为这样整个文件的
容量就会减少，同样的原理，在线也可以压缩 js 文件。容量变小些嘛

h5新特性

h5新特性有哪些

h5是一个技术集（它里边主要包含了html5、css3、JS的一些新的特性）

HTML5新特性 —— 新的语义标签和属性

1.queryselector 与 queryselectorAll
2.存储
3.表单新特性
4.视频和音频
5.Canvas绘图
6.地理定位
7.拖放API

浏览器通信

如何实现浏览器内多个标签页之间的通信？

调用 localstorage、 cookie等数据存储通信方式

webworker

什么是web worker，为什么我们需要使用web worker？

web worker是一种开启线程方式
可以在主线程的下面通过web worker开启一个子线程
子线程的执行不会阻塞主线程执行

当我们需要去执行一些高运算的代码时，为了不阻塞主线程，
这个时则就可以开启一个子线程去做这个事件

本地存储

请描述一下 cookies sessionStorage 和 localstorage区别

1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。（只在打开的那个窗口内有，就那个窗口生效）
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭（默认是浏览器关闭时数据会过期）

3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

单位

px和em的区别、rem呢？

px：大小是固定的
em：大小为父级元素的font-size值
rem: 大小为根元素的font-size值

浏览器加载

$(document).ready()方法和window.onload有什么区别？

1.window.onload方法是在网页中所有的元素(包括元素的所有关联文件) 完全加载到浏览器后才执行的。
2.$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

url-浏览器

从输入url到显示页面，都经历了什么

1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)(DNS（域名系统，Domain Name System）是互联网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住IP地址。)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。（TCP即传输控制协议。TCP连接是互联网连接协议集的一种。）
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互

浏览器渲染页面

浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）
都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3.将CSS与DOM合并，构建渲染树（Render Tree）
4.布局和绘制，重绘（repaint）和重排（reflow）

性能优化

如何进行网站性能优化

减少HTTP请求数。
使用缓存。
脚本的无阻塞加载。
内联脚本的位置优化等。
Javascript中的DOM 操作优化、CSS选择符优化。
图片编码优化，懒加载。

xml，json

xml和json的区别

JSON相对于XML来讲，数据的体积小，传递的速度更快些
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
JSON的速度要远远快于XML
XML对数据描述性比较好；