IMWeb前端提升营七天学习总结

写在前面

5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。

现将总结如下：（本文长度略长，看官保持耐心，嘿嘿）

早报前端面试题

每天早上，助教老师会发一些经典前端面试题，归档一下：

05/24

问题1: CSS引入的方式有哪些?

答案:

CSS与HTML文档结合的4中方法：

　　1、使用<link>元素链接到外部的样式文件

　　2、在<head>元素中使用"style"元素来指定

　　3、使用CSS "@import"标记来导入样式表单

　　4、在<body>内部的元素中使用"style"属性来定义样式

问题2: 行内元素有哪些？块级元素有哪些？CSS的盒模型？

答案: 块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

Css盒模型:内容，border ,margin，padding

问题3: link和@import的区别是?

答案: 本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。

　　1、老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

　　2、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。

　　3、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

　　4、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

问题4： ==和===的不同

答案： 前者会自动转换类型，后者不会

前端常见题目个人思考题：

1、你之前自认为做得最好的，最具有挑战的一项需求是什么，为什么？现在回头去看，还有哪些地方可以值得优化？

 2、说一下h5中的离线存储有哪些

05/25

问题1: XHTML和HTML有什么区别?

答案:

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

问题2: Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

答案: 用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

问题3: 写出几种IE6 BUG的解决方法

答案:

1.双边距BUG float引起的 使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

4.Ie z-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 ！Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

问题4： IE和DOM事件流的区别

答案：

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

前端常见题目个人思考题：

1、谈一谈你做过的一个项目，业务逻辑模块如何划分的？

2、什么是xss漏洞，怎么防御？

05/26

问题1: 优先级算法如何计算？

答案:

重要性和来源的优先级排序从低到高是：

   1、浏览器默认样式

   2、用户在浏览器中定义的普通样式（normal规则，不带important规则）

   3、开发人员定义的普通样式（ normal规则，不带important规则）

   4、开发人员定义特殊样式（带important规则）

   5、用户在浏览器中定义特殊样式（带important规则）

另外还有一些原则：

   1、相同的样式在CSS规则后添加了!important的优先于没有添加的。

   2、CSS规则在文档中出现的顺序后面定义的的优先于前面定义的。

   3、加了!important的优先于内联样式。

   4、内联样式优先于用link引入的样式和页面上<style>里的样式。

问题2: split() join() 的区别?

答案: 前者是切割成数组的形式，后者是将数组转换成字符串

问题3: ajax请求的时候get 和post方式的区别?

答案:

1、一个在url后面 一个放在虚拟载体里面

2、有大小限制

3、安全问题

4、应用不同 一个是论坛等只需要请求的，一个是类似修改密码的

问题4： IE和标准下有哪些兼容性的写法？

答案：

1、Var ev = ev || window.event

2、document.documentElement.clientWidth || document.body.clientWidth

3、Var target = ev.srcElement||ev.target

前端常见题目个人思考题：

1、 说一下你理解的MVVM，画一下你的设计模式。

2、 说一下h5中的离线存储有哪些?

05/27

问题1: 清除浮动的几种方式，各自的优缺点

答案:

1. 使用空标签清除浮动 clear:both（理论上能清楚任何标签，增加无意义的标签）

2. 使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

3. 是用afert伪元素清除浮动(用于非IE浏览器)

问题2: call和apply的区别

答案: Object.call(this,obj1,obj2,obj3)

         Object.apply(this,arguments)

问题3: <img>标签上title与alt属性的区别是什么？

答案:

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

问题4：什么是语义化的HTML？

答案：直观的认识标签 对于搜索引擎的抓取有好处

前端常见题目个人思考题：

1、 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

2、 描述下“reset”CSS文件的作用和使用它的好处。

05/28

问题1: Ajax的优缺点都有什么？

答案：

1）页面无刷新，用户体验非常好。

2）使用异步方式与服务器通信，具有更加迅速的响应能力。

3）可以把一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。

4）基于标准化并被广泛支持的技术，不需要下载插件或者小程序。

Ajax的缺点:

