【面试总结2】

1.从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的url交给DNS域名解析，找到真实的IP，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图像等）；

浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

载入解析到的资源文件，渲染页面，完成

2.如何进行网站性能优化

浏览器：
减少HTTP请求
使用HTTP2.0
设置浏览器缓存策略
白屏时间做加载动画
资源：
静态资源cdn
静态资源单独域名
gzip压缩
做服务端渲染（SSR）
将CSS放在文件头部，JavaScript文件放在底部
图片：
字体图标代替图片图标
精灵图
图片懒加载
图片预加载
使用png格式的图片
代码：
慎用全局变量
缓存全局变量
减少重绘回流
节流、防抖
少用闭包、减少内存泄漏
减少数据读取次数
文档碎片优化节点添加
减少判断层级
字面量与构造式
webpack
减小代码体积
按需加载
提取第三库代码
webpack dll优化
项目方案提议（额外）
长列表优化
web worker
避免 ifarme 嵌套网页

3.语义化的理解

html结构标签要有意义

对于编写代码的人来说，有语义化标签的HTM的结构，更加清晰，方便编写代码；对于团队来说，方便团队的开发与维护。

对于爬虫，有利于SEO。

对于浏览器更加方便解析。

最重要的是对于用户，
一是假如因为网速的原因导致没有加载CSS，页面也能呈现出良好的结构。
二是某些标签属性如alt，title能带来良好的用户体验，还有用好label标签更利于用户交互；
三是在特殊终端如视障阅读器中语义化的 HTML 可以呈现良好的结构。

4.HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制。通过这个文件上的解析清单存储离线资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会在页面上展示离线存储中的数据。

如何使用：
页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源
在离线状态时，操作window.applicationCache进行需求实现

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/offline.html

5.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问 app，那么浏览器救护根据manifest文件的内容下载相应的资源并且进行离线存储，如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源

6.iframe有那些缺点？

1.创建比一般的DOM元素慢了1-2个数量级
2.阻塞页面加载。及时触发window的onload事件是非常重要的，如果加载延迟，就会给用户网页很慢的感觉，而window的onload事件需要在所有的iframe加载完毕后才会出发。
3.唯一的连接池
4.不利于SEO，搜索引擎的检索程序无法解读iframe。

7.WEB标准以及W3C标准是什么?

web标准：将结构、表现、行为分离，使其更具有模块化。

w3c标准：标签字母要小写，双标签要闭合，标签不允许随意嵌套。
　　　　尽量使用外部样式和外链js，使结构、表现、行为分为三块，这样可以提高页面渲染速度。
　　　　样式尽量少用行内样式，id和class名要做到见名知意。
　　　　不需要变动页面内容，便可提供打印版本，不需要提供复制内容，提高网站易用性。

8.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

!DOCTYPE声明位于文档中的最前面，处于标签之前，告知浏览器的解析，用什么文档类型规范也解析这个文档；

严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行；

在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防站点无法工作 DOCTYPE 不存在或者格式不正确会导致文档以混杂模式呈现

9.HTML全局属性(global attribute)有哪些

class：为元素设置类标识；

data-*：为元素增加自定义属性；

draggable：设置元素是都可拖拽；

id：元素id，文档内唯一；

lang：元素内容的语言；

style：行内css样式；

title：元素相关的建议信息

10.Canvas和SVG有什么区别？

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改，canvas输出的是一整幅画布；

svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿，而canvas输出标量画布，就像一张图片一样，方法会失真或者锯齿# 11.如何在页面上实现一个圆形的可点击区域？
使用svg

border-radius

纯js实现：获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在园内；
两点之间距离计算公式：|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2))
Math.abs()求绝对值，Math.pow（底数，指数），Math.sqrt()求平方根

12.网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序，可以防止恶意破解密码、刷票、论坛灌水；

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试

13.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookies

