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

2015-06-21 13:45:47 +08:00
 sneezry
因为面试的是实习生,所以被问的问题都是非常基础的,和大家简单分享一下。

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

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

3. DOCTYPE是什么,有什么作用?

4. CSS hack你知道哪些?

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

6. URI是什么?

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

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

面试官人非常好,面试过程非常轻松:D
9825 次点击
所在节点    分享发现
44 条回复
MinonHeart
2015-06-21 20:12:29 +08:00
应该还有
js闭包,js继承,js原型链,对象、类、方法、属性之间的关系

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

其他的
来,咱们谈谈设计模式
killerand1983
2015-06-21 20:13:21 +08:00
谢谢分享
MinonHeart
2015-06-21 20:17:40 +08:00
应该还有个CSS盒子模型吧,这个属于必问的问题
killerand1983
2015-06-21 20:19:02 +08:00
PHPer回答下

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

页面静态化、代码压缩、静态资源托管,合并CSS(减少请求)

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

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

3. DOCTYPE是什么,有什么作用?

文档类型?给浏览器看的

4. CSS hack你知道哪些?

_ * !针对IE什么的

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

只知道用于定位

6. URI是什么?

不知道

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

GET可见 | 多用于传递
POST不可见 | 多用于接收
sneezry
2015-06-21 20:48:04 +08:00
@MinonHeart 这确定是招实习生的?
Tankpt
2015-06-21 21:12:17 +08:00
光第一点。。可以写篇文章
djyde
2015-06-21 21:31:58 +08:00
@MinonHeart 最简单的设计模式: for(var i = 0; i < foo.length; i++ ){}
ctsed
2015-06-21 21:59:01 +08:00
请用css实现头像
sneezry
2015-06-21 22:13:56 +08:00
@ctsed 好坏……
br00k
2015-06-22 00:25:27 +08:00
垂直居中有那些方式,两端对齐的问题要怎么处理?
jsq2627
2015-06-22 01:36:01 +08:00
也来试着回答下

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
2015-06-22 01:38:18 +08:00
没有查任何文档,如果有问题请指出。。。。
zhengkai
2015-06-22 03:55:35 +08:00
以公司招聘的角度来说,并不是需要你对每道题都完美回答,只是多问一些考察知识点

就比方说第一个问题为例,我不知道其他公司会怎么样,而且我对前端还还停留在 yslow 的年代,但如果一个实习生能很快写出 yslow 中的5条来回答第一题,那我觉得这实习生已经很难得了
secondwtq
2015-06-22 04:17:36 +08:00
@Septembers 那个维基的文章不错,谢谢了。

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

并且如果你要在 HTML 中链接跨域的资源的话,是只能使用 GET 请求的。
ctsed
2015-06-22 04:34:28 +08:00
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
2015-06-22 09:28:22 +08:00
@banri -webkit- -moz- 这些也算 CSS hack 吧
banri
2015-06-22 09:41:28 +08:00
@lingoys 我脑补应该不算,这个算私有属性,部分未来可能成为标准

而_ * /9是只有低版本IE会识别,其它浏览器会提示警告的错误语法(・_・ヾ发现把自己绕进去不知道怎么说了
lingoys
2015-06-22 09:47:48 +08:00
@banri https://en.wikipedia.org/wiki/CSS_filter 但是在这里的确算(
ctsed
2015-06-22 11:36:42 +08:00
@lingoys 能达到目的的都算啊
weakiwi
2015-06-22 13:38:46 +08:00
图解http有个大概

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/200169

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX