奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 笔经面经 >

面试的知识体系梳理

时间:2018-04-02 12:06来源: 作者:小邱
前几次的面试,让我对于一个前端工程师需要掌握的知识体系有了一个全新的认识。之前自己在学习方面一直属于野路子,没有一个很规范的学习路径,往往都是想到什么就去学什么。而且基本

不要再去背面试的知识点了

关于这几次的面试

前几次的面试,让我对于一个前端工程师需要掌握的知识体系有了一个全新的认识。之前自己在学习方面一直属于野路子,没有一个很规范的学习路径,往往都是想到什么就去学什么。而且基本都是处于会用的那种水平。并没有真正的做到知其然且知其所以然。面试基本都没有通过,我自己也明白了自己在那些方面需要深入学习。

知识点

前端面试有很多知识点,因为前端本就涉及到多个方面。当我完全抱着背的想法去应付面试官的问题时,我发现我很惧怕面试官深入的去提问。因为心里知道,我是不知道的,我只是背的。让我想到了高中的考试,也很怕考那种证明题,因为对概念和原理,掌握的不透彻。 看了这么多的优秀的文章,还有一些自己的反省思考。我觉得对于大部分的初级前端来说,要改变自己对于这些知识点的态度,才能更好的去理解这些知识点的原理,面对面试官的话,就算你不懂,你也不会虚,因为你会有自己对于这个关键词的理解。 就像大学的课程一样,在大一大二思维不成熟的时候,面对那些课程决定它们对于我敲代码并没有什么作用,有那个时间我还不如多背几个API。到后面,编程的时候会考虑风格,性能,交互等方面的时候,我才发现之前学习的课程都是有用的,只是当时编程能力没有跟上,并没有动力驱动我们去深入理解并使用。 所以这里我也觉得,你学的都是有用的,但是有些并不是当时就会发挥作用的。

关于前端面试的几个知识

关于前端面试会提到的知识点,在我稍微看了一下《webkit技术内幕》之后,我觉得按照浏览器内核中的不同功能去理解会有更好的效果。

  • 网络
  • 资源管理
  • 网页浏览
  • Javascript 运行 根据上面四个大概的功能,就可以引导出我们需要掌握的知识了。

网络

网络部分涉及到的就是HTTP请求,因为我们访问网页的过程就是通过特定的URL来获得相应的资源(数据或文件)。 那么关于HTTP就有

  • 协议版本
  • 请求头中包含那些属性,有哪些意义
  • 请求方式之间的不同
  • 响应状态码的含义
  • 状态的管理 cookie的设置和传递。
  • HTTP协议是TCP协议的一种实现,是应用层的协议,TCP协议则是传输层的协议。还可以追溯到IP协议,四层网络模型。

资源管理

通过之前的网络请求,我们可以获取相应的文件,那么这些文件存放在本地磁盘中。而像文件上传,cookie的存放,以及浏览器提供的数据库,都是存放在本地的,浏览器提供了一系列的API去操作这些文件。

  • cookie的存放位置,删除机制。
  • 缓存的更新机制
  • 文件操作的API
  • web数据存放的API( cookie,localstorage,sessionstroage,indexDB...)

网页的浏览

当我们获取到了一个html文件,我们开始解析,首先根据文件的<! doctype>声明去解析这个网页,构建DOM树,这是css也在下载,因为css层叠样式表,下载成功之后根据多方来源开始计算最终的css效果,然后与DOM树相结合,形成渲染树再开始绘制再浏览器界面。解析网页的时候,遇到script的时候会开始执行相应的代码,阻塞DOM树的生成。 那么这个过程就涉及到了:

  • css的计算
  • dom树的生成
  • sript的阻塞加载
  • 页面的绘制
  • 重绘与重排

javascript运行

因为javascript是单线程的解释型语言,从上到下解释运行。但是js中又有异步的概念,这就又引出了事件循环这个概念:

  • 事件循环 Event Loop
  • 宏任务(macro-task) 微任务(micro-tack)
  • JS运行机制
  • 线程 和 进程
  • js作用域,执行环境

性能

通过浏览器的这几个模块,我们了解了一些知识点,但是还有其他的,比如性能。 对于性能的优化,也可以从这几个方面去理解。性能在前端减少一个页面加载的时间。

  • 通过缓存,减少HTTP的文件传输。
  • 通过压缩资源,减少传输时间
  • 通过优秀的CSS 以及 页面结构设计 减少 浏览器渲染时间。

SE0

对于SEO的话,我们主要是为了在搜索的时候让自己的网站排名靠前。那么我们可以理解一下网络爬虫,然后对于这方面的优化就会有一个大概的理解。 网页爬虫,通过一个入口,访问符合规则的很多URL,来获得页面,通过解析页面标签的结构,来存放一些关键信息。 比如网页head中的title,meta的describe,keywords。还有一些内容,但是因为爬虫并不是浏览器,所以一般不能在遇到script、link这些需要额外发起网络请求的资源并解析,所以对于大部分只是分析静态的页面。 那么,我们就可以知道:

  • 规范编写html结构,便于爬虫解析
  • 关键词,title,内容等信息要完善
  • 减少使用js输出内容
  • 访问速度要快

总结

对于整个基础前端知识,我先分析到这里。因为对于vue react这样的前端框架我还不是很熟练,在这方面不能提供很好的学习思路。 希望大家能找到适合自己的学习方式并构建属于自己的知识体系。


(责任编辑:admin)
顶一下
(4)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-06-11 16:06
栏目列表
推荐内容

关注奔三路小程序,方便你我他