【无标题】

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

不同的浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种：
第一种：渲染引擎
第二种：js引擎
所以浏览器主要兼容性问题我一般分为两大部分：css兼容、js兼容

1、不同浏览器的标签默认margin 和 padding 不同

问题说明：随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding 差异较大。
解决方案： CSS: *{margin: 0;padding:0;} 

2.图片加a标签在IE9中会有边框

解决方案：img{border: none;}

3.IE6及更低版本浮动元素，浮动边双倍边距

解决方案：不使用margin，使用padding

4、IE6及更低版本中，部分块元素拥有默认高度

解决方案：给元素设置font-size: 0;

5、a标签蓝色边框

解决方案：a{outline: none;}

6、IE6/7图片下面有空隙的问题

解决方案：img{display: block;}

22.垂直上下居中的方法

• 设定行高（line-height）
• 使用inline-block元素和vertical-align特性实现垂直居中
• calc动态计算
• transform
• 绝对定位
• 使用Flexbox

设定行高（line-height）：若将line-height设成和高度一样的数值，则内容的行内元素就会被垂直居中

inline-block元素和vertical-align特性实现垂直居中：

vertical-align：用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

.box{
  text-align: center;
  letter-spacing: -.3em;
}
.box::before{
  content: '';
  height: 100%;
  width: 1px;
  margin-right: -1px;
  display:inline-block;
  vertical-align: middle;
}
.content{
  display:inline-block;
  vertical-align: middle;
  letter-spacing: normal;
}

calc动态计算：我们只要让要居中的div的top属性，与上方的距离是“50%的外框高度+ 50%的div高度”，就可以做到垂直居中，至于为什么不用margin-top，因为margin相对的是水平宽度，必须要用top才会正确。

transform：transform是CSS3的新属性，主要掌管元素的变形、旋转和位移，利用transform里头的translateY（改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准），搭配元素本身的top属性，就可以做出垂直居中的效果，比较需要注意的地方是，子元素必须要加上position:relative，不然就会没有效果

绝对定位：绝对定位就是CSS里头的position:absolute，利用绝对位置来指定，但垂直居中的做法又和我们正统的绝对位置不太相同，是要将上下左右的数值都设为0，再搭配一个margin:auto

使用Flexbox：使用align-items或align-content的属性，实现居中效果

23.响应式布局原理

• 响应式：只需要开发一套代码，响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容
• 自适应：需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

什么是响应式布局？

可以自动识别屏幕宽度，并做出相应调整的网页设计，布局和展示的内容可能会有所改变

1、媒体查询

css3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面

2、百分比布局
通过百分比单位，可以使得浏览器中组件的宽高随浏览器的高度的变化而变化，从而实现响应式的效果，Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，css3支持最大和最小高，可以将百分比和max(min)一起结合使用定义元素在不同设备下的宽高

3.rem响应式布局

js获取真实屏幕的宽度，让其除以设计稿的高度，算出比例，把之前的基准值按照比例重新设定，这样项目就可以在移动端自适应了

4.vh/vw布局

css3中引入一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度，除了vw和vh外，还有vmax和vmin两个相关的单位

25.清除浮动的方法

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3.使用after伪元素清除浮动（推荐使用）

4.使用before和after双伪元素清除浮动

26.http协议和tcp协议

TCP协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。

TCP/IP和HTTP协议的关系，从本质上来说，二者没有可比性，我们在传输数据时，可以只使用（传输层）TCP/IP协议，但是那样的话，如果没有应用层，便无法识别数据内容，如果想要使传输的数据有意义，则必须使用到应用层协议，应用层协议有很多，比如HTTP、FTP、TELNET 等，也可以自己定义应用层协议。WEB使用HTTP协议作应用层协议，以封装HTTP 文本信息，然后使用TCP/IP做传输层协议将它发到网络上。

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

1. DNS缓存：短时间内多次访问某个网站，在限定时间内，不用多次访问DNS服务器。
2. CDN缓存：内容分发网络（人们可以在就近的代售点取火车票了，不用非得到火车站去排队）
3. 浏览器缓存：浏览器在用户磁盘上，对最新请求过的文档进行了存储。
4. 服务器缓存：将需要频繁访问的Web页面和对象保存在离用户更近的系统中，当再次访问这些对象的时候加快了速度

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

● 文件压缩：目的是直接减少文件体积，减少文件加载时间

● 缓存的使用（并且多个域名来提供缓存），可以减少Ajax服务器请求的次数，加快加载速度。

● 服务端开启GZIP ，对用户请求的页面进行压缩处理，以达到节省网络带宽，提高浏览网站速度的作用

● 书写代码注意优化：css将可以合并的样式合并起来，优化图片，在不失真的情况下尽量减少图片使用iconfont等

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