由于 HTTP 是无状态的协议，不能保存每一次请求的状态，所以需要给客户端增加 Cookie 来保存客 户端的状态。 Cookie 的作用主要用于 用户识别 和 状态管理 。（比如网页常见的记住密码）
在 Cookie 传输和管理的时候，要确保 Cookie 的安全性，不被窃取。
仅在 HTTPS 安全通信时才会发送 Cookie 。
使用 Cookie 不能被 Javascript 脚本访问（防止跨站脚本攻击 XSS 对 Cookie 信 息的窃取）。
防止跨站伪造 CORF 的攻击
Strict ：浏览器完全禁止第三方请求携带 Cookie。
Lax ：只能在 get 方法提交表单 情况或者 a 标签发送 get 请求 的情况下可以携带 Cookie。
None ：默认，请求会自动携带上 Cookie。

localStorage:

生命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。如果 想设置失效时间，需自行封装。

sessionStorage

关闭浏览器或者页面，sessionStorage 就会失效；
页面刷新不会消除数据；
只有在当前页面打开的链接，才可以访sessionStorage的数据，使用window.open打开页面和改变localtion.href方式都可以获 取到sessionStorage内部的数据;

14. CSS选择器有哪些？哪些属性可以继承？

1.id选择器（#id）

2.类选择器（.class）

3.标签选择器（div，h1，p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[title]）

9.伪类选择器（a:hover，li:nth-child）

可以继承的有：

1.字体系列属性 font，font-family，font-weight，font-size，font-style，font-variant，font-stretch，font-size-adjust

2.文本系列属性 text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，direction，color

3.元素可见性 visibility

4.表格布局属性 caption-side，border-collapse，border-spacing，empty-cells，table-layout

5.列表布局属性 list-style-type，list-style-image，list-style-position，list-style

6.生成内容属性 quotes

7.光标属性 cursor

8.页面样式属性 page，page-break-inside，windows，orphans

9.声音样式属性 speak，speak-punctuation，speak-numeral，speak-header，speech-rate，volume，voice-family，pitch，pitch-range，stress，richness，azimuth，elevation

15.CSS优先级算法如何计算？

1.优先级就近原则，同权重情况下样式定义最近者为准；
2.载入样式以最后载入的定位为准；
3.!important > id > class > tag；
4.important 比 内联优先级高，但内联比id要高；

16.CSS3有哪些新特性？

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

17.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

justify-content：
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：两个项目两侧间隔相等

flex-direction
row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

flex-wrap
nowrap（默认值）：不换行
wrap：换行，第一行在下方
wrap-reverse：换行，第一行在上方

align-content
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴

**
align-items
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
**

18.用纯CSS创建一个三角形的原理是什么？

利用盒子的均分原理，盒子都是矩形或者正方形，从形状的中心，向4个上下左右划分4个部分。
保证元素是块级元素，设置元素的边框，不需要显示的边框使用透明色transparent。

第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色

第一种写法：
.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border:6px solid transparent;  
     border-top: 6px solid red;  
 }  
第二种写法：
.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border-width:6px;
     border-color:red transparent transparent transparent;
     border-style:solid dashed dashed dashed;//为了兼容IE6，把没有的边框都设置为虚线
 }

19.常见的兼容性问题？

第一类：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）
解决方案：给float标签添加display：inline，将其转换为行内元素
第二类：表单元素行高不一致
解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）
第三类：设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度；
解决方案：给容器添加overflow：hidden；
第四类：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；
解决方案：给img添加border：0；或者是border：none；
第五类：min-height在IE6下不兼容
解决方案：
1）min-height：value；
_height：value；
2）min-height：value；
height：auto！important；
height：value；
第六类：图片默认有间隙
解决方案：
1）给img标签添加左浮动float：left；
2）给img标签添加display：block；
第七类：按钮默认大小不一
解决方案：
1）用a标签来模拟按钮，添加样式；
2）如果按钮是一张背景图片，那么直接给按钮添加背景图；
第八类：百分比的bug
解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%
解决方案：给右边浮动的子元素添加clear：right；
第九类：鼠标指针bug
描述：cursor：hand；只有ie浏览器识别，其他浏览器不识别
解决方案：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；
第十类：透明度属性
解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）
兼容其他浏览器：opacity：value；（取值范围0–1）
第十一类：上下margin的重叠问题
描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；
解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

20.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化往往会出现浏览器之间的页面显示差异。
初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法：{padding:0;margin:0;}（强烈不建议）
原因：因为需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。
建议使用：

html,body{padding:0;margin:0;}

我们要知道设置初始化的目的，并不是去除边框，只是为了统一所有的浏览器，正常化。