题目来自于牛客网题库-前端校招面试题目合集。
该题库共501题
学习目标：题库501道题目学习一遍。
学习目标：
- 学习进度：80/501
学习内容：
-
页面布局的方式有哪些？
双飞翼、多栏、弹性、流式、瀑布流、响应式布局
双飞翼布局：经典三列布局，也叫做圣杯布局
多栏布局：
栏栅格系统：就是利用浮动实现的多栏布局，在bootstrap中用的非常多。
多列布局：栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块
弹性布局：Flexbox布局，即伸缩布局盒模型
流式布局不受窗口宽度影响，使用百分比宽度来限定布局元素
瀑布流布局是流式布局的一种，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动
响应式布局就是一个网站能够兼容多个终端的布局 -
overflow:hidden是否形成新的块级格式化上下文?
会形成。
触发BFC(块级格式化上下文)的条件：
float不为none；
overflow值不为visible
display值为table-cell,table-caption,inline-block
position值不为relative和static -
谈谈http和https。
https的SSL加密是在传输层实现的。
(1)http和https的基本概念http: 超文本传输协议。
https: 简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。(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服务器通信时有以下几个步骤
客户使用https url访问服务器，则要求web 服务器建立ssl链接。
web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。
客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。
客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
web服务器通过自己的私钥解密出会话密钥。
web服务器通过会话密钥加密与客户端之间的通信。
(4)https协议的优点
使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。
谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。
(5)https协议的缺点
https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。
https缓存不如http高效，会增加数据开销。
SSL证书也需要钱，功能越强大的证书费用越高。
SSL证书需要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种消耗。
-
一句话概括tcp的三次握手。
客户端和服务端都需要确认各自可收发，因此需要三次握手 -
谈谈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是不可靠的。 -
Websocket的实现和应用。
WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。WebSocket是基于Http协议的。
-
谈谈HTTP请求的方式，HEAD方式。
GET： 请求指定的页面信息，并返回实体主体 。 确保成功检索的状态代码为 200
POST： 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体 .
HEAD 方式得到的信息和GET方式的响应头部信息一致。
HEAD 方式用来提前获知请求文件的大小，请求的文件是否可以访问，文件最后修改的时间。使用方法和GET方式一致 -
一个图片url访问后直接下载怎么实现？
使用HTML5提供的download。请求的返回头里面，用于浏览器解析的重要参数就是OSS的API文档里面的返回http头，决定用户下载行为的参数。
设置参数，下载的情况下：-
x-oss-object-type:Normal
-
x-oss-request-id:
598D5ED34F29D01FE2925F41 -
x-oss-storage-class:Standard
-
-
谈谈web Quality（无障碍）
能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。 -
说几个很实用的BOM属性对象方法。
Bom是浏览器对象。有哪些常用的Bom属性呢？
location对象：
location.href– 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign – 设置当前文档的URL
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() – 重载当前页面
(2)history对象
history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() – 后退一页
history.forward() – 前进一页
(3)Navigator对象
navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie
学习时间：
2021/1/15 19:20-20:00
花费时间：40min
寄语
坚持才可能进步
又是努力学习的一天，加油！
132万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
