【前端面试题——网络协议】

1.尽可能多的写出浏览器兼容性问题

1.不同浏览器标签默认的外边距和内边距不同（这是最常见也是最容易解决的）。

问题状况：随便写几个标签，在不加样式控制的情况下，不同浏览器的margin和padding的差异较大。

解决方法：在css里使用：*{margin:0px; padding:0px}。

2.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。

问题状况：后面的块属性标签被顶到下一行。

解决方法：在float的标签样式中加入:display:inline;将其转化为行内属性。

3.设置较小高度标签（一般小于10px），在IE6、IE7，遨游中高度超出自己设置的高度。

问题状况：IE6、7和遨游里这个表情的高度不熟控制，超出自己设置的高度。

解决方法：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。

4.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug。

问题状况：IE6里间距比超过设置的间距。

解决方法：在display:block;后面加入display:inline;display:table;

5.图片默认有间距。

问题状况：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方法：使用float为img布局。

6.标签最低高度设置min-height步兼容。

问题状况：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被给浏览器兼容。

解决方法：如果我们要设置一个标签的最小高度为200px，需要进行的设置为：{min-height:200px; height:auto; !important; height:200px; overflow:visible;}。

7.透明度的兼容css设置。

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

2.垂直上下居中的方法

结构分布都如下：

<div class="outerBox">
        <div class="innerBox"></div>
 </div>

