Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

前端基础知识整理 #2

Open
xinglee23 opened this issue Jul 31, 2018 · 0 comments
Open

前端基础知识整理 #2

xinglee23 opened this issue Jul 31, 2018 · 0 comments

Comments

@xinglee23
Copy link
Owner

xinglee23 commented Jul 31, 2018

基础知识

prototype和proto的关系是什么

几乎任何对象有一个[[prototype]]属性,在标准中,这是一个隐藏属性。该属性指向的是这个对象的原型。
那么一个对象的[[prototype]]属性究竟怎么决定呢?这是由构造该对象的方法决定的。据我所知有三种构造一个对象的方法:
1、这个对象是通过对象字面量构造出来的。

var person1 = {
    name: 'cyl',
    sex: 'male'
};

形如这个形式的叫做对象字面量。这样子构造出的对象,其[[prototype]]指向Object.prototype
2、这个对象是由构造函数构造出来的。

function Person() {}
var person1 = new Person()

通过new操作符调用的函数就是构造函数。由构造函数构造的对象,其[[prototype]]指向其构造函数的prototype属性指向的对象。每个函数都有一个prototype属性,其所指向的对象带有constructor属性,这一属性指向函数自身。(在本例中,person1的[[prototype]]指向Person.prototype)
3、这个对象是由函数Object.create构造的。

var person1 = {
  name: 'cyl',
  sex: 'male'
}
var person2 = Object.create(person1)

本例中,对象person2的[[prototype]]指向对象person1。在没有Object.create函数的日子里,人们是这样做的:

Object.create = function(p) {
  function f() {}
  f.prototype = p
  return new f()
}

然而虽然说[[prototype]]是一个隐藏属性,但很多浏览器都给每一个对象提供.__proto__这一属性,这个属性就是上文反复提到的该对象的[[prototype]]。由于这个属性不标准,因此一般不提倡使用。ES5中用Object.getPrototypeOf函数获得一个对象的[[prototype]]。ES6中,使用Object.setPrototypeOf可以直接修改一个对象的[[prototype]]
至于什么原型链之类的,都很好理解,这里就不说了。(答案来自知乎)

Q:meta viewport原理

A:答案

Q:什么是域名收敛

A:PC 时代为了突破浏览器的域名并发限制。有了域名发散。
浏览器有并发限制,是为了防止DDOS攻击。
域名收敛:就是将静态资源放在一个域名下。减少DNS解析的开销。
域名发散:是将静态资源放在多个子域名下,就可以多线程下载,提高并行度,使客户端加载静态资源更加迅速。
域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端,提高性能,因为dns解析是是从后向前迭代解析,如果域名过多性能会下降,增加DNS的解析开销。
http 请求过程
首先要知道,使用一个 http 请求去请求一个资源时,会经历些什么。简单而言:
DNS 域名解析 -->
发起 TCP 的 3 次握手 -->
建立 TCP 连接后发起 http 请求 -->
服务器响应 http 请求 -->
......略
域名收敛详解

display:inline-block 和float:left 的区别

display是指显示状态,float是针对块级元素的浮动。
使用inline-block:控制元素的垂直对齐跟横向排列元素。
使用浮动:
1、让元素环绕某一个元素,对一个元素跟围绕他的一些元素进行更多控制
2、不想处理inline-block带来的空白问题元素浮动后,它会变为inline-block。其宽度不是100%
详解

作用域链

当查找变量的时候,会先从当前上下文的变量对象中查找,如果没有找到,就会从父级(词法层面上的父级)执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。
作用域链

Q:前端优化策略列举

A:前端优化

Q:首屏、白屏时间计算

A:
1、白屏时间指的是浏览器开始显示内容的时间。因此我们只需要知道是浏览器开始显示内容的时间点,即页面白屏结束时间点即可获取到页面的白屏时间。通常认为浏览器开始渲染 <body> 标签或者解析完 <head> 标签的时刻就是页面白屏结束的时间点。
计算白屏时间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>白屏</title>
  <script type="text/javascript">
    // 不兼容performance.timing 的浏览器,如IE8
    window.pageStartTime = Date.now();
  </script>
  <!-- 页面 CSS 资源 -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript">
    // 白屏时间�结束点
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

2、首屏时间
首屏时间是指用户打开网站开始,到浏览器首屏内容渲染完成的时间。对于用户体验来说,首屏时间是用户对一个网站的重要体验因素。通常一个网站,如果首屏时间在5秒以内是比较优秀的,10秒以内是可以接受的,10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。

通常计算首屏的方法有

  • 首屏模块标签标记法
  • 统计首屏内加载最慢的图片的时间
  • 自定义首屏内容计算法
    时间计算

Q:get和post的区别

A:

  • get参数通过url传递,post放在request body中。
  • get请求在url中传递的参数是有长度限制的,而post没有。
  • get比post更不安全,因为参数直接暴露在url中,所以不能用来传递敏感信息。
  • get请求只能进行url编码,而post支持多种编码方式
  • get请求会浏览器主动cache,而post支持多种编码方式。
  • get请求参数会被完整保留在浏览历史记录里,而post中的参数不会被保留。
  • GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。
  • GET产生一个TCP数据包;POST产生两个TCP数据包。

长的说:
对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);
而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。

Q:xss和crsf的原理以及怎么预防

A: 原理及防御

Q:CSS优先级

A:css优先级

Q:delegate如何实现

A:事件代理

Q:jsonp有什么安全问题?为什么有这些安全问题?

Q:jsonp安全问题

Q:单向和双向链表

单向和双向链表

水平垂直居中

水平垂直居中

编写h5需要注意什么

h5编写注意事项

react生命周期

react生命周期

amd和cmd区别,怎么了解到这些区别的,是否是去看了规范。

AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMD
CMD 规范在这里:seajs/seajs#242

  • AMD 是 RequireJS 在推广过程中对模块定义的规范化产出
  • CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。还有不少⋯⋯这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。
    区别:
  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
  2. CMD 推崇依赖就近,AMD 推崇依赖前置。
    看代码:
// CMD
define(function(require, exports, module) {  
  var a = require('./a')   
  a.doSomething()  
  // 此处略去 100 行   
  var b = require('./b') // 依赖可以就近书写   b.doSomething()   // ... 
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好    
  a.doSomething()    // 此处略去 100 行    
  b.doSomething()   
  ...
  }) 

虽然 AMD 也支持 CMD 的写法,同时还支持将 require 作为依赖项传递,但 RequireJS 的作者默认是最喜欢上面的写法,也是官方文档里默认的模块定义写法。
3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。
4. 还有一些细节差异,具体看这个规范的定义就好,就不多说了。另外,SeaJS 和 RequireJS 的差异,可以参考:seajs/seajs#277

什么是RESTful

RESTful

前端工程化

前端工程化

二叉树

二叉树

前端知识补充

面试的一些知识

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant