HTML,CSS,浏览器相关

1.网络中使用最多的图片格式有那些?

网络中的图片格式有7种,常用的分别是 JPEG,GIF,PNG

• JPEG

1. 称为 联合图像专家组,

优点
- 他支持极高的压缩率,因此jpeg图像的下载速度大大加快
- 它能够轻松地处理16.8m颜色,可以很好的在心全彩色的图像
- 该格式的文件尺寸相对较小,下载速度快,有利于在带宽定不”富裕”的情况下传输
缺点
- 并非所有的浏览器都支持将各种jpeg图像插入网页
- 压缩时,可能是图像法的质量受到损伤,因此不适宜用该格式来显示高清晰度的图像
应用
- JPEG格式的压缩率是目前各种图像文件格式中最高的。它用有损压缩的方式去除图像的冗余数据，但存在着一定的失真。由于其高效的压缩效率和标准化要求，目前已广泛用于彩色传真、静止图像、电话会议、印刷及新闻图片的传送。由于各种浏览器都支持JPEG这种图像格式，因此它也被广泛用于图像预览和制作HTM网页。

• GIF

1. 图形交换格式

特点
1.对于灰度图像表现最佳。
2.具有GIF87a和GIF89a两个版本。
3.采用改进的LZW压缩算法处理图像数据。
4.不支持24bit彩色模式，最多存储256色。

应用
1.GIF是压缩格式的文件，用于减少文件在网络上传递的时间；
2.GIF的位深为1-8bit，单色透明，由一个最多256种颜色的调色板实现，图像大小最多为64K×64K像素。GIF主要是为一个数据流而设计的一种传输格式，而不是作为文件的存当格式，因此它是最复杂的一种图像文件格式；
3.支持Bitmap、Grayscale和索引彩色模式。

• PNG

1. 采用无损压缩算法的位图格式

特性
1.体积小 —- 网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，网页中不可能大范围的使用文件较大的bmp格式文件
2.无损压缩 —- PNG文件采用LZ77算法的派生算法进行压缩，其结果是获得高的压缩比，不损失数据。它利用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不可能产生颜色的损失，这样就可以重复保存而不降低图像质量。
3.支持透明效果 —- PNG可以为原图像定义256个透明层次，使得彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。这种功能是GIF和JPEG没有的。

2.请简述CSS盒子模型

1. 盒模型：盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
2. IE模型和标准模型唯一的区别是内容计算方式的不同

IE模型元素宽度width = content + padding + border，高度计算相同

1. 通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box） ```css .content-box { box-sizing:content-box; width: 100px; height: 50px; padding: 10px; border: 5px solid red; margin: 15px; } //.content-box设置为标准模型，它的元素宽度width = 100px

.border-box { box-sizing: border-box; width: 100px; height: 50px; padding: 10px; border: 5px solid red; margin: 15px; }

<a name="R6hxq"></a>
### 3.视频/音频标签的使用
**视频video**
```html
<video
   src=”视频的路径”
   controls=”控制播放、暂停、音量等”
   autoplay=”自动播放”
   loop=”循环播放”
   width=”视频播放器的宽度”
   height=”视频播放器的高度”
>
</video>
// 兼容写法
<video  controls autoplay loop width="500" height="500">
           <source src="video/hhxd.mp4" type="video/mp4"></source>
           <source src="video/ghsy.ogg" type="audio/ogg"></source>
      flash支持
     当所有不支持时，就提供一个下载路径。
</video>

音频audio

<audio
   src=”音频的路径”
   controls=”控制播放、暂停、音量等”
   autoplay=”自动播放”
   loop=”循环播放”
></audio>

4.HTML5新增的内容有那些

5.HTML5新增的语义化标签有哪些

6.CSS新增的特性?

7.清除浮动的方式有哪些?

8.定位的属性有何区别?

9.子元素如何在父元素中居中?

10.Border-box和content box的区别?

11.元素垂直居中

12.如何让chrome浏览器显示小于12px的文字

13.CSS选择器有哪些,那些属性可以继承优先级如何计算,CSS新增的伪类有那些

14.网页中有大量图片加载很慢,你有什么办法进行优化

15.行内元素/块级元素有哪些

16.浏览器的标准式和怪异式的区别

17.margin和padding在什么场合下使用

18.弹性盒子布局属性有哪些,请简述

19.怎么实现标签的禁用

