最近遇到的前端面试题(2017.02.09更新版)

2017-02-10 14:35
234

个人博客已上线,欢迎前去访问评论!
无媛无故 - wangchloe的个人博客


以下内容非本人原创,是整理后觉得更容易理解的版本,欢迎补充


输入url后的加载过程

从输入 URL 到页面加载完成的过程中都发生了什么

1. 查找域名对应IP地址

这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...
(1) 浏览器搜索自己的 DNS 缓存(维护一张域名与 IP 地址的对应表);
(2) 搜索操作系统中的 DNS 缓存(维护一张域名与 IP 地址的对应表);
(3) 搜索操作系统的 hosts 文件( Windows 环境下,维护一张域名与 IP 地址的对应表);
(4) 操作系统将域名发送至 LDNS(本地区域名服务器),LDNS 查询 自己的 DNS 缓存(一般查找成功率在 80% 左右),查找成功则返回结果,失败则发起一个迭代 DNS 解析请求

① LDNS 向 Root Name Server (根域名服务器,如 com、net、org等的解析的顶级域名服务器的地址)发起请求,此处,Root Name Server 返回 com 域的顶级域名服务器的地址;

② LDNS 向 com 域的顶级域名服务器发起请求,返回 baidu.com 域名服务器地址;

③ LDNS 向 baidu.com 域名服务器发起请求,得到 www.baidu.com 的 IP 地址;

(5) LDNS 将得到的 IP 地址返回给操作系统,同时自己也将 IP 地址缓存起来;

(6) 操作系统将 IP 地址返回给浏览器,同时自己也将 IP 地址缓存起来;

2. 建立连接(TCP的三次握手)

(1) 主机向服务器发送一个建立连接的请求;

(2) 服务器接到请求后发送同意连接的信号;

(3) 主机接到同意连接的信号后,再次向服务器发送了确认信号 ;

3. 构建网页

(1) 浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;

(2) 服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;

(3) 服务器将得到的 HTML 文件发送给浏览器;

(4) 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;

(5) 在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、音频、视频、CSS、JS等文件,过程同请求 HTML ;

4. 断开连接(TCP的四次挥手)

(1) 主机向服务器发送一个断开连接的请求;

(2) 服务器接到请求后发送确认收到请求的信号;

(3) 服务器向主机发送断开通知

(4) 主机接到断开通知后断开连接并反馈一个确认信号,服务器收到确认信号后断开连接;

注意:这里的四次挥手中服务器两次向主机发送消息,第一次是回复主机已收到断开的请求,第二次是向主机确认是否断开,确保数据传输完毕。


三次握手 && 四次挥手

有了解过Common.js吗?

发现这方面的资料很少啊,都没有相中的比较好理解的。

浅析JS中的模块规范(CommonJS,AMD,CMD)


有了解过React.js吗?

React实现了单向响应的数据流

React.js 初学者应该知道的 9 件事

  1. React.js 只是一个视图库
  2. 组件尽可能的小
  3. 写函数式组件
  4. 写无状态组件
  5. 使用 Redux.js
  6. 一直使用 propTypes
  7. 使用浅渲染
  8. 使用 JSX, ES6, Babel, Webpack 和 NPM
  9. 使用 React 和 Redux 开发工具

react 通过prop管理组件通信,通过state 驱动视图比较差异进行更新操作

作者:第七页
链接:https://www.zhihu.com/question/39825457/answer/83544390
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

angular 是MV* 框架, react是用来构建可重复使用的UI组件的, 可以看成是个提供工具的library。
react 可以和 angular 的 directive做比较。 这样比较的话, react是比angular directive 在组建UI上更powerful的。

作者:空空
链接:https://www.zhihu.com/question/23444167/answer/24957302
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

请问 React 和 Angular 各有什么优缺点,各自又适合什么开发场景?

React之特点及常见用法

React 入门实例教程


angular和vue的区别

唉,这个真的太难总结了,求评论!!!

Vue.js 很好,但会比 Angular 或 React 更好吗?

vue.js与angular,react等框架分析比较

浅析angular,react,vue.js jQuery使用区别


