前端资料汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
前端页面有哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
- 1、网页的结构层（structurallayer）由HTML 或XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
- 2、网页的表示层（presentationlayer）由CSS 负责创建。CSS对"如何显示有关内容"的问题做出了回答。
- 3、网页的行为层（behaviorlayer）负责回答"内容应该如何对事件做出反应"这一问题。这是Javascript 语言和DOM 主宰的领域。
html中form里action方法的get和post有什么区别？
- 1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
- 2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用"?“连接，而各个变量之间使用”&"连接。Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
- 3、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。
- 4、Get传输的数据量小，这主要是因为受URL长度限制。而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。
- 5、Get限制Form表单的数据集的值必须为ASCII字符。而Post支持整个ISO10646字符集。
- 6、Get是Form的默认方法。
html元素的id跟class什么区别
id和class是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时，二者都可用，但有区别？
- 1、在css样式表中书写时，id选择符前缀应加"#“，class选择符前缀应加”."
- 2、id属性在一个页面中书写时只能使用一次，而class可以反复使用
- 3、id作为元素标签用于区分不同结构和内容，而class作为一个样式，可以应用到任何结构和内容当中去
- 4、布局上的一般原则：id先确定结构和内容再为它定义样式。而class正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上
- 5、目前浏览器都允许同一个页面出现多个相同属性值的id，一般情况能正常显示，不过当javascript通过id来控制元素时就会出错
- 6、在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式。
Ajax是什么？
Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括：
- 1、XHTML和CSS
- 2、使用文档对象模型(Document Object Model)作动态显示和交互
- 3、使用XML和XSLT做数据交互和操作
- 4、使用XMLHttpRequest进行异步数据接收
- 5、使用JavaScript将它们绑定在一起
你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
- 1、DOCTYPE 影响 CSS 处理
- 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width
- 3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式
- 4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
- 5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px, 解决方法： div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。
html5 离线存储
Html5的一个重要特性就是离线存储，所谓的离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作。
Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的，使用如 <html manifest='offline.manifest'> 来引入一个manifest文件，这个文件的路径可以是相对的，也可以是绝对的，如果你的web应用很多，而且希望能集中管理manifest文件，那么静态文件服务器是个不错的选择。
iframe的优缺点？
1、缺点：
在网页中使用框架结构最大的弊病是搜索引擎的"蜘蛛"程序无法解读这种页面。当"蜘蛛"程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链 接，因此它们会以为该网站是个死站点，并且很快转身离去。对一个网站来说这无异于一场灾难。如果你想销售产品，你需要客户;如想得到客户，你首先要让人们 访问你的网站，而要做到这一点，你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店，却又故意不让搜索引擎检索你，这就好象开 家零售商店，却将窗户全部漆成黑色，而且还不挂任何招牌一样。
2、优点：
从上文中我们可以发现，使用ifame框架的弊端是无法被搜索引擎所爬行抓取。但凡事总是具有两面性。它的这个缺点也可能是他的优点。利用这一点那我 们就可以把我们站点上一些需要给我们的用户查看，但是不需要搜索引擎爬行的内容用ifame框架进行显示，这样就可以让ifram发挥真正的效果了，而且 有我们站点中的代码也可以得到很大的精简，举一个例子，就如笔者上文提到的添加微博直播信息，这些微博信息我们并不需要提供给搜索引擎，而我们需要提供的 是与访客的一个互动的体验，如下图所示，而如果我们使用ifame框架嵌入微博的信息，不仅可以简便的添加站点的微博直播平台，同时我们看到代码也十分的 精简。
iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最套讨厌的.那么你的网站即使做的在好,也排不到好的名次!如 果是动态网页，用include还好点！但是必须要去除他 的
框架的优点
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
- 方便制作导航栏
框架的缺点
- 会产生很多页面，不容易管理
- 不容易打印
- 浏览器的后退按钮无效
- 代码复杂,无法被一些搜索引擎索引到
- 多数小型的移动设备（PDA 手机）无法完全显示框架
- 多框架的页面会增加服务器的http请求
- 由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃
提示: 目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了。
CSS盒模型原理
- 1、W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
- 2、IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
CSS display:none和visibility:hidden的区别
- visibility:hidden隐藏，但在浏览时保留位置
- display:none视为不存在，且不加载
jQuery是什么？
jQuery是javascript编写一个可重用的JavaScript库。
不使用jQuery设置UI文本的JavaScript代码如下：
document.getElementById("txt1").value = "hello";
用jQuery类库后的的JavaScript代码如下：
$("#txt1").val("Hello");
可见，在使用jQuery类库后的JavaScript代码明显简洁了很多，也更符合IT行业特点：短、平、快。
jquery与JavaScript的关系，jQuery会取代JavaScript吗？
- JavaScript：是一门Web最流行的脚本语言。
- jQuery: 是一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
jQuery是并不是要取代的JavaScript。使用jQuery使Web开发变得简单。
如何使用jQuery库？
从jquery.com下载的jquery.js文件（最新的jQuery版本V1.11.1或V2.1.1）。 jQuery的文件规则，如"jquery-1.4.1.j s"，其中1.4.1是JS文件的版本的版本号。
在开发Web程序前，需要包含的JavaScript，如图下面的代码：
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
CDN（内容分发网络）是什么？
在开发Web页面，考虑最多的问题之一是页面在客户端电脑的响应：时间越短，用户体验越好。
而制约用户体验的关键因素之一是浏览器下载Web文件大小，包括*.html、图片、*.js、*.css等文件。
为了最大化复用和节约带宽，故CDN应运而生：其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
如何使用jQuery CDN？
- （1）推荐使用官方的CDN节点，使用代码如下：
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- 2）还有Google提供的jQuery CDN：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- （3）同时微软也提供了jQuery CDN的节点：
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>
如何在CDN网络不可访问情况下，能自动访问网站的jQuery文件？
一般情况下，CDN网络节点是可靠的。但是偶尔也有失灵的时候，故为了提供双保险，可进行判断网络加载CDN失败，则自动加载网站上的jQuery, 示例代码如下：
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
同版本的jQuery.js文件和jQuery.min.js有何不同？
- 相同：这两个文件提供相同的jQuery的功能，即在函数调用上没有区别。
- 不同：jQuery.js文件，适合让程序员阅读。jQuery.min.js文件，通过压缩和删除所有的空格，以节省带宽和空间，使得文件更小，用于网络传输，不适合程序员阅读。
何时使用jquery.js，何时使用jquery.min.js？
- 开发调试场景下：用jQuery.js文件，因为你想调试，能够看到javascript代码。
- 生产部署环境下：用jQuery.min.js文件，可减少网络宽度，加快网页加载速度。
jQuery.vsdoc.js文件是什么?
*.vsdoc.js文件是用来在微软的开发环境Visual Studio下使用的，方便得获得jQuery的智能感知，当你输入jQuery函授后，会自动提示函数的类型、函数使用说明、函数参数等等。如果在VS下用jQuery开发Web程序，则vsdoc.js文件会大大的提高开发效率。
jQuery的基本语法如何解释？
jQuery的语法结构可以分为四部分：
- 1、默认情况下，所有Jquery的命令开始以一个"$"符号。
- 2、其次是HTML元素的选择。例如下面是我们通过ID"txt1"选择一个HTML文本框。
- 3、接着由点（.）分隔。这个操作者将分离的元素和该元素的动作(函数)。
- 4、最后什么样的函数(动作)。
在jQuery中，"$"符号代表什么？
在jQuery中，" " 符号是一个 j Q u e r y 的别名，默认的 j Q u e r y 类库以 "符号是一个jQuery的别名，默认的jQuery类库以 "符号是一个jQuery的别名，默认的jQuery类库以开头。
为何要使用jQuery.noConflict()？
有很多类似jQuery一样的类库，如MooTools, Backbone, Sammy, Cappuccino, Knockout 。这些类库中，有的也使用了$符号，如果同时使用，则会导致命名冲突。
总结
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
2582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