20.Flex布局原理

21.px,rem,em的区别

22.网页的三层结构有哪些

23.常见的兼容性一阶段内容中记几个

24.垂直与水平居中的方式

25.三栏布局方式,两边固定,中间自适应

26.doctype作用

27.说一下HTML5 drag api

28.对HTML语义化标签的理解

29.web性能优化

30.浏览器缓存机制

31.浏览器输入网址到页面渲染全过程

32.画一条0.5px的线

33.关于js动画和css3动画的差异

34.双边距重叠问题(外边距折叠)

35.css选择器优先级

36.css动画如何实现

37.css3对溢出的处理

38.css的新属性是否了解

39.overflow的原理

1.说一下http和https

参考回答：

https的SSL加密是在传输层实现的。

(1)http和https的基本概念

http:超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https:是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

(2)http和https的区别？

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

主要的区别如下：

Https协议需要ca证书，费用较高。

http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443

http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

(3)https协议的工作原理

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤，如图所示。

• 首先客户端通过URL访问服务器建立SSL连接
• 服务端收到客户端请求后，会将网站支持的证书信息（证书中包含公钥）传送一份给客户端
• 客户端的服务器开始协商SSL连接的安全等级，也就是信息加密的等级
• 客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站
• 服务器利用自己的私钥解密出会话密钥
• 服务器利用会话密钥加密与客户端之间的通信

(4)https协议的优点

• 使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
• HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
• HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

(5)https协议的缺点

• https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。
• https缓存不如http高效，会增加数据开销。
• SSL证书也需要钱，功能越强大的证书费用越高。
• SSL证书需要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种消耗。

2.说说TCP为什么需要三次握手和四次挥手？

一、三次握手

三次握手（Three-wayHandshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包

主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备

过程如下：

第一次握手：客户端给服务端发一个SYN报文，并指明客户端的初始化序列号ISN(c)，此时客户端处于SYN_SENT状态

第二次握手：服务器收到客户端的SYN报文之后，会以自己的SYN报文作为应答，为了确认客户端的SYN，将客户端的ISN+1作为ACK的值，此时服务器处于SYN_RCVD的状态

第三次握手：客户端收到SYN报文之后，会发送一个ACK报文，值为服务器的ISN+1。此时客户端处于ESTABLISHED状态。服务器收到ACK报文之后，也处于ESTABLISHED状态，此时，双方已建立起了连接

上述每一次握手的作用如下：

第一次握手：客户端发送网络包，服务端收到了这样服务端就能得出结论：客户端的发送能力、服务端的接收能力是正常的。

第二次握手：服务端发包，客户端收到了这样客户端就能得出结论：服务端的接收、发送能力，客户端的接收、发送能力是正常的。不过此时服务器并不能确认客户端的接收能力是否正常

第三次握手：客户端发包，服务端收到了。这样服务端就能得出结论：客户端的接收、发送能力正常，服务器自己的发送、接收能力也正常

通过三次握手，就能确定双方的接收和发送能力是正常的。之后就可以正常通信了

为什么不是两次握手?

如果是两次握手，发送端可以确定自己发送的信息能对方能收到，也能确定对方发的包自己能收到，但接收端只能确定对方发的包自己能收到无法确定自己发的包对方能收到

并且两次握手的话,客户端有可能因为网络阻塞等原因会发送多个请求报文，延时到达的请求又会与服务器建立连接，浪费掉许多服务器的资源

二、四次挥手

tcp终止一个连接，需要经过四次挥手

过程如下：

第一次挥手：客户端发送一个FIN报文，报文中会指定一个序列号。此时客户端处于FIN_WAIT1状态，停止发送数据，等待服务端的确认

第二次挥手：服务端收到FIN之后，会发送ACK报文，且把客户端的序列号值+1作为ACK报文的序列号值，表明已经收到客户端的报文了，此时服务端处于CLOSE_WAIT状态

第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给FIN报文，且指定一个序列号。此时服务端处于LAST_ACK的状态

第四次挥手：客户端收到FIN之后，一样发送一个ACK报文作为应答，且把服务端的序列号值+1作为自己ACK报文的序列号值，此时客户端处于TIME_WAIT状态。需要过一阵子以确保服务端收到自己的ACK报文之后才会进入CLOSED状态，服务端收到ACK报文之后，就处于关闭连接了，处于CLOSED状态

四次挥手原因

