Canvas

Canvas的基础定义

Canvas是HTML5新增的元素，是由HTML代码配合高度和宽度属性而定义出的一个绘制区域，我们可以使用JavaScript在Canvas内部进行绘制。

Canvas只有两个可选属性，一个是宽度width，一个高度height。如果你不设置宽高的话，默认的宽度width是300px,height是150px;

我们也可以使用css来设置canvas的宽高，但如果设置的宽高和初始宽高比例不一致的话，就会出现扭曲现象。

浏览器地址栏输入URL到页面显示的步骤

基础版本

1. 浏览器根据请求的URL将其交给DNS 域名解析，找到URL对应的IP地址，向服务器发送请求
2. 服务器交给后台处理，处理完成后返回数据，浏览器接受文件（包括HTML、CSS、JS、图像等）
3. 浏览器将加载到的资源进行语法解析，建立相应的内部数据结构（比如HTML的DOM）
4. 浏览器载入解析到的文件资源，渲染页面

HTTP状态码

1XX：信息状态码

100

100 Continue 一般发生在post请求是，发送了HTTP header之后服务端将返回100，表示确认，之后就可以发送具体的参数信息。

2XX:成功状态码

200

OK 正常返回信息

201

Created 请求成功并且服务器创建了新的资源

202

Accepted 服务器已经接受了请求，但是还没有处理这些请求

3XX:重定向

301

Moved Permanently永久重定向 请求的网页已经永久移动到新的位置了

302

Found 临时重定向

303

See other 临时重定向，且总是使用get请求新的URL

304

Not modified 自从上次请求之后，请求的网页没有被修改过

4XX：客户端错误

400

Bad request 服务器无法理解请求的格式，客户端不应该尝试再次使用相同的内容发生请求

401

Unauthorized 请求未授权

403

Forbidden 禁止访问

404

Not found 找不到和URL相匹配的资源

5XX:服务器错误

500

Internal server error 最常见的服务器端错误

503

Service unavailable 服务器端暂时无法处理请求（过载、正在维护）

浏览器内核

浏览器内核主要分为两个部分：渲染引擎和JS引擎

渲染引擎

渲染引擎负责获取网页的内容、整理信息和计算网页的显示方式，然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释也会不同，所以渲染出来的结果也有所不同。

所有的页面浏览器、电子邮件客户端和一些其他需要编辑、显示网络内容的应用程序都需要内核。

JS引擎

JS引擎是解析和执行JavaScript代码来实现页面的动态效果

其实最开始渲染引擎和JS引擎并没有很明确的区分，但是随着近年来JS引擎越来越独立，浏览器的内核通常就只指渲染引擎

请描述一下cookie、sessionstorage、localstorage的区别？

存储内容

1. Cookie是网站为了表示用户身份而存储在用户本地终端上的数据，通常是经过加密的。
2. Cookie数据始终在同源的HTTP请求中携带，即使不需要也会携带着cookie，而且cookie数据会在浏览器和服务器之间来回传递。
3. SessionStorage和LocalStorage不会自动把数据发给浏览器，仅在本地保存。

存储大小

1. Cookie的存储大小不能超过4k
2. SessionStorage 和LocalStorage的大小也有限制，但是比cookie大的多，可以达到5M

过期时间

1. Localstorage可以永久存储，除非主动删除否则不失效，浏览器关闭后数据不会丢失除非主动删除数据。
2. SessionStorage 数据在当前浏览器窗口关闭后会自动删除。
3. Cookie在cookie的过期时间到达之前是一直有效的，关闭浏览器或者关闭窗口不会使其失效。

优化电商网站的加载

1. 图片懒加载，在页面的未可视区域添加一个滚动事件，判断图片位置与浏览器顶端的举例和与页面的距离，如果前者小于后者的话，要优先加载。
2. 如果是幻灯片、相册之类的图片，可以使用图片预加载技术，将当前展示的图片的前一张和后一张优先加载。
3. 如果图片过大的话，可以使用特殊编码的图片，加载时会优先加载一张压缩的特别厉害的压缩图，用来提高用户体验。
4. 如果图片展示区的大小小于图片的真实大小的话，应该在服务器端根据业务需求先将图片进行压缩，使得压缩后的图片大小和展示区域相匹配。
5. 如果图片是CSS图片的话，可以使用CSSsprite、SVGsprite、iconfont、Base64等技术。

CSS

CSS Sprite是什么？

CSS Sprite就是将多个小图片拼接到一张大图片中，通过background-position和元素尺寸调节需要显示的背景图案

优点：

1. 减少HTTP请求次数，极大的提高了页面的加载速度
2. 增加图片的信息重复度，提高压缩比，减少图片大小
3. 便于更换风格，只需要在一张或几张图片上修改颜色或者样式就能实现整体的风格变换

缺点：

图片合并比较麻烦

维护比较麻烦，修改一张图片可能要重新布局整张图片样式。

Display：none和visibility：hidden的区别？

联系：

它们都能让元素不可见

区别：

是否能够渲染

1. Display：none会让元素完全从渲染树中消失，浏览器渲染页面的时候该元素不占据任何空间
2. Visbility：hidden不会让元素在渲染树中消失，元素渲染时元素会继续占据空间，只是内容不可见。

是否能够被继承

1. Display：none是非继承属性。子孙节点消失是由于该元素从渲染树消失造成的，通过修改子孙节点的属性也无法显示。
2. Visbility：hidden是可继承属性。子孙节点消失是由于继承了该元素的hidden属性，通过设置子孙元素的visibility：visible可以让子孙节点显示出来。

是否会造成文档重排

1. 修改元素的display属性会造成文档重排
2. 修改visibility属性会造成元素的重绘

清除浮动

1. 给父元素定义height
2. 结尾处加空div标签clear：both
3. 父级div定义伪类：after和zoom
4. 父级div定义overflow：hidden
5. 父级div也跟着浮动，需要定义宽度
6. 结尾处加br标签 clear：both

CSS3新增特性

1. 新增各种CSS选择器
2. 圆角border-radius
3. 多列布局
4. 阴影和反射
5. 文字特效text-shadow
6. 线性渐变
7. 旋转transform