面试前端实习生时被问到的问题

[sneezry]

因为面试的是实习生，所以被问的问题都是非常基础的，和大家简单分享一下。

1. 加速页面载入速度的方法都有哪些？

2. 你编写前端页面的过程是怎样的？

3. DOCTYPE是什么，有什么作用？

4. CSS hack你知道哪些？

5. CSS中position的属性有哪些，它们的区别是什么？

6. URI是什么？

7. GET请求和POST请求的区别是什么？

其他还有写开放的问题，比如用原生JS编写代码时你觉得有哪些需要注意的地方等等。

面试官人非常好，面试过程非常轻松:D

[lbp0200]

都不会

[suikator]

恭喜楼主

[XiLiGe]

都不会啊

[qgy18]

确实比较基础，不过能答好的学生并不太多。

[emric]

问的不错, 有基础都能答好, 覆盖了前端很多重要的点.

[learnshare]

覆盖面很广了，应该不算太难

[DiveIntoEyes]

面tx问的？

[publicID001]

1. 加速页面载入速度的方法都有哪些？
置后script，尽可能避免在DOMContentLoaded之前操作DOM
2. 你编写前端页面的过程是怎样的？
确认视觉元素 > 确认隐藏逻辑 > 构思layout
3. DOCTYPE是什么，有什么作用？
document type
4. CSS Hack你知道哪些？
IE 好久没折腾了
5. CSS中position的属性有哪些，它们的区别是什么？
每个属性的字面意思
6. URI是什么？
URL？
7. GET请求和POST请求的区别是什么？
想问 幕等性？

[lizheming]

ls 的回答槽点有点多=_=!

[lyragosa]

不是前端，试着不搜索答一下。
1
事件冒泡绑，减少循环中读写dom，script放末尾，lazy载入图片……
说几个应该就够了吧。
2
由于我不是前端所以我都是用bootstrap（捂脸）
3
区分文档类型和渲染模式。
4
我就知道*号和_号，但不清楚具体含义，应该是一个用来hack ie678一个用来hack ie67？
5
绝对定位独立于文档流，基于文档本身。
相对定位基于最近的带定位的父级dom。
fixed只在IE7（还是IE8？）以上生效，基于窗口。
还有个是啥一下想不起了……
6
好像是个统称，是URL的超集，比如邮件地址这种肯定不算URL，但是应该是算URI的。
大概就是一个能够唯一标识某个互联网资源的字串。
7
厄，一个在地址中能体现，另一个不能？

[otakustay]

第一题竟然问实习生……

[sumhat]

不是前端，尝试回答一下：

1. 加速页面载入速度的方法都有哪些？
减少新建连接的数量、让主要内容（网页文字、CSS）优先加载，而其它次要内容（JS、图片）延后。


2. 你编写前端页面的过程是怎样的？
Ctrl + C / Ctrl + V，233333

3. DOCTYPE是什么，有什么作用？
表明当前文档的类型和编码，让浏览器使用不同的模式加载

4. CSS hack你知道哪些？
完全不知道

5. CSS中position的属性有哪些，它们的区别是什么？
只知道 relative、fixed 和 absolute，实际含意不是特别清楚

6. URI是什么？
Universal Resource Identifier，理论上可以用来指代任何一件物品。

7. GET请求和POST请求的区别是什么？
Get 请求没有 request body，其它没有区别。

[banri]

1. 加速页面载入速度的方法都有哪些？
传输速度：图片有损压缩，减少HTTP请求树（如雪碧图，还有能用CSS实现的争取不用图片实现），外部资源不同域名（浏览器并发限制），资源的按需加载，使用web font等
渲染速度：减少DOM操作（比如生成一段完整的HTML再一次性插入等），script放入页面最后，使用CSS Comb（CSS书写顺序会影响渲染速度）

2. 你编写前端页面的过程是怎样的？
设计稿→切图→编写→测试→压缩→上线
这里应该可能考的是工具什么的，比如搭建本地服务器调试、使用了gulp等自动化工具
本人强行脑补提到Sass Coffee Gulp等会加分

3. DOCTYPE是什么，有什么作用？
粗俗的说就是文档类型，告诉浏览器用什么样的标准来解析
比如是HTML5 还是4 还是XTML1.0等

4. CSS hack你知道哪些？
/9
*zoom
其实这个我还真不太了解…………

5. CSS中position的属性有哪些，它们的区别是什么？
默认值static
继承值inherit，从父元素继承
absolute 不占据文档空间，以第一个非static祖先元素为坐标定位，接收top/right/bottom/left值，如果不传入则在默认位置。如果所有祖先元素均为static定位，则以根元素html为坐标定位。html本身也可以被absolute定位，他的坐标是视窗。
relative 占据文档空间，以默认位置为坐标定位，接受float和方向值传入。其父元素也必须是非static定位。
fixed 不占据文档空间，以视窗为坐标，固定在页面位置，不随着页面滚动而移动

6. URI是什么？
应该是资源地址，英文不知道。。。

