前端知识分享_前端分享话题

1、判断变量的类型：
typeof(data) === "类型"? true : false;


2、2-1、去除字符串空格：
 去除所有空格：str = str.replace(/\s*/g,"");
 去除两头空格： str = str.replace(/^\s*|\s*$/g,"");
 去除左空格：str = str.replace(/^\s*/,"");
 去除右空格：str str.replace(/(\s*$)/g,"");


 2-2、使用str.trim()方法，局限性：无法删除字符串中间的空格


3、HTTP消息构建：
HTTP是基于客户端/服务端的架构模型，是一个无状态的请求/响应协议。


4、客户端HTTP请求消息：包括请求行、请求头部、空行和请求数据四部分组成。
HTTP服务器响应消息：状态行、消息报头、空行和响应正文。


5、js字符串操作函数
5-1、concat() 将两个以上的字符文本组合起来，返回一个新的字符串。
5-2、indexOf() 返回字符串中一个子串第一次出现的索引；没有匹配项，返回-1。
5-3、charAt() 返回指定的字符。
5-4、lastIndexOf() 返回字符串中最后一处出现的索引，没有匹配项，返回-1。
5-5、match() 检查一个字符串是否匹配一个正则表达式。
5-6、substr() 返回一个字符串的一个子串，从开始位置，以及截取字符串长度。
5-7、substring() 返回一个字符串的一个子串，输入开始位置、结束位置。
5-8、slice() 已有的数组中返回选定的元素。
5-9、replace() 用新的字符串代替匹配的字符串。
5-10、search() 执行一个正则表达式匹配查找，返回字符串中匹配的索引值，负责返回-1。
5-11、split() 通过字符串划分成子串，将一个字符串做成字符串数组。
5-12、tolowerCase() 将整个字符串转换成小写。
5-13、toUpperCase() 将整个字符串转换成大写。
5-14、join() 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。
5-15、pop() 删除并返回数组的最后一个元素。
5-16、shift() 删除并返回数组的第一个元素。
5-17、push() 向数组末尾添加一个或更多的元素，并返回新的长度。
5-18、unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
5-19、reverse() 颠倒数组中的元素顺序。
5-20、slice() 从某个已有的数组返回选定的元素。
5-21、sort() 对数组元素进行排序。
5-22、toString() 把数组转换为字符串，并返回结果。




6、6-1、怎样添加、移出、移动、负责、创建和查找节点？
创建一个DOM片段：createDocumentFragment()。
创建一个具体的元素：createElement()。
创建一个文本节点：createTextNode()。


6-2、添加、移出、替换、插入
添加、appenfChild()。
移除、removeChlid()。
替换、replaceChild()。
插入、insertBefore()。


6-3、查找
通过元素标签名称、getElementByTagName()。
通过元素Name属性的值、getElementByName()。
通过元素ID，唯一性、getElementById()。


7、如何理解闭包？
7-1、定义和用法：当一个函数的返回值是另一个函数，而返回的函数如果调用了其父函数内部的其他变量，如果返回的函数在外部被执行，就产生了闭包。
7-2、函数外部可以读取函数内部的全局变量；函数外部无法读取函数内的局部变量。局部变量必须使用var定义，否则是全局变量。
7-3、使用闭包的主要事项：滥用闭包，会造成内存泄露。否则会造成网页的性能问题，解决方案，在函数退出之前，将不使用的局部变量全部删除。


8、什么是跨域？跨域请求资源的方法有哪些？
8-1、什么是跨域：由于浏览器同源策略，凡是发送请求URL的协议、域名、端口三者之间任意一个与当前页面地址不同即跨域，存在跨域的情况。
8-1-1、网络协议不同，http协议/https协议。
8-1-2、端口不同，80端口/8080端口等。
8-1-3、域名不同、子域名不同。


8-2、跨域请求资源的方法：
8-2-1、porxy代理，将请求发送给后台服务器，通过服务器发送请求，然后将请求的结果传递给前端，
实现方法：多数使用nginx代理
8-2-2、CORS（Cross-Origin Resource Sharing），是现代浏览器支持跨域请求的一种最常用的方式，
8-2-3、jsonp，通过动态插入一个script标签，浏览器对script的资源引用没有同源限制，同时资源价值到页面后会立即执行。


9、垃圾回收机制方式和内存管理
9-1、原理：垃圾收集器会定期找出那些不在使用的变量，然后释放其内存，
9-2、内存泄露
9-2-1：当页面元素被移除或替换时，若元素绑定的事件人没有移除，导致内存泄露。


10、javascript面向对象中继承实现？
10-1、基本特征：封闭、继承、多态
10-2继承的方法：原型链（prototype），call()/apply()，对象冒充。


11、什么是盒子模型：
包括元素的内容(content)、元素的内边距(padding)、元素的边框(border)、元素的外边距(margin)。