第一种：flex布局

 .outerBox1 {
    
    
            width: 400px;
            height: 400px;
            background-color: gray;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 .innerBox1 {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
        }

第二种：定义line-height
常用于垂直居中盒子的文字，需要知道盒子高度,line-height就是盒子本身高度

.outerBox2 {
    
    
            width: 200px;
            height: 200px;
            background-color: green;
            line-height: 200px;
            text-align: center;
        }
 .innerBox2 {
    
    
            color: white;
        }

第三种：position + margin:auto
父容器相对定位，子容器绝对定位并且上下左右设置为0，margin设置为auto

.outerBox3 {
    
    
            width: 400px;
            height: 400px;
            background-color: gray;
            position: relative;
        }
.innerBox3 {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

第四种：position + margin负边距
父容器相对定位，子容器绝对定位，left为50%，top为50%，margin-left为子容器宽度的一半，margin-top为子容器高度的一半
（确定了当前div的宽度，margin值为当前div宽度一半的负值）

.outerBox4 {
    
    
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
.innerBox4 {
    
    
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

第五种：position + transform
父容器相对定位，子容器绝对定位，left为50%，top为50%，translate(-50%,-50%)
（不确定当前盒子的宽高，采用 transform: translate(-50%,-50%)）

.outerBox5 {
    
    
            width: 400px;
            height: 400px;
            background-color: gray;
            position: relative;
        }
.innerBox5 {
    
    
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

3.响应式布局原理

可以自动识别屏幕宽度，并做出相应调整的网页设计，布局和展示的内容可能会有所改变
只需要开发一套代码，响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容
点击查看详情

4.清除浮动的方法

使用额外的标签，书写方便，但结构差
父元素添加overflow：hidden，代码简洁，内容增多的时候容易造成高度塌陷，溢出隐藏
为父元素设置高度，简单有效，但需要手动添加高度，如果后面高度发生变化，还需再次修改，比较繁琐
使用after伪元素清楚浮动，符合闭合浮动，在一些浏览器上不支持使用after,，会触发hasLayout

5.http协议和tcp协议

HTTP协议规定了浏览器怎样向万维网服务请求万维网文档，以及服务器怎样把文档传送给浏览器。在服务器和浏览器之间的请求和响应的交互，必须按照规定的格式和遵循一定的规则。这些格式和规则就是超文本传送协议HTTP。
HTTP使用了面向连接的TCP作为运输层协议，保证了数据的可靠传输。HTTP不必考虑数据在传输过程中被丢弃后又怎样被重传。但是，HTTP协议本身是无连接的。也就是说，HTTP虽然使用了TCP连接，但通信的双方在交换HTTP报文之前不需要先建立HTTP连接。
HTTP协议是无状态的。也就是说，同一个客户第二次访问同一个服务器上的页面的时候，服务器的响应与第一次被访问的时候一样，但是服务器并不知道你曾经访问过这个页面，也不记得你曾经访问过多少次。HTTP的无状态特性简化了服务器的设计，使服务器更容易支持大量并发的HTTP请求。

tcp协议

TCP是面向连接的传输层协议。也就是说应用程序在使用TCP协议之前，必须先建立TCP连接
每一条TCP连接只能有两个端点，每一条TCP连接只能是点对点的（一对一）
TCP提供可靠交付的服务。通过TCP连接传送的数据，无差错、不丢失、不重复、并且按序到达
TCP提供全双工通信。TCP允许通信双方的应用进程在任何时候都能够返送数据。TCP连接的两端都设有发送缓存和接收缓存，用来临时存放双向通信的数据。
面向字节流。TCP中的流指的是流入到进程或者从进程流出的字节序列。

6.刷新页面，js请求一般会有哪些地方有缓存处理

DNS缓存，CDN缓存，浏览器缓存，服务器缓存

DNS缓存
DNS缓存指DNS返回了正确的IP之后，系统就会将这个结果临时储存起来。并且它会为缓存设定一个失效时间 (例如N小时)，在这N小时之内，当你再次访问这个网站时，系统就会直接从你电脑本地的DNS缓存中把结果交还给你，而不必再去询问DNS服务器，变相“加速”了网址的解析。当然，在超过N小时之后，系统会自动再次去询问DNS服务器获得新的结果。
所以，当你修改了 DNS 服务器，并且不希望电脑继续使用之前的DNS缓存时，就需要手动去清除本地的缓存了。
本地DNS迟迟不生效或者本地dns异常等问题，都会导致访问某些网站出现无法访问的情况，这个时候我们就需要手动清除本地dns缓存
CDN缓存
和Http类似，客户端请求数据时，先从本地缓存查找，如果被请求数据没有过期，拿过来用，如果过期，就向CDN边缘节点发起请求。CDN便会检测被请求的数据是否过期，如果没有过期，就返回数据给客户端，如果过期，CDN再向源站发送请求获取新数据。
CDN边缘节点缓存机制，一般都遵守http标准协议，通过http响应头中的Cache-Control和max-age的字段来设置CDN边缘节点的数据缓存时间。
浏览器缓存
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
浏览器缓存主要有两类：缓存协商：Last-modified ，Etag 和彻底缓存：cache-control，Expires。浏览器都有对应清除缓存的方法。
服务器缓存
服务器缓存有助于优化性能和节省宽带，它将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度。

7.如何对网站的文件和资源进行优化

文件合并（目的是减少http请求）：使用css sprites合并图片，一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片，可以通过相关工具在线合并，也可以在ps中合并。
使用CDN（内容分发网络）加速，降低通信距离。
缓存的使用，添加Expire/Cache-Control头。
启用Gzip压缩文件
将css放在页面最上面。
将script放在页面最下面。
避免在css中使用表达式。
将css, js都放在外部文件中。
减少DNS查询。
文件压缩：最小化css, js，减小文件体积。
避免重定向。
移除重复脚本。
配置实体标签ETag。
使用AJAX缓存，让网站内容分批加载，局部更新。

8.你对网页标准和W3C重要性的理解

WEB标准：简单来说就是将页面的结构、表现和行为各自独立实现，尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
W3C：指万维网联盟（World Wide Web Consortium），最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
使用外链css和js脚本、
结构行为表现的分离、文件下载与页面速度更快、
内容能被更多的用户所访问、
内容能被更广泛的设备所访问、
更少的代码和组件，容易维护、改版方便，不需要变动页面内容、
提供打印版本而不需要复制内容、
提高网站易用性。

9.Http和https的区别

HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)
HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

10.data-属性的作用

data-*属性用于存储页面或应用程序的私有自定义数据。
data-属性可以让我们在所有html元素上增加自定义data属性，存储的data属性能被JavaScript调用。
data-属性不应该包含任何大写字母，并且在data-后必须最少拥有一个字符，属性值可以是任意字符串。

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

zoom可以改变页面上元素的尺寸，属于真实尺寸
-webkit-transform:scale()只对可以定义宽高的元素生效，如果是行内元素的话，应该先转为行内块元素。
-webkit-text-size-adjust:none
用于设定文字大小是否根据设备来自动调整显示大小：
percentage：字体显示的大小；
auto：默认，字体大小会根据设备/浏览器来自动调整；
none：字体大小不会自动调整

12.哪些操作会引起页面回流（Reflow）

13.CSS预处理器的比较less sass

相同之处：

1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

不同之处：

14.如何实现页面每次打开时清除本页缓存

1 .用HTML标签设置HTTP头信息

<HEAD>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>

在需要打开的url后面增加一个随机的参数

url=test/test.jsp?ranparam=random()

15.什么是Virtual DOM,为何要用Virtual DOM

为什么用 Virtual Dom
用 JS 模拟 DOM 结构，提高重绘性能。
因为DOM操作是非常昂贵的，看似更复杂JS的virtual dom实则效率更高。

VDOM 采用 Diff 算法
用 JavaScript 对象结构表示 DOM 树的结构{tag, attrs, children}；
用这个树构建一个真正的 DOM 树，插到文档当中当状态变更时，重新构造一棵新的对象树。
用新的树和旧的树进行比较两个树的差异。
把差异更新到久的树上，整个视图就更新了。
Virtual DOM 本质就是在 JS 和 DOM 之间做了一个缓存。既然已经知道 DOM 慢，就在 JS 和 DOM 之间加个缓存。JS 先操作 Virtual DOM对比排序/变更，最后再把整个变更写入真实 DOM。

16.伪元素和伪类的区别

伪类 :
为了获取不存在与DOM树中的信息获及取不能被常规CSS选择器获取的信息，如:hover, :focus, :link

伪元素 :
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的。
如 ::before , ::after, ::first-line

区别
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；
可以同时使用多个伪类，而只能同时使用一个伪元素；

17.http的几种请求方法和区别

GET 方法
发送一个请求来取得服务器上的某一资源。
POST 方法
向URL指定的资源提交数据或附加新的数据。
PUT 方法
跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同，PUT指定了资源在服务器上的位置，而POST没有。
HEAD 方法
只请求页面的首部。
DELETE 方法
删除服务器上的某资源。
PATCH 方法
是对 PUT 方法的补充，用来对已知资源进行局部更新。

7 .OPTIONS 方法
它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息。

TRACE 方法
回显服务器收到的请求给客户端，主要用于测试或诊断。
CONNECT 方法
HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。

GET和POST方法的区别
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求在URL中传送的参数是有长度限制的，而POST没有。但是GET这个长度的限制不是HTTP协议限制的，是各个浏览器限制的。
因为GET方法是通过URL传递参数对，所以如果参数里面有一些特殊字符，比如 + 号，浏览器会对 + 号进行编码，可能会造成后台报错。而POST就不会有这种现象。如果使用GET时，参数中有特殊字符，可以先对参数编码，然后进行传输。
同源时候，GET请求里面会带 Origin 字段，而POST不会。这个可能造成安全检查对错误，如果有 nginx服务器，可再nginx服务器上设置。
GET方法一般设置Content-type为application/x-www-form-urlencoded，POST方法一般设置Content-type为text/plain;charset=utf-8，对于POST请求，服务器后台以流对方式接收。

18.前端需要注意哪些SEO

SEO
SEO（Search Engine Optimization）搜索引擎优化。
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。

SEO原理
页面抓取：蜘蛛向服务器请求页面，获取页面内容
分析入库：对获取到的内容进行分析，对优质页面进行收录
检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果
SEO优化
对网站的标题、关键字、描述精心设置
网站内容优化：内容与关键字的对应，增加关键字的密度
重要内容HTML代码放在最前
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
友情链接
img非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标
语义化的HTML代码
生成针对搜索引擎友好的网站地图（包含了所有网站链接的文件，这些链接是这个网站中重要的页面，作用是让更多页面能最大化被搜索蜘蛛发现并收录）

19.html的title和alt有什么区别

alt属性是用于img标签的，当图片不显示的时候会出现alt属性里面的内容，当图片显示的时候不会显示alt中的内容
title属性可以用在除了html，head，script，meta，title，param，base，basefont之外的所有标签。