1）Ajax不支持浏览器back按钮。

2）安全问题， Ajax暴露了与服务器交互的细节。

3）对搜索引擎的支持比较弱。

4）破坏了程序的异常机制。

5）不容易调试。

问题2: 简述一下Ajax的工作原理

答案: Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

问题3: CSS+DIV开发Web页面的优势有哪些？

答案:

1）CSS+DIV，这个网页设计模式中，DIV承担了网页的内容，CSS承担了网页的样式。这样就使网页的内容和样式的分离开来。有利于页面的维护升级。

2）有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在TABLE中一层层的查找）

3）有助于页面的重构(换皮肤如blog，直接套用另外一套样式就可以实现，而不用改动网页脚本。)

问题4：简述DIV元素和SPAN元素的区别

答案：DIV默认情况下是分行显示，SPAN在同行显示。

前端常见题目个人思考题：

1、前端安全方面有没有了解？CSRF如何攻防？

2、 说说你对SVG理解?

05/29

问题1: 简单说一下浏览器本地存储是怎样的

    答案：在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

    html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

    sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

    而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

问题2: 在JavaScript脚本中，isNaN的作用是什么？

答案: isNaN的作用是判断值是否为数字

问题3: 编写JavaScript脚本生成1-6之间的整数？

答案:

var NowFrame;

NowFrame=Math.random( )*6+1 //随机生成一个1-6之间的小数

NowFrame=parseInt(NowFrame) //把1-6之间的小数转化为整数

问题4： CSS规范中，.（句点）后面跟一个名称代表什么含义？#（井号）后面跟一个名称代表什么含义？如果要对一个元素设置CSS样式（内嵌样式），应将CSS样式写在它的什么属性内？

答案：

1） .（句号）后面跟一个名称表示文档中所有class属性值包含这个名称的应用其样式，

2） #（井号）后面跟个名称表示文档中ID为此名称的元素应用其样式。

3） CSS样式写在style属性内。

前端常见题目个人思考题：

1、请你谈谈Cookie的弊端 。

2、对BFC规范的理解？

05/30

问题1: display:none和visibility:hidden的区别

    答案：

    display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

    visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

问题2: position的absolute与fixed共同点与不同点

答案:

    A：共同点：

    1.改变行内元素的呈现方式，display被置为block；

    2.让元素脱离普通流，不占据空间；

    3.默认会覆盖到非定位元素上

    B不同点：

    absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

    当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

问题3: CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

答案:

    CSS 选择符：

    1.id选择器(# myid)

    2.类选择器(.myclassname)

    3.标签选择器(div, h1, p)

    4.相邻选择器(h1 + p)

    5.子选择器(ul > li)

    6.后代选择器(li a)

    7.通配符选择器( * )

    8.属性选择器(a[rel = "external"])

    9.伪类选择器(a: hover, li:nth-child)

    可继承的样式：

    1.font-size

    2.font-family

    3.color

    4.text-indent

    不可继承的样式：

    1.border

    2.padding

    3.margin

    4.width

    5.height

    优先级算法：

    1.优先级就近原则，同权重情况下样式定义最近者为准;

    2.载入样式以最后载入的定位为准;

    3.!important>  id > class > tag

    4.important 比 内联优先级高，但内联比 id 要高

    CSS3新增伪类举例：

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    p:only-child   选择属于其父元素的唯一子元素的每个<p> 元素。

    p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

    :enabled:disabled 控制表单控件的禁用状态。

    :checked       单选框或复选框被选中。

问题4：你知道多少种Doctype文档类型？

答案：

    1. 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

    2. HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

    3. XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

    4. Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

前端常见题目个人思考题：

1、请说出三种减少页面加载时间的方法

2、哪些操作会造成内存泄漏？

剑指offer算法题

每天下午，组织一起刷题，刷题链接是https://www.nowcoder.com/ta/coding-interviews

若想看Java版本（混杂有JavaScript），移步于我的GitHub热情的看官一颗星星是给我最大的鼓励~

若想看JavaScript版本，移步于IMWeb社区