12、行内元素：a、b、span、img、input、select、label、button、textarea
块级元素：div、ul、li、dl、dt、h1-h6
空元素：br、hr、link、img、input


13、简述一下src和href的区别
href 是指向网络资源所在位置，建立和当前元素或当前文档之间的连接。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中的当前标签所在的位置。


14、简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求余姚一段时间才能返回信息，那么这个进程就会一直等到下去，直到收到返回信息才继续执行下去。
异步指进程不需要等到下去，而是继续执行下面的操作。


15、px和em的区别：
相同点：都是长度单位，
异同点：px是固定的，em会继承父级元素的字体大小。


16、浏览器内核分别是什么：
IE：trident内核
Forefox：gecko内核
Safari：webkit内核
Chrome：Blink（基于webkit）


17、什么是优雅降级和渐进增强
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再进行对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验，


优雅降级：开始就是完整的功能，然后再针对低版本浏览器进行兼容。


18、ajax的优缺点以及工作原理？
ajax（异步javascript和xml），是一种用于创建快速动态网页的技术。
优点：1、减轻服务器的负担，按需求取数据，最大程度的减少冗余请求。
2、局部刷新页面，减少用户心理和实际的等待时间，带来更好的用户体验。


缺点：ajax大量的使用了javascript和ajax引擎，这些取决于浏览器的支持，在编写的时候对浏览器的兼容性。
对流媒体还有移动设备的支持不是太好。
只是局部刷新，页面的后退按钮是没有用的。


ajax工作原理：
1、创建ajax对象。
2、判断数据传输方式（get/post）。
3、打开连接open()。
4、发送send()。
5、当ajax对象完成第四步数据接收完成，判断http响应状态。
6、执行回调函数。


19、开发及性能优化
1、规避javascript多人开发函数重命问题。
2、三种减低页面加载时间的方法：1、压缩css\js文件；2、合并js\css文件，减少http请求；3、外部js、css文件放在页面底部；4、减少dom操作，使用innerhtml代替dom元素。


20、浏览器完整的请求流程：

域名解析-->发起TCP的3次握手-->建立TCP连接后发起http请求-->服务器响应http请求，浏览器得到html代码-->浏览器解析html代码，并请求html代码中的资源-->浏览器对页面进行渲染呈现。

21、MVC和MVVM的区别？

在MVC里view可以直接访问model，view里还回包含model，还会有一些业务逻辑，mvc关注的是model，view依赖model，但model不依赖view；

MVVM实际上是真正的做到将页面和数据逻辑分离，它把绑定数据放到js里完成，此外，mvvm具有数据的双向绑定等新特性。

22、写出三个this的应用？

在html中：<input οnclick="function(this)">

input 获取值时：var a =document.getElementbyId("#a");

a.click = function(){

    this.value();

}

构造函数：

function （name，age）{

var name = this.name;

var age = this.ge;

}

23、jquery中addClass,removeClass,toggleClass的使用。

$(selector).addClass(class)：为每个匹配的元素添加指定的类名

$(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值；

$(selector).toggleClass(class)：如果存在（不存在）就删除（添加）一个类

$(selector).removeAttr(class);删除class这个属性；

24、sessionStorage 、localStorage 和 cookie 之间的区别

 共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

        web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

        sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

25、请指出document load和document ready的区别？

共同点：这两种事件都代表的是页面文档加载时触发。

异同点：

ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。

onload 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。

26、web前端开发，如何提高页面性能优化？

27、 浏览器是如何渲染页面的？

渲染的流程如下：

1.解析HTML文件，创建DOM树。

   自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

28、ES6新特性？

1、箭头函数-> ；

2、增强对象字面量；

3、字符串插值；

4、let 是新的var，它有块级作用域，不能使用let从新声明一个变量；

5、const是只读变量；

6、可继承内置函数；

7、promises 异步编程

29、什么是模块化？

•       模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

•       让开发者便于维护,同时也让逻辑相同的部分可复用

•       模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、

30、前台兼容性问题有哪些？

主要是常用浏览的（前端）API差异，渲染差异，等等

31、请解释下列返回码的含义：200,302,400,403,500,502

200：请求成功

302：请求的资源临时从不同的 URI响应请求。(资源临时重定向)

400：错误请求（请求的参数错误或者服务器不理解请求的语法）

402：10.4.3 402 Payment Required   This code is reserved for future use.

该状态码是为了将来可能的需求而预留的。

500：服务器端错误

502：网关或代理无效/无响应，网络错误

32、session和cookie的区别？

cookie是浏览器端，Cookie是访问某些网站以后在本地存储的一些网站相关的信息，下次再访问的时候减少一些步骤，是以key,value的形式；

session是服务器端，一种用来存放用户数据的类HashTable结构。