双向绑定的原理：
把 Dep / Observer/ Watcher几个类的关系，
如何做到双向绑定、依赖的更新怎么处理
diff的原理：
webpack不打包某个模块：
配置webpack不打包第三方包_金胜涛的博客-CSDN博客
Webpack打包构建太慢了？试试几个方法 - -渔人码头- - 博客园
js内存管理：
防抖，节流：
防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。
节流 ：也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。
微前端通信
基于qiankun微前端的通信方案 - 世界之魂 - 博客园
基于 qiankun 的微前端最佳实践（图文并茂） - 应用间通信篇 - SegmentFault 思否
微前端工程之间的通讯_左手121的博客-CSDN博客_微前端通信
deffer 和 async 的区别。
defer 和 async 的区别 - 张啊咩 - 博客园
缓存都有哪些方式，
什么是强缓存，什么是协商缓存，它们的返回码分别是什么，【浏览器缓存主要有两类：缓存协商：Last-modified ，Etag 和彻底缓存：cache-control，Expires。】
【强缓存： 服务器通过设置http中hdader的Expires和cache-control字段告诉浏览器换存的有效期。】
【协商缓存：简单的说，协商缓存就是通过服务器来判断缓存是否可用。】
Last-Modified标注的最后修改只能精确到秒级
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。
Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，
一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。【协商缓存--304和强制缓存--200】
而状态码为200的时候一般会有四种情况：
一种是直接返回200，没有任何其他的标志，
另一种是Status Code: 200 OK (from memory cache)，
还有一种是Status Code: 200 (from disk cache)。
最后一种不是太常见，Status Code: 200 (from Service Worker).
后面这三种状态码看到的效果是灰色的，其实从给出的信息也能看出来是从缓存中获取上数据。200 form memory cache
不访问服务器，一般已经加载过该资源且缓存在了内存当中，直接从内存中读取缓存。
浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache。200 from disk cache
不访问服务器，已经在之前的某个时间加载过该资源，直接从硬盘中读取缓存，
关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。304 Not Modified
访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。
Service Worker：
这个东西其实本质上时服务器和客户端之间的代理服务器，一般我们在使用react开发的时候，
会发现在根目录出现了一个server-worker.js文件，
这个东西就是和service Worker缓存相关的，
他会根据网络的状态做出不同的缓存策略，有时候断网了，
之前访问过的接口有可能依然会返回数据，其数据来源就是从其缓存中读取。memory cache：
这个是将资源缓存在了内存中。事实上，所有的网络请求都会被浏览器缓存到内存中，
当然，内存容量有限，缓存不能无限存放在内存中，因此，注定是个短期缓存。而其控制权在于浏览器。disk cache：
与内存缓存相对的，这个是将资源缓存在硬盘中。
虽然相比于内存，硬盘的读取速度要慢很多，但总比没有强。
硬盘缓存的控制权在后端，通过什么控制呢？
通过HTTP响应头控制，也就是我们在上面说到的catche-control和expires
硬盘缓存的控制权在后端（一般在服务器中进行设置）
哪些资源存在 memory cache
哪些存在 disk cache？1、memory cache：一般脚本、字体、图片会存在内存中
2、disk cache：一般非脚本会存在磁盘中，如CSS等
3、资源大小数值：从服务器下载最新资源
4、报文大小：请求服务器发现资源没更新，使用本地资源浏览器缓存有哪些，通常缓存有哪几种_高先生的猫的博客-CSDN博客_浏览器缓存有哪几个
什么是强缓存和协商缓存？_ZZ_SUPERR的博客-CSDN博客
区分http请求状态码来理解缓存（协商缓存和强制缓存） - 方帅 - 博客园
memoryCache 和 diskCache 的相关总结 - Syw_文 - 博客园
http/https/http2.0。三次握手四次挥手，
http、https、tcp三次握手，四次挥手学习笔记_fireworks_l的博客-CSDN博客_https tcp 三次握手
Http/Https面试题整理+三次握手四次挥手 - albert飞的博客 - 博客园
http三次握手四次挥手详解 - 一支会记忆的笔 - 博客园
https 为什么安全为什么慢
首先，很多人还是会觉得HTTPS实施有门槛，这个门槛在于需要权威CA颁发的SSL证书。
从证书的选择、购买到部署，传统的模式下都会比较耗时耗力。其次，HTTPS普遍认为性能消耗要大于HTTP，因为与纯文本通信相比，
加密通信会消耗更多的CPU及内存资源。
跟 http 的区别，http2.0 都有哪些优化
CSRF 和 XSS 攻击的原理和防范措施
xss 攻击原理：
攻击者提交恶意代码。
浏览器执行恶意代码。xss 防范措施：
输入过滤
避免拼接 HTMLCSRF 攻击原理：
CSRF（Cross-site request forgery）跨站请求伪造：
攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。
利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。CSRF 防范措施：
阻止不明外域的访问
提交时要求附加本域才能获取的信息
骨架屏
jwt原理
标准盒子模型与ie盒子模型的区别
w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分
IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，
IE盒子模型的content部分包含了padding和border
css3新增的伪类
0.5像素怎么实现：
一、采用meta viewport的方式，这个也是淘宝触屏采用的方式
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />
二、采用 border-image的方式
三、采用background-image的方式
四、采用transform: scale()的方式
Doctype有什么作用?
浏览器如何渲染页面
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，
阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
2.构建渲染树（Render Tree）。
3.页面的重绘（repaint）与重排（reflow，也有称回流）。
页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，
浏览器对页面进行重绘或是重排.
vue的生命周期详解
vue父子组件生命周期的创建
父子组件在加载的时候，执行的先后顺序为父beforeCreate->父created->
父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。
router 和 route 的区别
$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。
【跟windo。location有点像】
$router对象是全局路由的实例，是router构造方法的实例。
vue生命周期大白话
Vue生命周期
Vue是如何渲染页面的，渲染过程以及原理代码 - 小易的博客 - 博客园
beforeCreate(创建前): 在数据观测和初始化事件还未开始,data、watcher、methods都还不存在，但是$route已存在，可以根据路由信息进行重定向等操作。
created(创建后)：在实例创建之后被调用，该阶段可以访问data，使用watcher、events、methods，也就是说 数据观测(data observer) 和event/watcher 事件配置 已完成。但是此时dom还没有被挂载。该阶段允许执行http请求操作。
beforeMount (挂载前)：将HTML解析生成AST节点，再根据AST节点动态生成渲染函数。相关render函数首次被调用(划重点)。
mounted (挂载后)：在挂载完成之后被调用，执行render函数生成虚拟dom，创建真实dom替换虚拟dom，并挂载到实例。可以操作dom，比如事件监听
beforeUpdate：v m . d a t a 更 新 之 后 ， 虚 拟 d o m 重 新 渲 染 之 前 被 调 用 。 在 这 个 钩 子 可 以 修 改 vm.data更新之后，虚拟dom重新渲染之前被调用。在这个钩子可以修改vm.data更新之后，虚拟dom重新渲染之前被调用。在这个钩子可以修改vm.data，并不会触发附加的冲渲染过程。
updated：虚拟dom重新渲染后调用，若再次修改$vm.data，会再次触发beforeUpdate、updated，进入死循环。
beforeDestroy：实例被销毁前调用，也就是说在这个阶段还是可以调用实例的。
destroyed：实例被销毁后调用，所有的事件监听器已被移除，子实例被销毁。
Vue在哪个生命周期阶段调用异步请求最佳
异步请求在哪个阶段都可以调用，因为会先执行完生命周期的钩子函数之后，才会执行异步函数，但如果考虑用户体验方面的话，在created中调用异步请求最佳，用户就越早感知页面的已加载，毕竟越早获取数据，在mounted实例挂载的时候就越及时。
跨浏览器兼容适配方案的深入理解和实践经验
一、 CSS样式兼容
1. FLOAT闭合（clearing float）
【原因：如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。】
【使用clear:both;清除了前面元素设置的float属性】
1) 给父DIV也设上float
2) 在所有子DIV后新加一个空DIV（目前Ext是这么做的）
3) 万能 float 闭合
<style> /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ </style>2.截字省略号
.hh { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }3. cursor:hand和cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法：统一使用pointer
4. CSS透明
几款浏览器对透明度的支持方式各不相同，为了保证在IE, Firefox, Chrome, Safari等主流浏览器下都能正常显示透明度的效果，我们可以定义一个透明度的class，因为一写就要写3条，省的每次都复制来复制去了。
具体代码如下：
.transparent{ filter:alpha(opacity=60); /*支持 IE 浏览器*/ -moz-opacity:0.6; /*支持 FireFox 浏览器*/ opacity:0.6; /*支持 Chrome, Opera, Safari 等浏览器*/ }5.css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding。
二、 JavaScript兼容
1. children与childNodes
【IE提供的children、childNodes和firefox下的childNodes的行为是有区别的，firefox下childNodes会把换行和空白字符都算作父节点的子节点，而IE的childNodes和children不会。】
2. firefox和ie的事件
【window.event只能在IE下使用，而不能用在Firefox下，这是因为Firefox的event只能在事件发生的现场使用。 Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。】
3.HTML对象获取问题
FireFox获取方式document.getElementById("idName")
ie使用document.idname或者document.getElementById("idName")
解决办法：统一使用document.getElementById("idName");
4. const问题
在Firefox下，可以使用const关键字或var关键字来定义常量；
IE下，只能使用var关键字来定义常量；
解决方法：统一使用var关键字来定义常量。
5.frame问题
a)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象，frameId和frameName可以同名；
Firefox：只能使用window.frameName来访问这个frame对象；
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象；
b) 切换frame内容
在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容；
如果需要将frame中的参数传回父窗口（注意不是opener，而是parent），可以在frame中使用parent来访问父窗口。例如：
parent.document.form1.filename.value="Aqing";
6. body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在；
7. firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法：因为firefox与IE都支持DOM，因此全部使用obj.parentNode
8.innerText的问题
innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；
解决方法： if (navigator.appName.indexOf("Explorer") > -1) { document.getElementById('element').innerText = "my text"; } else { document.getElementById('element').textContent = "my text"; }9.AJAX获取XMLHTTP的区别
var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } elseif (window.ActiveXObject) { // IE的获取方式 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }注意：在IE中，xmlhttp.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。
1-1.条件性注释（Conditional comments）
<!--[if !IE]> 除IE外都可识别 <![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->方法二：使用媒体查询语句+-ms-high-contrast属性
CSS的媒体查询语句(media query)是一种高级的CSS条件语句，它能根据一些属性和属性值计算判断CSS是否可以生效。
方法三：使用Javascript判断浏览器的类型
先用JavaSCript判断是否是IE浏览器，如果是，就在页面的<html>标记上添加一个“ie”的类名：
var ms_ie = false; var ua = window.navigator.userAgent; var old_ie = ua.indexOf('MSIE '); var new_ie = ua.indexOf('Trident/'); if ((old_ie > -1) || (new_ie > -1)) { ms_ie = true; } if (ms_ie) { document.documentElement.className += " ie"; }2.CSS hack【重点】
<style type="text/css"> .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色 */ background-color: #FF0000\9; /*IE8及以上的浏览器会显示红色 测试8-10都显示红色*/ background-color: #ff6600\0; /*IE8及以上的浏览器会显示橙色 测试8-11都显示橙色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色 测试5、7蓝色*/ +background-color: #FFFF00; /*IE6、IE7会变为黄色 测试7黄色*/ _background-color: #009933; /*IE6会变为绿色 测试 5绿色*/ } </style>
git工作流
功能开发工作流
Gitflow工作流
css样式优化
css优化方法-需要优化css代码地方
1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式（较大站点需要注意）。
5、条理化css代码。
css样式文件优化方法：
1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。
2，减少css嵌套，最好不要套三层以上。
3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。
4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。
5，减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些必须 的东西是不能少的。
6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。
7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里， 这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。
8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。
9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的 朋友可以选择normolize.css
10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种 十分实用的技巧，极大减少了http请求。
11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十 分好的)，
12，GZIP压缩，Gzip是一种流行的文件压缩算法。
常用的css优化样式
一、多行文本超出显示省略号
二、隐藏滚动条
三、在css中使用height和line-height设置select的高度，在有些Android版本中是无效的，可以添加
四、当input的type为number时，会有默认样式， 可使用伪类清除默认样式
五、白色字看起来比较粗-关闭消除锯齿功能
常见web性能优化
1.减少HTTP请求
改善响应时间最简单的途径就是减少HTTP请求的数量；
每下载一个图片、js文件、css文件等等都是一次HTTP请求，所以要尽可能的少下载静态资源；
使用CSS雪碧图
尽量合并、压缩CSS、JS文件，或者直接写在页面上
2.使用CDN加速
通俗的说，服务器离用户更近，HTTP 请求的响应时间将缩短；
CDN（内容发布网络）是一组分布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容；
3.利用缓存
CDN缓存
DNS缓存
DNS是“域名系统”的缩写，它的工作是将域名和主机名转化为服务器主机的 IP 地址；
浏览器缓存之客户端缓存
无需请求的memory cache，disk cache；
需要发请求验证的Etag、Last-Modified304；
H5新增的 localStorage、sessionStorage；
合理利用以上缓存，可以很大程度上提高前端性能。
4.HTML部分
标签语义化，即用合理、正确的标签来展示内容，比如 h1-h6 定义标题；
语义化的优点：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构；
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重；
方便其它设备解析，如盲人阅读器根据语义渲染网页；
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS关系更和谐；
5.CSS部分
将CSS放在HTML的上面部分，这个策略不能提高网站的加载速度，
但它不会让访问者长时间看着空白屏幕或者无格式的文本（FOUT）等待。
如果网页大部分可见元素已经加载出来了，访问者才更有可能等待加载整个页面，
从而带来对前端的优化效果。这就是知觉性能。
加载页面时，link标签引入的CSS被同时加载；
@import引入的CSS将在页面加载完毕后被加载，
也就是说，@import会组织浏览器的并行下载；
link是HTML的元素，不存在兼容性问题；@import只有IE5+才能识别；
合并CSS代码，比如用 margin 来代替 margin-top、margin-bottom、margin-left、margin-right；
减少重排，重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。
减少重绘，当元素的外观（如color、background、visibility等属性）发生改变时，
会触发重绘。在网站的使用过程中，重绘是无法避免的。
不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。
不过我们仍需要避免不必要的重绘，如页面滚动时触发的hover事件，
可以在滚动的时候禁用 hover 事件，这样页面在滚动时会更加流畅；
减少使用昂贵的属性，在浏览器绘制屏幕时，
所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。
如 box-shadow、border-radius、filter、opacity、:nth-child等；
合并、压缩CSS文件
6.JS部分
注意作用域，避免全局查找，访问全局变量比访问局部变量慢，是因为需要遍历作用域链，查找作用域链需要额外的时间。
优化循环，当 if-else 较多时，建议使用 switch 语句。
当分支较多时，用 switch 的效率是很高的，因为 switch 是随机访问的，
就是确定了值之后直接跳转到那个特定的分支，
而 if-else 是遍历所有可能值，直到找到合适的分支；
最小化语句数，声明多个变量时，可以使用一个 var 关键字来声明，变量之间用逗号表示；
使用数组或对象字面量来新建数组或对象，如 var arr = [1,2,3] ；var obj = {a:1,b:2}；
JS的执行尽量脱离DOM树，限制DOM操作的次数优化DOM交互
使用事件代理，页面上的事件处理程序的数量和页面响应用户交互的速度之间有个负相关。
所以为了减少事件处理程序，尽量使用事件委托技术。
提高代码的可阅读性，比如正确标记变量，封装某个重复的行为，合理的注释等。
使用cssText、className一次性改变属性；
JS定义行为，html定义内容，CSS定义外观；
seo处理
前端如何进行seo优化
前端如何进行seo优化_阵雨丶的博客-CSDN博客_前端seo优化
前端需要注意哪些SEO
前端开发SEO搜索引擎优化方案
http协议
HTTP协议原理和深入
对服务器的配置和优化有所了解
Linux从安装Nginx到部署前端项目
详尽&全面的前端部署
【你应该了解的】详尽&全面的前端部署（从零起步，前端上线不用愁） - 掘金
一个前端必会的 Nginx免费教程
重排，回流，重绘
①重排（reflow）：渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口的尺寸发生变化、删除或添加DOM元素，修改了影响元素盒子大小的CSS属性（诸如：width、height、padding）。
②重绘（repaint）：绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘
7.vue路由权限,vue路由守卫
8.vue路由权限
9.vue路由守卫
11.keep-alive的原理
12.$set 和 $fourceUpdate
13.$nextTick 和 $fourceUpdate 的区别
14.webpack有哪些可配置的点，哪些收益比较高
以上待补充
扫一扫
3293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