服务端在收到客户端断开连接Fin报文后，并不会立即关闭连接，而是先发送一个ACK包先告诉客户端收到关闭连接的请求，只有当服务器的所有报文发送完毕之后，才发送FIN报文断开连接，因此需要四次挥手

3.TCP和UDP的区别

参考回答：

（1）TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。

（2）TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。

（3）TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。

（4）TCP只能是1对1的，UDP支持1对1,1对多。

（5）TCP的首部较大为20字节，而UDP只有8字节。

（6）TCP是面向连接的可靠性传输，而UDP是不可靠的。

4.Cookie、sessionStorage、localStorage的区别

参考回答：

共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）

localStorage：localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明一下cookie的作用：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等

保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。

跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

总结：

cookie：cookie是需要服务器环境的，存储大小4kb，可以设置过期时间，如果不配置过期时间，默认为一个会话，一个会话为浏览器打开到关闭之前的阶段；

localStorage和sessionStorage：localStorage和sessionStorage不需要服务器环境，大小为5mb，localStroage没有过期时间，除非被删除，否则一直存在，sessionStorage仅在当前会话中存在，如果关闭页面或浏览器将会被清除；无论是cookie，localStorage，sessionStorage都是不安全的，原因是浏览器可以直接进行操作，它们都不能跨浏览器访问

session依赖于cookie，它的大小取决于服务器的大小，它是安全的，它的数据保存在服务器上

5.对HTML语义化标签的理解

参考回答：

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

6.Doctype 作 用? 严 格 模 式 与 混 杂 模 式 如 何 区 分 ？ 它 们 有 何 意 义?

参 考 回 答 ：
Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严
格模式和混杂模式。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

7. 描 述 一 下 XSS 和 CRSF 攻 击 ？ 防 御 方 法 ？

参 考 回 答 ：
XSS, 即为（Cross Site Scripting）, 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的， 当渲染 DOM 树的过程成发生了不在预期内执行的 JS 代码时， 就发生了 XSS 攻击。大多数 XSS 攻击的主要方式是嵌入一段远程或者第三方域上的 JS 代码。实际上是在目标网站的作用域下执行了这段 JS 代码。
CSRF（Cross Site Request Forgery，跨站请求伪造），字面理解意思就是在别的站点伪造了一个请求。专业术语来说就是在受害者访问一个网站时，其 Cookie 还没有过期的情况下，攻击者伪造一个链接地址发送受害者并欺骗让其点击，从而形成 CSRF 攻击。
XSS 防御的总体思路是：对输入(和 URL 参数)进行过滤，对输出进行编码。也就是对提交的所有内容进行过滤，对 url 中的参数进行过滤，过滤掉会导致脚本执行的相关内容；然后对动态输出到页面的内容进行 html 编码，使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的 XSS 攻击。
防御CSRF 攻击主要有三种策略： 验证 HTTP Referer 字段； 在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。

8.click 在 ios 上 有 300ms 延 迟 ， 原 因 及 如 何 解 决 ？

参 考 回 答 ：

由于移动端会有双击缩放的这个操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是这次操作是不是双击。

(1)方案一：禁用缩放
(3)CSS touch-action

touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理（也就是浏览器）的默认行为。如果将该属性值设置为touch-action: none，那么表示在该元素上的操作不会触发用户代理的任何默认行为，就无需进行300ms的延迟判断。

9.介 绍 知 道 的 http 返 回 的 状 态 码

• 100-199 : 表示成功接收请求, 要求客户端继续提交下一次请求才能完成整个处理过程
• 200-299: 表示成果接收请求并已完成整个处理过程. 常用 200
• 300-399: 为完成请求, 客户需进一步细化需求: 例如: 请求的资源已经移动一个新地址, 常用 302(重定向), 307 和 304(拿缓存)
• 400-499: 客户端的请求有错误, 包含语法错误或者不能正确执行. 常用 404(请求的资源在 web 服务器中没有) 403(服务器拒绝访问, 权限不够)
• 500-599: 服务器端出现错误

常用：

• 200 正常，表示一切正常, 返回的是正常请求结果
• 201created，创建成功
• 202accepted ，更新成功
• 302/307 临时重定向，指出请求的文档已被临时移动到别处, 此文档的新的 url 在 location 响应头中给出
• 304 未修改，表示客户机缓存的版本是最新的, 客户机应该继续使用它
• 403 禁止，服务器理解客户端请求, 但拒绝处理它, 通常用于服务器上文件或目录的权限设置所致
• 401 未授权
• 404 找不到，服务器上不存在客户机所请求的资源
• 500 服务器内部错误，服务器端的 cgi, asp, jsp 等程序发生错误
• 503 服务不可用

10.强 ， 协 商 缓 存 || 说一下浏览器的缓存机制

强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话，
cache-control 的优先级高于 expires。
协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match

浏览器缓存分为强缓存和协商缓存。缓存的作用是提高客户端速度、节省网络流量、降低服务器压力。

• 强缓存：浏览器请求资源，如果header中的Cache-Control和Expires没有过期，直接从缓存（本地）读取资源，不需要再向服务器请求资源。
• 协商缓存：浏览器请求的资源如果是过期的，那么会向服务器发送请求，header中带有Etag字段。服务器再进行判断，如果ETag匹配，则返回给客户端300系列状态码，客户端继续使用本地缓存；否则，客户端会重新获取数据资源。

11.cookie 有 哪 些 字 段 可 以 设 置

参 考 回 答 ：
name 字段为一个 cookie 的名称。
value 字段为一个 cookie 的值。
domain 字段为可以访问此 cookie 的域名。
非顶级域名，如二级域名或者三级域名，设置的 cookie 的 domain 只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的 cookie，否则 cookie 无法生成。
顶级域名只能设置 domain 为顶级域名， 不能设置为二级域名或者三级域名， 否则 cookie无法生成。
二级域名能读取设置了 domain 为顶级域名或者自身的 cookie，不能读取其他二级域名domain 的 cookie。所以要想 cookie 在多个二级域名中共享，需要设置 domain 为顶级域名，这样就可以在所有二级域名里面或者到这个 cookie 的值了。
顶级域名只能获取到 domain 设置为顶级域名的 cookie，其他 domain 设置为二级域名的无法获取。
path 字段为可以访问此 cookie 的页面路径。 比如 domain 是 abc.com,path 是/test， 那么只有/test 路径下的页面可以读取此 cookie。
expires/Max-Age 字段为此 cookie 超时时间。若设置其值为一个时间，那么当到达此时间后，此 cookie 失效。不设置的话默认值是 Session，意思是 cookie 会和 session 一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此 cookie 失效。
Size 字段 此 cookie 大小。
http字段 cookie的httponly属性。 若此属性为true， 则只有在http请求头中会带有此cookie的信息，而不能通过 document.cookie 来访问此 cookie。
secure 字段 设置是否只能通过 https 来传递此条 cookie

12.浏 览 器 输 入 网 址 到 页 面 渲 染 全 过 程

