html日常总结

题目总结

1.浏览器内核

• IE trident内核
• Firefox gecko内核
• safari webkit内核
• opera/Chrome Blink内核

2.HTML文件开头的Doctype

• 声明位于文档的开头，在html标签之前。此标签告知浏览器使用哪种HTML或XHTML规范

3.Quirks模式是什么？与Standards模式有什么区别

• 兼容模式
• 区别 布局 样式解析 脚本执行
  例 在Standards模式下 给等行内标签设置wdith和heith都不会生效，而在Quirks模式下，则会生效

4.div+css布局较table布局的优点

• 改版的时候方便，只需要修改css文件
• 页面加载速度更快、结构更清晰
• 表现与结构分离
• 易于优化 (seo)搜索引擎更友好，排名更容易靠前

5.img的alt和title有何异同？strong和em的异同？

• title(toop tip)图片的提示信息 alt图片加载不出来时的提示信息。在IE里，会在没有title时把alt当做tool tip显示
• strong 粗体 em 斜体

6.渐进增强与优雅降级

• 渐进增强 先针对低版本的浏览器实现基础功能，然后在针对高版本的浏览器实现效果，交互等改进和追加功能增加用户体验
• 优雅降级 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

7.cookies，sessionStorage和localStorage的区别

• cookie 请求缓存 同一浏览器同一会话不同页面间使用 cookie的作用是与服务器进行交互
• sessionStorage 会话缓存，同一会话的页面可以访问，结束会话后即销毁
• localStorage 本地缓存 除非主动删除数据，否则一直存在

8.src和href的区别

• src用于替换当前元素, href用于在当前文档和引用资源之间确定联系
• src会将其指向的资源下载到文档中,例如js脚本，img图片和frame

9.浏览器解析渲染页面过程

• 解析HTML，生成DOM树
• 解析CSS，生成CSSOM树
• 将DOM树和CSSOM树关联，生成渲染树(Render Tree)
• 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
• 绘制render树（paint），绘制页面像素信息
• 将像素发送给GPU，展示在页面上。(Display)

10.GET和POST有什么区别

• 大小方面
  GET传输一般2K-8K，IE限制2K，，POST没有大小限制
• 安全方面
  GET通过url明文传输，POST通过body传输，本身都不安全，因为HTTP就是明文传输。
• 浏览器记录
  GET请求浏览器会记录，POST不会
• 浏览器后退
  GET无害，POST会再次提交
• 浏览器收藏
  GET可以收藏，POST不可以
• 浏览器缓存
  GET可以缓存，POST不会
• 编码方式
  GET通过url编码，POST支持多种编码
• TCP数据包
  GET产生一个数据包，POST产生2个数据包
• 使用方式(习惯上讲)
  GET主要拉取数据，POST主要提交保存数据

11.前端常见攻击方式

• XSS攻击
• CSRF攻击
• Sql注入
• html脚本注入

12.前端有哪些跨域方案

跨域是浏览器做出的安全限制，必须同协议、同域名、同端口否则会被浏览器block

• JSONP跨域（本质是JS调用）
• CORS（后台设置）
• Nginx反向代理（运维配置）
• proxy代理

13.前端网站常规优化方案

优化策略：减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式

• 合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）
• Nginx开启Gzip，进一步压缩资源（减小资源大小）
• 图片资源使用CDN加速（提高加载速度）
• 符合条件的图标做base64处理（减小资源大小）
• 样式表放首部，JS放尾部（JS单线程，会阻塞页面；资源加载方式）
• 设置缓存（强缓存和协商缓存，提高加载速度）
• link或者src添加rel属性，设置prefetch或preload可预加载资源。（加载时机）
• 如果使用了UI组件库，采用按需加载（减小资源大小）
• SPA项目，通过import或者require做路由按需（减小资源大小）
• 服务端渲染SSR，加快首屏渲染，利于SEO 页面使用骨架屏，提高首页加载速度（提高加载速度）
• 使用 JPEG 2000, JPEG XR,and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显
• 使用图片懒加载-lazyload

13.http与https的区别

• HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。

• HTTPS：是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于 TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。SSL 协议可分为两层：SSL 记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL 握手协议（SSL Handshake Protocol），它建立在 SSL 记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

• HTTP 与 HTTPS 的区别
  1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

  2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

  3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

  4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

14.https的实现

• ① 客户端的浏览器向服务器发送请求，并传送客户端 SSL 协议的版本号，加密算法的种类，产生的随机数，以及其他服务器和客户端之间通讯所需要的各种信息。

• ② 服务器向客户端传送 SSL 协议的版本号，加密算法的种类，随机数以及其他相关信息，同时服务器还将向客户端传送自己的证书。

• ③ 客户端利用服务器传过来的信息验证服务器的合法性，服务器的合法性包括：证书是否过期，发行服务器证书的 CA 是否可靠，发行者证书的公钥能否正确解开服务器证书的 “发行者的数字签名”，服务器证书上的域名是否和服务器的实际域名相匹配。如果合法性验证没有通过，通讯将断开；如果合法性验证通过，将继续进行第四步。

• ④ 用户端随机产生一个用于通讯的 “对称密码”，然后用服务器的公钥（服务器的公钥从步骤②中的服务器的证书中获得）对其加密，然后将加密后的“预主密码”传给服务器。

• ⑤ 如果服务器要求客户的身份认证（在握手过程中为可选），用户可以建立一个随机数然后对其进行数据签名，将这个含有签名的随机数和客户自己的证书以及加密过的密钥一起传给服务器。

• ⑥ 如果服务器要求客户的身份认证，服务器必须检验客户证书和签名随机数的合法性，具体的合法性验证过程包括：客户的证书使用日期是否有效，为客户提供证书的 CA 是否可靠，发行 CA 的公钥能否正确解开客户证书的发行 CA 的数字签名，检查客户的证书是否在证书废止列表（CRL）中。检验如果没有通过，通讯立刻中断；如果验证通过，服务器将用自己的私钥解开加密的私钥，然后执行一系列步骤来产生主通讯密码（客户端也将通过同样的方法产生相同的主通讯密码）。

• ⑦ 服务器和客户端用相同的对称加密密钥，对称密钥用于 SSL 协议的安全数据通讯的加解密通讯。同时在 SSL 通讯过程中还要完成数据通讯的完整性，防止数据通讯中的任何变化。

• ⑧ 客户端向服务器端发出信息，指明后面的数据通讯将使用的步骤 ⑦ 中的主密码为对称密钥，同时通知服务器客户端的握手过程结束。

• ⑨ 服务器向客户端发出信息，指明后面的数据通讯将使用的步骤 ⑦ 中的主密码为对称密钥，同时通知客户端服务器端的握手过程结束。

HTTPS实现部分为转载：为CSDN博主「Tyler_Zx」的原创，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38289815/article/details/80969419

15.TCP与UDP的区别

• TCP 是面向连接的，UDP 是面向无连接的
• UDP程序结构较简单
• TCP 是面向字节流的，UDP 是基于数据报的
• TCP 保证数据正确性，UDP 可能丢包
• TCP 保证数据顺序，UDP 不保证