你对前端开发的理解,端试二


发表时间: 2019-06-21 13:15:00 浏览量: 31 文章来源: 独家收藏


大大小小也经历过一些面试,并且看过挺多别人的面试经验了。突然发现很多时候自己会的东西面试时不一定能表达出来,用过的东西问其细节和原理也是说不出什么(很多时候都是遇到靠文档无法理解,或者出现问题才会追其细节)。现在前端的知识框架也比较明显了,我准备顺着这个框架整理一下,里面涉及到的点的重点不是要写成笔记而是能清楚地讲出来。

准备按照 FrontendMasters/front-end-handbook-2019: 2019 edition of our front-end development handbook 这个框架进行整理,顺序从基础到高级。

刚刚写了下目录,发现内容好多啊!!!每个都深入研究是不可能了,会取舍一部分。

前端开发

谈谈你对前端开发的理解?

前端 Web 开发主要是为网站或 Web 应用程序编写生产 HTML,CSS 和 JavaScript 代码。

由于用户使用具有不同屏幕尺寸和分辨率的各种设备,所以前端开发要确保他们开发的网站在不同的浏览器(跨浏览器),不同的操作系统(跨平台)和不同的设备(跨设备)中正确显示。

前端技术开发出来的程序可以应该用在 Web 浏览器、Webviews 、桌面端、移动端和 Headless Browsers(无头浏览器,主要用于测试和爬虫)。

前端开发的挑战是,用于创建网站前端的工具和技术不断变化,因此开发人员需要不断了解该领域的发展方式。

HTML

Doctype 作用?

用于告知浏览器的解析器用什么文档标准解析这个文档。(HTML5 不基于 SGML,因此不需要对 DTD 进行引用,所以写法非常简洁)

不加 Doctype 的话浏览器会以混杂模式(Quirks mode,混杂模式下浏览器会尝试模拟非常旧的浏览器的行为)解析文档。

说说你对语义化的理解?

1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2,有利于 SEO

3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

4,便于团队开发和维护,语义化更具可读性

HTML5 有哪些新特性、移除了那些元素?

新特性

主要是关于图像,位置,存储,多任务等功能的增加。

  1. 语义化更好的内容标签(header,nav,footer,aside,article,section)
  2. 音频、视频 (Audio, Video) API
  3. 画布 (Canvas) API
  4. 地理 (Geolocation) API
  5. localStorage 长期存储数据,浏览器关闭后数据不丢失
  6. sessionStorage 的数据在浏览器关闭后自动删除
  7. 拖拽释放 (Drag and drop) API
  8. 表单控件 calendar、date、time、email、url、search
  9. 新的技术 Web Workers, WebSocket

移除的元素

如何处理 HTML5 新标签的浏览器兼容问题?

IE8/IE7/IE6 支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签。使用 html5shim 可以实现

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

CSS

介绍一下 position 的值?

如何清除浮动?

浮动

浮动的框可以从左或右开始,直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

一般是一个盒子里使用了 CSS float 属性,导致父级对象盒子不能被撑开,这样浮动就产生了。

清除方法

  1. CSS clear 属性清除浮动:在父盒子后添加一个空标签(或伪元素),然后在上面添加 clear:both 规则
  2. 创建新的 BFC:通常是给父元素设置 overflow:hidden规则

display:nonevisibility:hidden 的区别?

介绍一下 box-sizing 属性?

box-sizing 属性用来控制元素的盒模型的解析模式。默认值是 content-box

标准浏览器下,按照 W3C 规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。

CSS 选择符有哪些?

优先级算法如何计算?

CSS3 有哪些新特性?

JavaScript

DOM API 的基本使用

new操作符具体干了什么呢?

  1. 创建一个空对象,并且构造函数的 this 变量引用该对象,同时还继承了该函数的原型(空对象的[[prototype]]属性 (也叫__proto__) 指向构造函数的prototype属性)。

  2. 调用构造函数,属性和方法被加入到构造函数的 this 引用的对象中。

  3. 新创建的对象由 this 所引用,并且最后隐式的返回 this。

javascript 创建对象的方法?

  1. 工厂模式
  2. 构造函数模式
  3. 原型模式
  4. 混合构造函数和原型模式
  5. 动态原型模式
  6. 寄生构造函数模式
  7. 稳妥构造函数模式

javascript 继承的方法?

  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承 (原型 + 借用构造)
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承

什么是事件代理 (事件委托)?

事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理” 即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是 DOM 元素的事件冒泡。使用事件代理的好处是可以提高性能。

什么是作用域链?

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到 window 对象即被终止,作用域链向下访问变量是不被允许的。

创建 AJAX 过程?

  1. 创建 XMLHttpRequest 对象, 也就是创建一个异步调用对象
  2. 创建一个新的 HTTP 请求, 并指定该 HTTP 请求的方法、URL 及验证信息
  3. 设置响应 HTTP 请求状态变化的函数
  4. 发送 HTTP 请求
  5. 在响应 HTTP 请求状态变化的函数中获取响应数据

你对闭包的理解?

闭包是函数和声明该函数的词法环境的组合。

闭包指有权访问另一个函数作用域中的变量的函数。

闭包有三个特性:

  1. 函数嵌套函数

  2. 函数内部可以引用外部的参数和变量

  3. 参数和变量不会被垃圾回收机制回收

浏览器存储包括哪些?

note / 数据存储 - cookie、sessionstorage、localstorage.md at master ? zjffun/note

网络

JS 东西太多了,将网络的部分单独拿出来

GET 和 POST 的区别,何时使用 POST?

然而,在以下情况中,请使用 POST 请求:

  1. 更新服务器上的文件或数据库(GET 的话 URL 如果相同一样会使用缓存,这种情况如果后端支持用 PUT 请求方法更合适)
  2. 向服务器发送大量数据(POST 没有数据量限制)
  3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

什么是 HTTPS?

HTTP 协议通常承载于 TCP 协议之上,在 HTTP 和 TCP 之间添加一个安全协议层(SSL 或 TSL),这个时候,就成了我们常说的 HTTPS。

默认 HTTP 的端口号为 80,HTTPS 的端口号为 443。

因为网络请求需要有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用 HTTPS,密钥在你和终点站才有。https 之所以比 http 安全,是因为他利用 SSL 或 TSL 协议传输。

如何解决跨越问题?

note / 同源策略和跨域资源共享(CROS).md at master ? zjffun/note

编程

判断变量是否为数组

最通用的方法

Object.prototype.toString.call(val) === "[object Array]"

实现一个函数 clone,可以对 JavaScript 中的 5 种主要的数据类型(包括 Number、String、Object、Array、Boolean)进行值复制

Object.prototype.clone = function(){
  var o = this.constructor === Array ? [] : {};
  for(var e in this){
    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
  }
  return o;
}

包管理器

CSS 预处理

CSS 框架

CSS 架构

任务运行工具

模块打包工具

格式检查和格式化工具

框架

说说你对 MVC 和 MVVM 的理解?

note/MVC、MVP 和 MVVM.md at master ? zjffun/note

CSS 融入 JS

渐进式 Web 应用

静态类型

服务端渲染

静态站生成

桌面应用

移动端应用

WASM



文章对我是否有用?



上一篇:携程金融跨境张金融图屡现力催收移支网。
下一篇2018-5二经。Mozilla Firefox有限公司二端工程师二




ICP备14006799号 Copyrigh ©1997-2018 新音网 版权所有