7. GET请求和POST请求的区别是什么？
get有数据量限制，随着url传输，优点是传输方便，并且可以通过url提交数据。比如一些在线小测试分享结果给好友的时候，那个url就是带get传入参数的。。。
post没有数据量限制，通常提交表单、密码等等都用post，更加安全。。。写的时候也更麻烦点 -_-b


应届抠脚水平 -_-b 献丑了

[pwinner]

嗯，我来个高中自学水平。。
1.资源能压缩就压缩，图片最后加载就行
2.复制粘贴（捂脸）
3.那个是啥？好像是让不同浏览器都能支持还是什么的咳咳
4.掀桌
5.继续掀桌。。
6.那不是叫做统一资源定位器么（信息科技考试要考233）
7.get是下载post是上传（跑

[hbkdsm]

@sneezry 弱弱问下 哪家厂？

[shiny]

第一条按很多年前的 Yahoo 前端优化军规就可以答上好久了……

[djyde]

1. JavaScript 按需加载。CSS Spirites。gzip。JavaScript 看情况尽量放到尾部。
2. 拿设计（或者自己设计）-> 想好整体布局 -> make project structure -> 必要时候使用 gulp -> coding
3. 文档类型。告诉 browser 用哪种标准去渲染 HTML。
4. <!- if IE >
5. static(default),inherit(继承父元素),absolute(绝对定位),relative(相对定位)。区别不知道怎么说。。。
6. 只知道 URL 是 URI 的一种。`mailto:`, Android 的`content:` 等都是 URI。
7. post 要比 get 安全一些，通过 get 传输的参数是暴露的。

我发现好多概念我都懂，但不知道如何表达。

[taoche]

目前为止，还没有一个答的比较好的答案。。

[Septembers]

@djyde @banri @sumhat @lyragosa @taoche

1. 加速页面载入速度的方法都有哪些？
这是个大坑啊！！！
边际效益最明显的做法是 尽可能能降低网络延时和避免网络拥塞 同时 尽可能避免阻塞


2. 你编写前端页面的过程是怎样的？
。。。。。。。。。。。。。因人而异


3. DOCTYPE是什么，有什么作用？
DOCTYPE 向浏览器宣导 文档类型
在IE下不宣导DOCTYPE会触发怪异模式


4. CSS hack你知道哪些？
CSS Hacking直接照抄 https://en.wikipedia.org/wiki/CSS_filter


5. CSS中position的属性有哪些，它们的区别是什么？
http://www.w3schools.com/cssref/pr_class_position.asp 直接引述Property Values的描述


6. URI是什么？
URI直接引述维基百科的解释


7. GET请求和POST请求的区别是什么？
GET: The GET method means retrieve whatever information (in the form of an entity) is identified by the Request-URI. If the Request-URI refers to a data-producing process, it is the produced data which shall be returned as the entity in the response and not the source text of the process, unless that text happens to be the output of the process.
see http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3

POST: The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI in the Request-Line.
see http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5

（GET和POST在安全层面上没有区别 HTTP是明文传输协议啊 除非with TLS

[learnshare]

script 放后面作用不大，这条理论有些过时了

[MinonHeart]

应该还有
js闭包，js继承，js原型链，对象、类、方法、属性之间的关系

有可能还有算法和数据结构的问题
单链表，排序算法

其他的
来，咱们谈谈设计模式

[killerand1983]

谢谢分享

[MinonHeart]

应该还有个CSS盒子模型吧，这个属于必问的问题

[killerand1983]

PHPer回答下

1. 加速页面载入速度的方法都有哪些？

页面静态化、代码压缩、静态资源托管，合并CSS（减少请求）

2. 你编写前端页面的过程是怎样的？

设计图->布局->通用class样式->

3. DOCTYPE是什么，有什么作用？

文档类型？给浏览器看的

4. CSS hack你知道哪些？

_ * !针对IE什么的

5. CSS中position的属性有哪些，它们的区别是什么？

只知道用于定位

6. URI是什么？

不知道

7. GET请求和POST请求的区别是什么？

GET可见 | 多用于传递
POST不可见 | 多用于接收

[sneezry]

@MinonHeart 这确定是招实习生的？

[Tankpt]

光第一点。。可以写篇文章

[djyde]

@MinonHeart 最简单的设计模式： for(var i = 0; i < foo.length; i++ ){}

[ctsed]

请用css实现头像

[sneezry]

@ctsed 好坏……

[br00k]

垂直居中有那些方式，两端对齐的问题要怎么处理？

[jsq2627]

也来试着回答下

1. 加速页面载入速度的方法都有哪些？

从以下方面来考虑：HTML下载、DOM Parsing、CSS下载/Parsing、JS下载/Parsing、图片等资源下载
在服务端启用 Gzip
CSS 尽量使用简单的 selector
合理运用 CSS sprite
JS置于 </body> 前加载
JS异步加载（async/defer 关键字）
按照AMD规范封装JS，通过 require.js 等异步加载
图片按需加载（延后加载）
CSS/JS bundle & minify
使用 CDN
通过 Image optimizer 优化图片素材
base64 嵌入小尺寸图片