1. 地址栏输入URL地址
2. 缓存加载，如缓存中存在当前url地址即加载缓存，否则执行第三步
3. DNS域名解析：通过域名解析得到对应的IP，然后通过ARP解析IP得到对应的MAC地址
4. 建立TCP连接，即三次握手过程：客户端发送有SYN的数据包，表示我将要发送请求；服务器端发送标有SYN/ACK的数据包，表示我已收到通知，告知客户端发送请求；客户端发送ACK的数据包，表示我要开始发送请求，准备被接受。
5. 利用TCP通道进行数据传输：服务器端收到数据包，并发送确认数据包已收到的信息到客户端，不断重复这个过程；客户端在发送一个数据包后，未接受到服务端的确定消息，则重新发送该数据包，即TCP的重发机制；当接受完所有的数据包后，接收端会按照TCP头中的需要进行排序，形成完整的数据
6. 断开TCP连接，即四次握手过程：客户端发送请求，申请断开连接，进入等待阶段，此时不会发送数据，但是会继续接受数据；服务器端收到请求后，告知客户端已明白，此时服务器端进入等待状态，不会再接受数据，但是会继续发送数据；客户端收到后，进入下一阶段等待；服务器端发送完剩余的数据后，告知客户端可以断开连接，此时服务器端不会发送和接受数据；客户端收到后，告知服务器端我开始断开连接；服务器端收到后，开始断开连接
7. 数据处理：当网络进程接收到响应报文状态码，进行响应的操作
8. 创建渲染过程：当前需要渲染HTML时，则需要创建渲染进程，用于后期渲染HTML。
9. 开始渲染：当创建完渲染进程后，网络进程会将接受到的HTML、Javascript等数据传输给渲染进程。而在渲染进程接受完数据后，此时用户界面上会发生这几件事：(1)更新地址栏的安全状态(2)更新地址栏的URL(3)前进后退此时enable，显示正在加载状态(4)更新网页
10. 渲染过程：是整个过程的最后一步。而页面渲染的过程可以分为9个步骤：
    1. 解析HTML生成DOM树
    2. 解析CSS生成CSSOM
    3. 加载Javascript
    4. 生成渲染树(Render Tree)：在有了DOM树和CSSOM之后，需要将两者结合生成渲染树，并且这个过程会去除掉那些display:none的节点。此时，渲染树就具备元素和元素的样式信息。
    5. 布局：根据渲染树，对树种每个节点进行计算，确定每个节点在页面中的宽度、高度和位置。注意：第一次确定节点大小和位置的过程称为布局，而第二次才被称为回流
    6. 分层：由于层叠上下文的存在，渲染引擎会为具备层叠上下文的元素创建对应的图层，而诸多图层的叠加就形成了我们看到的一些页面效果。
    7. 生成绘制列表：对于存在图层的页面部分，需要进行有序的绘制，而对于这个过程，渲染引擎会将一个个图层的绘制拆分成绘制指令，并按照图层绘制顺序形成一个绘制列表
    8. 光栅化：有了绘制列表后，渲染引擎中的合成线程会根据档期那是扣的大小将图层进行分块处理，然后合成线程会对视口附近的图块生成位图，即光栅化。而渲染进程也维护了一个栅格化的线程池，专门用于将图块转为位图。
    9. 显示：当所有图块都经过栅格化处理后，渲染引擎中的合成线程会生成绘制图块的指令，提交给浏览器进程。然后浏览器进程将页面绘制到内存中。最后将内存绘制结果希纳是在用户界面上。重绘：整个从绘制列表、光栅化、显示的过程，就是我们常说的重绘的过程

13. HTML5 和 CSS3 用 的 多 吗 ？ 你 了 解 它 们 的 新 属 性 吗 ？ 有 在 项 目 中 用 过吗 ？

参 考 回 答 ：
html5：
1）标签增删
8 个语义元素 header section footer aside nav main article figure
内容元素 mark 高亮 progress 进度
新的表单控件 calander date time email url search
新的 input 类型 color date datetime datetime-local email
移除过时标签 big font frame frameset
2）canvas 绘图，支持内联 SVG。支持 MathML
3）多媒体 audio video source embed track
4）本地离线存储，把需要离线存储在本地的文件列在一个 manifest 配置文件
5）web 存储。localStorage、SessionStorage
css3：
CSS3边框如border-radius， box-shadow等； CSS3背景如background-size， background-origin等；CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation 等。 参考https://www.cnblogs.com/xkweb/p/5862612.html

14.get和post的区别

GET和POST，两者是HTTP协议中发送请求的方法

GET方法请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据

POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用

本质上都是TCP链接，并无差别，但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中会体现出一些区别

区别

从w3schools得到的标准答案的区别如下：

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET产生的URL地址可以被Bookmark，而POST不可以。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST没有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在Request body中

15.如何理解OSI七层模型?

OSI （Open System Interconnect）模型全称为开放式通信系统互连参考模型，是国际标准化组织 ( ISO ) 提出的一个试图使各种计算机在世界范围内互连为网络的标准框架

OSI将计算机网络体系结构划分为七层，每一层实现各自的功能和协议，并完成与相邻层的接口通信。即每一层扮演固定的角色，互不打扰

OSI主要划分了七层，如下图所示：

应用层

应用层位于 OSI 参考模型的第七层，其作用是通过应用程序间的交互来完成特定的网络应用

该层协议定义了应用进程之间的交互规则，通过不同的应用层协议为不同的网络应用提供服务。例如域名系统 DNS，支持万维网应用的 HTTP 协议，电子邮件系统采用的 SMTP协议等

在应用层交互的数据单元我们称之为报文

表示层

表示层的作用是使通信的应用程序能够解释交换数据的含义，其位于 OSI参考模型的第六层，向上为应用层提供服务，向下接收来自会话层的服务

该层提供的服务主要包括数据压缩，数据加密以及数据描述，使应用程序不必担心在各台计算机中表示和存储的内部格式差异

会话层

