前端知识点总结-CSDN博客

一、前端优化网站性能

减少 HTTP 请求数量（CSS Sprites小图合并一张图、合并 CSS 和 JS 文件、采用 lazyLoad懒加载）
控制资源文件加载优先级（先加载css再加载js，因为加载执行js的时候会出现阻塞，后面加载js就避免了页面错乱和白屏等问题）
利用浏览器缓存
浏览器HTTP缓存机制。浏览器HTTP缓存可以分为强缓存和协商缓存。强缓存和协商缓存最大也是最根本的区别是：强缓存命中的话不会发请求到服务器（比如chrome中的200 from memory cache），协商缓存一定会发请求到服务器，通过资源的请求首部字段验证资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的实体，而是通知客户端可以从缓存中加载这个资源（304 not modified）。
减少 DOM 操作

二、vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

三、水平垂直居中的常见方法

1.行内元素 text-align：center vertical-align：middle

2.块级元素（绝对定位、display：table、flex布局）

四、移动端适应不同屏幕的几种方案

1、rem（设定100px=1rem计算，修改html fontsize来进行缩放，即html.style.fontsize=document.documentElement.ClientWidth x 100/设计稿宽度 px）一般宽高用rem字体大小用px，这样屏幕大的可以显示更多内容；

(function (designWidth) {
	const rem = () => {
		 var docEl = document.documentElement;
		 const w = docEl.clientWidth;
		//const w = document.clientWidth;
		console.log('w',w);
		const fs = w * 100 / designWidth;
		document.querySelector('html').style.fontSize = fs + 'px';
	}
	rem();
	window.onresize = function(){
		rem();
	}
	window.addEventListener('resize', () => {
		rem();
	});
})(750);
复制代码

我们只需设计稿（当前主导的机型750px）宽度完成一套页面，当去到其他设备时，因为我们用的都是rem值，只需要通过JS动态获得当前的dw，再通过动态获取的dw改变html的font-size值，页面的其他元素也会因为html的改变而进行等比例缩放。

2、用zoom属性来缩放，html.style.zoom=0.5；

3、引用一个可以自动缩放的flexible.js来缩放。

五、移动端常见的兼容性问题

1.300ms延时（fastclick.js）

2.ios 滚动不流畅（-webkit-overflow-scrolling：touch）

3.1px的边框会变粗的问题，可以用2px的背景图，缩小0.5来实现；伪类模拟

4.一些情况下对非可点击元素如（label,span）监听click时间，ios下不会触发，css增加cursor:poiner就搞定了

六、cookies,sessionStorage,localStorage的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

七、如何实现浏览器内多个标签页之间的通信

WebSocket、SharedWorker；也可以调用localstorge、cookies等本地存储方式； localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常

八、js的基本数据类型 Undefined、Null、Boolean、Number、String

九、JavaScript原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。关系：instance.constructor.prototype = instance.__proto__

特点： JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

十、Javascript如何实现继承

1、构造继承2、原型继承3、实例继承4、拷贝继承

十一、javascript创建对象的几种方式

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。1、对象字面量的方式

十二、闭包

使用闭包主要为了设计私有的方法和变量，闭包的有点事可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。

闭包的特性：1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数

应用场景，设置私有变量的方法、回调函数、通过自动执行的匿名函数封装模块
如模块封装：

var mod = (fucntion () {
	var a = 1;
	var fn1 => () {
		console.log(a);
	}
	var fn2 => () {
	    console.log(a);	}

	return {
		fn1,
		fn2
	}
})();

mod.fn1();
mod.fn2();
复制代码

不适用场景：返回闭包的函数是个非常大的函数
闭包的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏

十三、ajax是什么，如何创建ajax

ajax的全称：Asynchronous Javascript And XML。异步传输+js+xml。所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

十四、解决ajax无法后退的问题

html5里引入了新的API，即：history.pushState,history.replaceState 可以通过pushState和replaceSate接口浏览器历史，并且改变当前页面的URL onpopstate监听后退

十五、什么是跨域，解决跨域的几种方式

跨域是由于浏览器的同源策略，不同协议、域名、端口的请求不能正常进行通信。

跨域的解决方法

1.代理服务器（同源策略是针对浏览器的，对于服务器是没有限制的，所以只需要制作一个代理服务器，然后将原来的请求转发到目标服务器即可。）

2.websocket

JSONP:
- 由于同源策略的限制，XMLHttpRequest只允许请求当前资源（域名、协议、端口）的资源，script标签没有同源限制，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
- 通过动态<script>元素使用，使用时为src制定一个跨域url。回调函数处理JSON数据

　　　优点：兼容性好，简单易用，支持浏览器与服务器双向通信

　　　缺点：只支持GET请求

var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";  
var script = document.createElement('script');  
script.setAttribute('src', url);  //load javascript   
document.getElementsByTagName('head')[0].appendChild(script);    
//回调函数 
function callbackfunction(data){ 
    var html=JSON.stringify(data.RESULTSET); 
    alert(html); 
} 复制代码

CORS：
- 服务器端对于CORS的支持，只要就是通过设置Access-Control-Allow-Orgin来进行的。如果浏览器检测到响应的设置，就可以允许ajax进行跨域访问。
- 通过设置Access-Control-Allow-Orgin来允许跨域，cors可以用ajax发请求获取数据，但是兼容性没有jsonp好
通过修改document.domain来跨子域
- 将子域和主域的doucment.domain设为同一个主域，前提条件：这两个域名必须属于同一个基础域名！而且所用的协议，端口都要一致
- 主域相同的使用document.domain
使用window.name来进行跨域
- window对象有个name属性，该属性有个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name。每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
使用HTML5中心引进的window.postMessage方法来跨域传送数据
还有flash，在服务器上设置代理页面等跨域方式。

十六、jsonp的原理

jsonp的原理是利用script标签的src属性没有跨域的限制，从而可以在本地定义一个函数，拿到服务器返回的js代码对本地函数的执行。

十七、webpack常用到的功能