web标准主要强调的是一个网站的结构,样式,行为。这三者在网站进行编写的时候应该尽量做的分离，从而达到结构清晰，易于阅读，易于维护的目的

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1）标签字母要小写

2）标签要闭合

3）标签不允许随意嵌套

2.对于css和js来说

1）尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版 

30.Http和https的区别

http:

HTTP协议也就是超文本传输协议，是一种使用明文数据传输的网络协议。HTTP协议被用于在Web浏览器和网站服务器之间传递信息，以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。

https:

为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全

区别：

 1>.安全性的问题：相比来说https更加安全。

2>.默认端口不同，http使用的是80端口，https使用的是443端口

3>.对搜索排名的提升:HTTPS网站将会作为搜索排名的一个重要权重指标。也就是说HTTPS网站比起HTTP网站在搜索排名中更有优势。

31.data-属性的作用

HTML5规范里增加了一个自定义data属性.

data-* 属性用于存储页面或应用程序的私有自定义数据。

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

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

chrome浏览器限制了文字的大小，最小只能是12px，以前可以使用Chrome的CSS私有属性-webkit-text-size-adjust:none; （只对英文才有效，对中文无效。）来取消Chrome的字体限制。但是，在chrome更新到27版本之后就删除了这个属性。

一：更改谷歌浏览器的基础设定12px值，用来解决开发人员的调试问题

二：

使用缩放transform:scale()，使用较为广泛

优点：单行、多行文本都可使用
缺点：只是视觉效果变小，并不会改变盒子的实际占位，在对齐其他盒子时不太友好

三：使用SVG 矢量图设置text
优点： 1px-12px任意字号均可设置，可对设计界面进行对齐调整
缺点：不支持多行文本

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

引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。

1：改变窗口大小

2：font-size大小改变

3：增加或者删除样式表

4：内容的变化

5：激活css伪类，例如 ：hover

6:操作class属性，新增或者是减少

7：js操作dom

8:offset相关计算属性

9：设置style的值

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

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性

LESS是受Sass启发而开发的工具

那为什么有了sass还要开发less？

原因就是：首先是语法。Sass的一个关键特性是缩进式的语法，这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。

LESS给CSS带来了很多特性，使得LESS能够和CSS无缝地紧密结合在一起。因此，你可以平滑地由CSS迁移到LESS

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

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

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

Virtual DOM是指一个抽象的DOM树，在React、Vue等一些前端框架中被用于提高应用程序性能的技术。

为什么要使用虚拟dom?

　1.减少实际DOM的操作

　　直接操作实际DOM的代价很高，因为DOM操作需要浏览器重新计算布局和绘制。通过使用Virtual DOM，React可以减少实际DOM的操作次数，从而提高应用程序的性能。

　　2.提高渲染速度

　　React使用Virtual DOM来比较前后两个状态之间的差异，并且只更新需要更新的部分。这意味着React不需要重新渲染整个页面，而只需要重新渲染变化的部分，从而提高渲染速度。

　　3.更好的跨平台兼容性

　　Virtual DOM可以用于任何JavaScript运行环境，包括Web浏览器、Node.js等。这使得React可以更容易地在不同的平台上进行开发和部署，从而提高了跨平台兼容性。

　　4.更容易进行测试

　　使用Virtual DOM可以使React组件更容易进行单元测试。因为组件的渲染逻辑与实际DOM无关，所以可以在不需要浏览器环境的情况下进行测试。 

37.伪元素和伪类的区别

1.伪类是通过在元素选择器上加入伪类改变元素状态。

2.伪元素通过对元素的操作进行对元素的改变。

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

HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD 方法。

HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

1. GET
2. POST
3. HEAD
4. PUT
5. DELETE
6. OPTIONS
7. TRACE
8. CONNECT

39.前端需要注意哪些SEO

什么是SEO？

SEO是由英文Search Engine Optimization缩写而来，中文意思是“搜索引擎的优化”。

1、合理的title、description、keywords:搜索引擎对于三项的权重逐个减小，

2.重要的内容一定不要使用js输出：爬虫不会执行js获取内容；

3.语义化HTML代码，符合W3C标准规范，可以让搜索引擎更加容易理解网页；

4.语义化HTML代码，符合W3C标准规范，可以让搜索引擎更加容易理解网页；

40.的title和alt有什么区别

1. 两个属性都是当鼠标滑动到元素上的时候显示；

2. alt 是 img 的特有属性，是图片内容的等价描述，图片无法正常显示时候的替代文字；

3. title 属性可以用在除了base、basefont、head、html、meta、param、script 和 title 之外的所有标签，是对dom元素的一种类似注释说明；