提升JS的执行效率应该不在这个问题的范围内。

2. 你编写前端页面的过程是怎样的？

设计图->分解组件->布局->完成各个小组件的代码（最好能重用）->组件填入布局划好的框框

3. DOCTYPE是什么，有什么作用？

声明接下来的 HTML 代码所遵循的标准。XHTML、HTML 不同版本有不同的 DOCTYPE。不合理的 DOCTYPE 会造成浏览器进入 Quirk 模式。

4. CSS hack你知道哪些？
这个一下想要列举出来不是很容易
最常用的说几个
clearfix
IE specific selector
z-index: -1
不得不搬出万能宝典 css-tricks.com 了
https://css-tricks.com/snippets/css/

5. CSS中position的属性有哪些，它们的区别是什么？

三个常用（fixed, absolute, relative）两个不常用（static, inherit）还有一个非标准（sticky）

出现在文档流的：relative, static
可能创建新 stack context 的：absolute, relative（不过要求 z-index 不是 auto）
z-index 生效的：fixed, absolute, relative
相对于浏览器窗口定位：fixed
相对于第一个 absolute/relative 的父容器定位：absolute
相对于本来应当出现在文档流中的位置定位：relative
sticky 暂不讨论

6. URI是什么？
对资源进行唯一标识的一种方式。包括 URL 和 URN。因为 url 和 URI 长得比较像而且 URN 比较少见所以很多人将 URI 和 URL 两者概念混淆。

7. GET请求和POST请求的区别是什么？
形式上只是 HTTP 报文开头的 Method 不同，一个为“GET”一个为“POST”，而且通常规定 GET 报文不能有 body。更多是语义上的差别，GET、POST 分别对应 CRUD 的 R 和 C 操作（PUT 对应 U，DELETE 对应 D）。GET 通常用查询串传入参数，因为通常服务端限制最大 URL 长度，所以能传递的信息量有限。POST 通过 body 来传入数据并用 Content-Type 指明 MIME type，虽然服务端也有 body 的最大限制，但通常很大，可以传递较多信息。

[jsq2627]

没有查任何文档，如果有问题请指出。。。。

[zhengkai]

以公司招聘的角度来说，并不是需要你对每道题都完美回答，只是多问一些考察知识点

就比方说第一个问题为例，我不知道其他公司会怎么样，而且我对前端还还停留在 yslow 的年代，但如果一个实习生能很快写出 yslow 中的5条来回答第一题，那我觉得这实习生已经很难得了

[secondwtq]

@Septembers 那个维基的文章不错，谢谢了。

另外我认为有些包含重要信息的请求使用 GET 时，内容至少在客户端 URL 是直接可见的，POST 的话不开 Developer Tools 基本是看不到的。
最直接的影响之一就是我们学校的教务系统，可以直接用 GET 登录，结果就是 URL 放浏览器地址栏上别人过来瞄一眼密码全看见了（不要指望他会有加密...）。

并且如果你要在 HTML 中链接跨域的资源的话，是只能使用 GET 请求的。

[ctsed]

1. 加速页面载入速度的方法都有哪些？
不考虑网站性能和带宽：
到终端：
双方带宽确定，加快速度只有减少数据传输量。
常用方法有：
优化网页大小，精简不必要的内容
开启gzip压缩、浏览器缓存
减少请求数量，静态资源单独设置域名等等
要不试试http2
到浏览器渲染页面：
优化dom，js，css复杂度
优化会引起浏览器线程阻塞的操作，alert、同步ajax等
加载脚本图片等资源优先级往后排，lazyload什么的

2. 你编写前端页面的过程是怎样的？
没超过100行

3. DOCTYPE 是什么，有什么作用？
声明页面类型

4. CSS hack 你知道哪些？
不想知道

5. CSS 中 position 的属性有哪些，它们的区别是什么？
absolute related fixed static inherit 区别有表示位置时采用的参照物不同

6. URI 是什么？
学名叫统一资源定位符，和url类似

7. GET 请求和 POST 请求的区别是什么？
http协议里的两种不同的方法
get常用于服务器请求资源
post比get多了body部分，可以传输文件
body部分的作用与特点都是两者的区别

[lingoys]

@banri -webkit- -moz- 这些也算 CSS hack 吧

[banri]

@lingoys 我脑补应该不算，这个算私有属性，部分未来可能成为标准

而_ * /9是只有低版本IE会识别，其它浏览器会提示警告的错误语法(・_・ヾ发现把自己绕进去不知道怎么说了

[lingoys]

@banri https://en.wikipedia.org/wiki/CSS_filter 但是在这里的确算（

[ctsed]

@lingoys 能达到目的的都算啊

[weakiwi]

图解http有个大概

[Aaaaaashu]

楼主轻轻松松就可以过了

[Dongdong36]

@Tankpt 可以写本书，哈哈

[sneezry]

@Dongdong36 我记得第一个问题乌龟书第一章有提到

[yeah2109]

我记得 get post是php里才教的东西么