1 从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的
URL交给DNS域名解析,找到真实的IP,向服务器发起请求服务器交给后台处理完成后响应数据回浏览器解析并渲染到页面
2 css文本超出省略号显示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;3 HTTP状态码及其含义
100 信息状态码
200 成功状态码
301 永久重定向
302 临时重定向
403 拒绝访问
404 找不到资源
500 服务器错误
4 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存存储大小：
cookie数据大小不能超过4ksessionStorage和localStorage可以达到5M或更大
有期时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据sessionStorage数据在当前浏览器窗口关闭后自动删除cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
5 WEB标准以及W3C标准是什么?
标签闭合、标签小写、不乱嵌套、使用外链
css和js、结构行为表现的分离
6 Doctype作用?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档
7 link与@import的区别
link是HTML方式，@import是CSS方式link可以通过rel="alternate stylesheet"指定候选样式浏览器对
link支持早于@import，可以使用@import对老浏览器隐藏样式@import必须在样式规则之前，可以在css文件中引用其他文件总体来说：
link优于@import
8 清除浮动的几种方式，各自的优缺点
父级
div定义height结尾处加空
div标签clear:both父级
div定义伪类:after和zoom父级
div定义overflow:hidden父级
div也浮动，需要定义宽度结尾处加
br标签clear:both比较好的是第3种方式，好多网站都这么用
9 display有哪些值？说明他们的作用
block转换成块状元素。inline转换成行内元素。none设置元素不可见。inline-block象行内元素一样显示，但其内容象块类型元素一样显示。list-item象块类型元素一样显示，并添加样式列表标记。table此元素会作为块级表格来显示inherit规定应该从父元素继承display属性的值
10 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
有两种，
IE盒子模型、W3C盒子模型；盒模型： 内容(content)、内边距(
padding)、外边距(margin)、 边框(border)；区 别：
IE的内容部分把 内边距 和 边框 计算了进去;当
box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型。
11 position的值， relative和absolute定位原点是
absolute：生成绝对定位的元素，脱离文档流,相对于static定位以外的第一个父元素进行定位relative：生成相对定位的元素，相对于其正常位置进行定位fixed：固定定位，脱离文档流,相对于浏览器窗口进行定位static默认值。没有定位，元素出现在正常的流中sticky粘性定位,相对定位+固定定位，可以实现导航栏固定定位效果inherit规定从父元素继承position属性的值
12 CSS不同选择器的权重(CSS层叠的规则)
权重相同情况下就近原则 优先级为:
!important >内联> id > 类> 标签;！important规则最重要，大于其它规则行内样式规则，加
1000对于选择器中给定的各个
ID属性值，加100对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加
10对于选择其中给定的各个元素标签选择器，加1
13 自适应布局
思路：
左侧浮动或者绝对定位，然后右侧
margin撑开使用
<div>包含，然后靠负margin形成bfc使用
flex
14 rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而
rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
15 水平居中的方法
元素为行内元素，设置父元素
text-align:center如果元素宽度固定，可以设置左右
margin为auto;使用
flex-box布局，指定justify-content属性为center如果元素为绝对定位，设置父元素
position为relative，元素设left:0;right:0;margin:auto;
16 垂直居中的方法
使用
flex布局，设置为align-item：center绝对定位中固定高度时设置
top:50%，margin-top值为高度一半的负值文本垂直居中设置
line-height为height值绝对定位中设置
bottom:0,top:0,并设置margin:auto
17 H5新增了什么标签,你对语义化编程怎么理解
article(文章区域)、header(头部区域)、footer(文章区域)、main(主题内容区域)、section(普通区域，用来做区域划分)、figure(配图区域)、figcaption(配图说明区域)、aside(与主体内容无关的区域，一般用来打广告)、nav(导航区域)
语义化编程好处
html语义化让页面的内容结构化，结构更清晰
容易阅读、便于对浏览器、搜度索引擎解析、有利于SEO
18 Http与Https的区别
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
http使用的端口是80, https是443。
https协议需要到CA 申请证书，一般免费证书较少，因而需要一定费用。(原来网易官网是http，而网易邮箱是https。)
19 什么是事件代理
事件代理（Event Delegation），又称之为事件委托
事件代理 就是把原本需要绑定的事件委托给父元素,让父元素去监听
好处是可以提高性能
20 什么是重绘（Repaint）和回流（Reflow）?
重绘:当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,不会影响页面布局,
比如color,backgroundColor
回流:比如我们增删一个dom节点,修改元素的宽高,页面布局都会发生改变,浏览器需要重新构造渲染树
总结:
重绘只是样式的变化，结构不会变化
回流往往伴随着布局的变化
回流一定会重绘,重绘不一定回流
21 网站性能优化
雅虎前端优化35条: www.cnblogs.com/xianyulaodi…
容量方面减少
HTTP请求：合并文件、使用CSS精灵图图片懒加载 节省移动端网络流量，在页面滚动时动态载入图片
`css方面使用iconfont字体图标代替图片图标 , iconfont体积较小，而且是矢量图，因此缩放时不会失真
使用
<link>不使用@import
Javascript方面将脚本放到页面底部 (
JS代码在加载完之后是立即执行的，且JS代码执行时会阻塞页面的渲染。)将
javascript和css从外部引入压缩
javascript和css
Server方面使用静态资源 CDN 来存储文件,加快用户的访问速度，减少数据中心的负载压力。
22 什么是XSS、CSRF、以及防范措施
XSS (跨站脚本攻击)，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，在用户的浏览器上运行。
解决办法:
在提交表单时，前端最好将文本内容转为html实体编码，也就是过滤掉<script>、<a>、这样的内容，然后再提交到后台去。
如果您是用的vue、react或node。
$ npm install xss --save
CSRF(跨站请求伪造)
一个典型的CSRF攻击流程大概如下:
用户登录
a.com并保留登录信息攻击者引诱用户访问了
b.comb.com在用户不知情的情况下向a.com发送请求并携带用户的登录信息a.com接收请求验证登录信息通过执行某些恶意操作攻击者在用户不知情的情况下冒充用户的身份完成了攻击.
4.1 验证码
4.3 添加 token 验证(token==令牌)
可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求