会话层就是负责建立、管理和终止表示层实体之间的通信会话

该层提供了数据交换的定界和同步功能，包括了建立检查点和恢复方案的方法

传输层

传输层的主要任务是为两台主机进程之间的通信提供服务，处理数据包错误、数据包次序，以及其他一些关键传输问题

传输层向高层屏蔽了下层数据通信的细节。因此，它是计算机通信体系结构中关键的一层

其中，主要的传输层协议是TCP和UDP

网络层

两台计算机之间传送数据时其通信链路往往不止一条，所传输的信息甚至可能经过很多通信子网

网络层的主要任务就是选择合适的网间路由和交换节点，确保数据按时成功传送

在发送数据时，网络层把传输层产生的报文或用户数据报封装成分组和包，向下传输到数据链路层

在网络层使用的协议是无连接的网际协议（Internet Protocol）和许多路由协议，因此我们通常把该层简单地称为 IP 层

数据链路层

数据链路层通常也叫做链路层，在物理层和网络层之间。两台主机之间的数据传输，总是在一段一段的链路上传送的，这就需要使用专门的链路层协议

在两个相邻节点之间传送数据时，数据链路层将网络层交下来的 IP数据报组装成帧，在两个相邻节点间的链路上传送帧

每一帧的数据可以分成：报头head和数据data两部分:

• head 标明数据发送者、接受者、数据类型，如 MAC地址
• data 存储了计算机之间交互的数据

通过控制信息我们可以知道一个帧的起止比特位置，此外，也能使接收端检测出所收到的帧有无差错，如果发现差错，数据链路层能够简单的丢弃掉这个帧，以避免继续占用网络资源

物理层

作为OSI 参考模型中最低的一层，物理层的作用是实现计算机节点之间比特流的透明传送

该层的主要任务是确定与传输媒体的接口的一些特性（机械特性、电气特性、功能特性，过程特性）

该层主要是和硬件有关，与软件关系不大

16.DNS协议 是什么？说说DNS 完整的查询过程?

DNS（Domain Names System），域名系统，是互联网一项服务，是进行域名和与之相对应的 IP 地址进行转换的服务器

简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址

• IP 地址：一长串能够唯一地标记网络上的计算机的数字
• 域名：是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识

在域名服务器解析的时候，使用缓存保存域名和IP地址的映射

计算机中**DNS**的记录也分成了两种缓存方式：

• 浏览器缓存：浏览器在获取网站域名的实际 IP 地址后会对其进行缓存，减少网络请求的损耗
• 操作系统缓存：操作系统的缓存其实是用户自己配置的 hosts 文件

解析域名的过程如下：

• 首先搜索浏览器的 DNS 缓存，缓存中维护一张域名与 IP 地址的对应表
• 若没有命中，则继续搜索操作系统的 DNS 缓存
• 若仍然没有命中，则操作系统将域名发送至本地域名服务器，本地域名服务器采用递归查询自己的 DNS 缓存，查找成功则返回结果
• 若本地域名服务器的 DNS 缓存没有命中，则本地域名服务器向上级域名服务器进行迭代查询
  • 首先本地域名服务器向根域名服务器发起请求，根域名服务器返回顶级域名服务器的地址给本地服务器
  • 本地域名服务器拿到这个顶级域名服务器的地址后，就向其发起请求，获取权限域名服务器的地址
  • 本地域名服务器根据权限域名服务器的地址向其发起请求，最终得到该域名对应的 IP 地址
• 本地域名服务器将得到的 IP 地址返回给操作系统，同时自己将 IP 地址缓存起来
• 操作系统将 IP 地址返回给浏览器，同时自己也将 IP 地址缓存起
• 至此，浏览器就得到了域名对应的 IP 地址，并将 IP 地址缓存起

17.如何理解CDN？说说实现原理？

CDN (全称 Content Delivery Network)，即内容分发网络

构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术

简单来讲，CDN就是根据用户位置分配最近的资源

于是，用户在上网的时候不用直接访问源站，而是访问离他“最近的”一个 CDN 节点，术语叫边缘节点，其实就是缓存了源站内容的代理服务器。

总结

CDN 目的是为了改善互联网的服务质量，通俗一点说其实就是提高访问速度

CDN 构建了全国、全球级别的专网，让用户就近访问专网里的边缘节点，降低了传输延迟，实现了网站加速

