快捷搜索:

前端知识分享

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、压缩cssjs文件;2、合并jscss文件,减少http请求;3、外部js、css文件放在页面底部;4、减少dom操作,使用innerhtml代替dom元素。


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

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

21、MVC和MVVM的区别?

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前端开发,如何提高页面性能优化?

内容方面:

1.减少 HTTP 请求 (Make Fewer HTTP Requests)

2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS:

1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4.避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript :

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4. 移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image):

1.优化图片

2 不要在 HTML 中使用缩放图片

3 使用恰当的图片格式

4 使用 CSS Sprites 技巧对图片优化

内容方面: 1.减少 HTTP 请求 (Make Fewer HTTP Requests) 2.减少 DOM 元素数量 (Reduce the Number of DOM Elements) 3.使得 Ajax 可缓存 (Make Ajax Cacheable) 针对CSS: 1.把 CSS 放到代码页上端 (Put Stylesheets at the Top) 2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 3.精简 JavaScript 与 CSS (Minify JavaScript and CSS) 4.避免 CSS 表达式 (Avoid CSS Expressions) 针对JavaScript : 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External) 3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS) 4. 移除重复脚本 (Remove Duplicate Scripts) 面向图片(Image): 1.优化图片 2 不要在 HTML 中使用缩放图片 3 使用恰当的图片格式 4 使用 CSS Sprites 技巧对图片优化
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结构。

经验分享 程序员 职场和发展