less的特点

每次被问到这个我只能想起less中的定义变量,用太久less都忘了css不能嵌套,醉了醉了。

  1. 变量
  2. 混合(Mixins)
  3. 嵌套规则
  4. 运算
  5. 函数
  6. 命名空间
  7. 作用域
  8. 注释
  9. 导入(Import)

Less语言特性

sass-vs-less

Sass和Less的区别

sass 与 less 的区别与学习


less的原理

本质上,less 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,less 把这些样式规则编译成浏览器可以识别的 css 样式。less 并没有裁剪 css 原有的特性,更不是用来取代 css 的,而是在现有 css 语法的基础上,为 css 加入程序式语言的特性。less 最终需要编译成 css 文件才能起到样式的效果,我们可以称 less 为 css 样式生成工具。


gulp的特点

  1. 使用 gulp.js,你的构建脚本是代码,而不是配置文件;
  2. 使用标准库(node.js standard library)来编写脚本;
  3. 插件都很简单,只负责完成一件事-基本上都是 20 行左右的函数;
  4. 任务都以最大的并发数来执行;
  5. Gulp是一个基于流的构建系统,使用代码优于配置的策略。输入/输出(I/O)是基于“流式”的。

作用

  1. Sass、Less编译
  2. Css Js 图片压缩
  3. Css Js 合并
  4. Css Js 内联
  5. Html的include功能
  6. Autoprefixer
  7. 自动刷新
  8. 去缓存
  9. Handlebars模板文件的预编译
  10. 雪碧图
  11. ESLint
  12. rem移动端适配方案

其他补充

gulp VS grunt

前端工程的构建工具对比 Gulp vs Grunt


模块化 && 构建

dist是指distribution——分配,分发——发布完成的文件夹一般命名dist。

dest则是destination——目的地,终点——用于grunt文件路径相关的配置项,一般会和src配对出现。比如文件压缩插件:压缩源(src)文件,生成压缩包到(dest)。

作者:峰子
链接:https://www.zhihu.com/question/29199796/answer/82862432
来源:知乎
著作权归作者所有,转载请联系作者获得授权。


ajax的原理

  • 在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。

  • Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据。

    • Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

ajax过程

  1. 获得ajax
  2. 打开地址
  3. 发送数据
  4. 接收数据
<script>
 // 1.获得ajax
 if (window.XMLHttpRequest) { //查看当前浏览器XMLHttpRequest是否是全局变量
     var oAjax = new XMLHttpResquest();
 } else {
     var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //IE6,传入微软参数
 }

 // 2.打开地址
 switch (json.type.toLowerCase()) {
     case 'get':
         oAjax.open('GET', json.url + '?' + jsonToURL(json.data), true); // 提交方式(大写),url,是否异步
         oAjax.send(); // 3.发送数据
         break;
     case 'post':
         oAjax.open('POST', json.url, true);
         oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         oAjax.send(jsonToURL(json.data)); // 3.发送数据
         break;
 }

 // 4.接收数据
 oAjax.onreadystatechange = function() { //监控状态
     if (oAjax.readyState == 4) {
         json.complete && json.complete();
         if (oAjax.status >= 200 && oAjax.status < 300 ||
             oAjax.status == 304) {
             json.success && json.success(oAjax.responseText); //执行成功的回调函数, responseText为响应内容
         } else {
             json.error && json.error(oAjax.status); //执行失败的回调函数
         }
     }
 };
</script>

有了解过ES6吗?

【探秘ES6】系列专栏(一):ES6简介


git merge


less不依靠构建转css

我猜这道面试题应该也不让用 lessc ,哈哈哈!


冒泡、快排


promise


性能优化


冒泡和捕获


数组的翻转(非reverse)


写面试题相关文章比码每天10个前端知识点累多了,感觉又打开了一片新天地。
今天先更到这吧,后续会补上,关注标题更新时间


更多内容可以订阅本人微信公众号,一起开启前端小白进阶的世界!

最近遇到的前端面试题(2017.02.09更新版)-JEESNS
微信公众号:无媛无故
帖子评论

关注 / 粉丝

我无话可说