通过CDN的负载均衡系统，智能调度边缘节点提供服务，相当于CDN服务的大脑，而缓存系统相当于CDN的心脏，缓存命中直接返回给用户，否则回源

18.说说 HTTP1.0/1.1/2.0 的区别?

HTTP1.0：

• 浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接

HTTP1.1：

• 引入了持久连接，即TCP连接默认不关闭，可以被多个请求复用
• 在同一个TCP连接里面，客户端可以同时发送多个请求
• 虽然允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的，服务器只有处理完一个请求，才会接着处理下一个请求。如果前面的处理特别慢，后面就会有许多请求排队等着
• 新增了一些请求方法
• 新增了一些请求头和响应头

HTTP2.0：

• 采用二进制格式而非文本格式
• 完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行
• 使用报头压缩，降低开销
• 服务器推送

19.说说 HTTP 常见的请求头有哪些? 作用？

HTTP头字段（HTTP header fields）,是指在超文本传输协议（HTTP）的请求和响应消息中的消息头部分

它们定义了一个超文本传输协议事务中的操作参数

HTTP头部字段可以自己根据需要定义，因此可能在 Web服务器和浏览器上发现非标准的头字段

常见的请求字段如下表所示：

20.说说对WebSocket的理解？应用场景？

一、是什么

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅

客户端和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输

从上图可见，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据

而在websocket出现之前，开发实时web应用的方式为轮询

不停地向服务器发送 HTTP 请求，问有没有数据，有数据的话服务器就用响应报文回应。如果轮询的频率比较高，那么就可以近似地实现“实时通信”的效果

轮询的缺点也很明显，反复发送无效查询请求耗费了大量的带宽和 CPU资源

二、特点

• 全双工：通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合
• 二进制帧：采用了二进制帧结构，语法、语义与 HTTP 完全不兼容，相比http/2，WebSocket更侧重于“实时通信”，而HTTP/2 更侧重于提高传输效率，所以两者的帧结构也有很大的区别，不像 HTTP/2 那样定义流，也就不存在多路复用、优先级等特性，自身就是全双工，也不需要服务器推送
• 协议名：引入ws和wss分别代表明文和密文的websocket协议，且默认端口使用80或443，几乎与http一致
• 握手： WebSocket也要有一个握手过程，然后才能正式收发数据

优点

• 较少的控制开销：数据包头部协议较小，不同于http每次请求需要携带完整的头部
• 更强的实时性：相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少
• 保持创连接状态：创建通信后，可省略状态信息，不同于HTTP每次请求需要携带身份验证
• 更好的二进制支持：定义了二进制帧，更好处理二进制内容
• 支持扩展：用户可以扩展websocket协议、实现部分自定义的子协议
• 更好的压缩效果：Websocket在适当的扩展支持下，可以沿用之前内容的上下文，在传递类似的数据时，可以显著地提高压缩率

应用场景

基于websocket的事实通信的特点，其存在的应用场景大概有：

• 弹幕
• 媒体聊天
• 协同编辑
• 基于位置的应用
• 体育实况更新
• 股票基金报价实时更新

21.渐进增强 (progressive enhancement) 和优雅降级 (gracefuldegradation) 的区别?

渐进增强: 先保证低版本浏览器的基本功能，再去兼容高版本浏览器效果和交互。
优雅降级: 先保证高版本浏览器的效果和交互等，再去兼容低版本的浏览器。

22. **<script>**标签中 defer 和 async 属性的区别？

async：与后续元素渲染异步执行，乱序执行，若 js 文件之间存在依赖关系，容易产生错误，只适用于完全没有依赖的文件，文档解析过程中异步下载，下载完成之后立即执行。
defer：（H5 规范中，defer 是有序执行的，但实际不一定是有序执行的）与后续渲染异步执行，延迟到界面文档解析完成之后执行，即为立即下载，延迟执行。所有执行均在 DOMContentLoaded 事件触发之前完成。
async 和 defer 异步加载， async 下载完立即执行， defer 待界面文档解析完成之后执行不带属性：加载到<script>立即下载并执行，阻塞后续渲染的执行。
最佳方案：外部引用文件放在/body 之前执行

23.data- 属性的作用是什么？

data- 为 H5 新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取 ；需要注意的是：data- 之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。
即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

24.什么是渐进式渲染？

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
比如：
（1）图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
（2）确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load 事件加载其他资源和内容。
（3） 异步加载 HTML 片段——当页面通过后台渲染时， 把 HTML 拆分， 通过异步请求，分块发送给浏览器。

25.什么是重构和架构

重构是指在不改变代码行为的前提下，重写代码，使其更加简洁、易于复用。

架构是指软件项目的各个不同部件之间的组合方式。
优秀的架构：

1. 可预测：可以对软件的工作方式和结构做出准确的假设
2. 可复用：在多处使用同一代码，无需重写
3. 可扩展：比较容易的增加新内容
4. 可维护：修改一处代码不用大规模的改动其他代码

26.前端开发有哪些优化问题？

• 减少http请求次数
• cssspirit,data uri JS，CSS源码压缩
• 前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
• 用setTimeout来避免页面失去响应
• 用hash-table来优化查找
• 当需要设置的样式很多时设置className而不是直接操作style
• 少用全局变量
• 缓存DOM节点查找的结果
• 避免使用CSS Expression 图片预载
• 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

27.常见浏览器内核有哪些？

IE:trident内核
Firefox：gecko内核
safari：webkit内核
opera：以前是presto内核，现在改用google chrome的Blink内核
Chrome：Blink（基于webkit，google与opera software共同开发）

28.长连接和短连接

长连接：长连接，指在一个连接上可以连续发送多个数据包，在连接保持期间，如果没有数据包发送，需要双方发链路检测包。
短连接：短连接（short connnection）是相对于长连接而言的概念，指的是在数据传送过程中，只在需要发送数据时，才去建立一个连接，数据发送完成后，则断开此连接，即每次连接只完成一项业务的发送。
再来一波自己话介绍：
长连接：连接->传输数据->保持连接 -> 传输数据-> ….->直到一方关闭连接，客户端关闭连接。
长连接指建立SOCKET连接后不管是否使用都保持连接，但安全性较差。
短连接：连接->传输数据->关闭连接。
比如HTTP是无状态的的短链接，浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。因为连接后接收了数据就断开了，所以每次数据接受处理不会有联系。这也是HTTP协议无状态的原因之一。

在HTTP/1.0中，默认使用的是短连接。但从 HTTP/1.1起，默认使用长连接。

应用场景：
长连接：长连接多用于操作频繁，点对点的通讯，而且连接数不能太多情况。每个TCP连接都需要三步握手，这需要时间，如果每个操作都是先连接，再操作的话那么处理速度会降低很多，所以每个操作完后都不断开，次处理时直接发送数据包就OK了，不用建立TCP连接。
例如：数据库的连接用长连接， 如果用短连接频繁的通信会造成socket错误，而且频繁的socket 创建也是对资源的浪费。
短连接：而像WEB网站的http服务一般都用短链接，因为长连接对于服务端来说会耗费一定的资源，而像WEB网站这么频繁的成千上万甚至上亿客户端的连接用短连接会更省一些资源，如果用长连接，而且同时有成千上万的用户，如果每个用户都占用一个连接的话，那可想而知吧。
所以并发量大，但每个用户无需频繁操作情况下需用短连好。
Http长连接和TCP长连接的区别
Http长连接 和 TCP长连接的区别在于: TCP 的长连接需要自己去维护一套心跳策略。，而Http只需要在请求头加入keep-alive:true即可实现长连接。

29.讲讲304缓存的原理。

服务器首先为请求生成ETag，服务器可在稍后的请求中，使用它来判断页面是否已经修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）是否缓存。
304是HTTP状态码，服务器用它来标识这个文件没有修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件。
客户端请求页面A。服务器返回页面A，并给A加上一个ETag。客户端展现该页面，并将页面连同ETag一起缓存。
客户端再次请求页面A，并将上次请求时服务器返回的ETag起传递给服务器。
服务器检查该ETag，并判断岀该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改一 Not modified）和一个空的响应体。

30.实现一个简单的HTTP服务器。

在Node.js中加载HTTP模块，并创建服务器，监听端口代码。如下所示：

var  http  = require（'http'）；//加载HTTP模块
http.createServer ( function  (req,res) { res. writeHead (200，{' Content-Type'：'text/htm1'})；
//200代表状态成功，文档类型是
//给浏览器识别用的
res. write（'< meta charset="UTF-8"><h1>有课前端网</h1>1'）；
//返回给客户端的HTML数据
res.end ( )；
//结束输出流})
.listen（3000）；//绑定3000