纯前端如何实现跳转页面而不改变URL（不使用iframe）？
点击联系发帖人
时间：2022-06-28 20:58
1.你是怎么理解HTML语义化
HTML语义化简单来说就是用正确的标签来做正确的事。
比如表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等。
Step 2：说说为什么需要使用语义化标签
前期：前端工作主要由后端人员完成，也就是打野阶段，使用的是table布局
中期：美工人员使用div+css来完成
当前：专业的前端开发应该使用合适的标签来表达正确含义的页面结构
让页面具有良好的结构和含义，可以有效提高：
可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；
可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量；
国际化：全球只有13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护
简单粗暴：就是一种移动端页面
深入点：微信上的一种移动营销页面
5.CSS3新增伪类有哪些：
CSS3新增伪类举例：
p:last-of-type 选择属于其父元素的最后元素的每个
p:only-of-type 选择属于其父元素唯一的元素的每个
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
6.a标签中 如何禁用href 跳转页面 或 定位链接
7. canvas在标签上设置宽高 和在style中设置宽高有什么区别
canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值 。
8.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
iframe是一种框架，也是一种很常见的网页嵌入方
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。
11.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
12.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。复制代码
你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
5.把所有<和&特殊符号用编码表示
6.给所有属性赋一个值
7.不要在注释内容中使“--”
8.图片必须有说明文字复制代码
由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~
1. 页面渲染时，dom 元素所采用的 布局模型,可通过box-sizing进行设置。根据计算宽高的区域可分为：
2. ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法如下：
3.几种获得宽高的方式 :
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
这种方式是根据元素在视窗中的绝对位置来获取宽高的
这个就没什么好说的了，最常用的，也是兼容最好的。
4.拓展各种获得宽高的方式 :
5.css优先确定级：
每个选择器都有权值，权值越大越优先
继承的样式优先级低于自身指定样式
权值相同时，靠近元素的样式优先级高 顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）
由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~
1.JS中的垃圾回收机制
必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。
这段话解释了为什么需要系统需要垃圾回收，JS不像C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。例如：
垃圾回收的方法：标记清除、计数引用。
这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为”进入环境“,从逻辑上讲，永远不能释放进入环境的变量所占的内存，永远不能释放进入环境变量所占用的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记为离开环境。
垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问所以会被删除，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。
另一种不太常见的方法就是引用计数法，引用计数法的意思就是每个值没引用的次数，当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为1,；相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用值引用次数就减1，当这个值的引用次数为0的时候，说明没有办法再访问这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为0的这些值。
用引用计数法会存在内存泄露，下面来看原因：
在这个例子里面，objA和objB通过各自的属性相互引用，这样的话，两个对象的引用次数都为2，在采用引用计数的策略中，由于函数执行之后，这两个对象都离开了作用域，函数执行完成之后，因为计数不为0，这样的相互引用如果大量存在就会导致内存泄露。
特别是在DOM对象中，也容易存在这种问题：
这样就不会有垃圾回收的过程。
一个模块是能实现特定功能的文件，有了模块就可以方便的使用别人的代码，想要什么功能就能加载什么模块。
Commonjs：开始于服务器端的模块化，同步定义的模块化，每个模块都是一个单独的作用域，模块输出，modules.exports，模块加载require()引入模块。
AMD：中文名异步模块定义的意思。
requireJS实现了AMD规范，主要用于解决下述两个问题。
1.多个文件有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
2.加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应的时间越长。
语法：requireJS定义了一个函数define，它是全局变量，用来定义模块。
requirejs定义了一个函数define,它是全局变量，用来定义模块：
在页面上使用模块加载函数：
总结AMD规范：require（）函数在加载依赖函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块加载成功，才会去执行。
因为网页在加载js的时候会停止渲染，因此我们可以通过异步的方式去加载js,而如果需要依赖某些，也是异步去依赖，依赖后再执行某些方法。
3.对象深度克隆的简单实现
ES5的常用的对象克隆的一种方式。注意数组是对象，但是跟对象又有一定区别，所以我们一开始判断了一些类型，决定newObj是对象还是数组~
由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~
2.什么是vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
否则vue只会替换其内部属性而不会触发过渡效果。
在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。
当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。
7.说出至少 4 种 vue 当中的指令和它的用法
8.vue中子组件调用父组件的方法
第一种方法是直接在子组件中通过this.
emit向父组件触发一个事件，父组件监听这个事件就行了。
第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。
9.vue中父组件调用子组件的方法
父组件利用ref属性操作子组件方法。
10.vue页面级组件之间传值
11.说说vue的动态组件。
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。
由于文章篇幅限制，不可能将所有面试题以文字形式展示出来，本篇为大家精选了一些面试题，有需要的程序猿（媛）可以到文末领取哦~
1xx: 接受，继续处理
200: 成功，并返回数据
203: 成为，但未授权
204: 成功，无内容
205: 成功，重置内容
206: 成功，部分内容
301: 永久移动，重定向
302: 临时移动，可使用原有URI
304: 资源未修改，可使用缓存
400: 请求语法错误
401: 要求身份认证
get: 缓存、请求长度受限、会被历史保存记录
o无副作用(不修改资源)，幂等(请求次数与资源无关)的场景
post: 安全、大数据、更多编码类型
建立连接前，客户端和服务端需要通过握手来确认对方:
客户端发送 syn(同步序列编号) 请求，进入 syn_send 状态，等待确认
面试是跳槽涨薪最直接有效的方式，现在可以开始准备明年春季的面试了，各位做好面试造飞机，工作拧螺丝的准备了吗？
掌握了这些知识点，面试时在候选人中又可以夺目不少，暴击9999点。机会都是留给有准备的人，只有充足的准备，才可能让自己可以在候选人中脱颖而出。
快速入手通道：（）下载！诚意满满！！！
整理不易，觉得有帮助的朋友可以帮忙点赞分享支持一下小编~你的支持，我的动力；祝各位前程似锦，offer不断！！！
43、vue常用的修饰符？
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
45、回答以下代码，alert的值分别是多少？
因为a为全局变量，函数中改变的也是全局a46、new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
49、vue组件中data为什么必须是一个函数？
因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。
而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
doctype是一种标准通用标记语言文档类型声明，目的是告诉标准通用标记语言解析器要用什么样的文档类型定义DTD来解析文档，声明必须是HTML文档的第一行，位于html标签之前
52、如何实现浏览器内多个标签页之间的通信
53、响应式和自适应有什么区别?
响应式设计（Responsive design）：一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
自适应设计（Adaptive Design）：是为同类别的物理设备建立三种不同的网页（PC），检测到设备分辨率大小后调用相应的网页。
54、Vue 中怎么自定义指令？
指令：分为全局指令和局部指令
//注册一个全局自定义指令 v-focus
//当绑定的元素插入到DOM中时...
55、 什么是事件代理，它的原理是什么
事件代理：通俗来说就是将元素的事件委托给它的父级或者更外级元素处理 原理：利用事件冒泡机制实现的
优点：只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有元素都绑定事件，减少内存空间占用，提升性能; 动态新增的元素无需重新绑定事件
watch 为了监听某个响应数据的变化。
computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。
所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
break语句 当前循环中退出
continue语句 继续下一个循环语句
59、列举浏览器对象模型中常用的对象，并列举window对象常用的方法至少五个
60、vue自定义组件@click点击失效的原因和解决办法
原因：click事件作用于组件内部，如果组件内没有写click事件，便会无响应。
2.可以用：将事件传递至组件内，也符合组件间的单向数据流，我就是这样解决的
3.使用$emit来实现事件传递
1.localStorage长期存储数据，浏览器关闭数据后不丢失；
3.cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
5.有期时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；
63、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
行内元素：会水平方向排列，不能包含块级元素，设置width无效，height无效，可设置line-height,margin上下无效，padding上下无效
块级元素：各占据一行，垂直方向排列，可设置width、height等属性,从新行开始结束接着一个断行
64、ie和标准浏览器，有哪些兼容的写法？
65、事件委托是什么？如何阻止事件冒泡？如何阻止默认事件？
事件委托:利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行
66、简述下面页面跳转区别
wx.navigateTo():保留当前页面，跳转到应用内的某个页面。不能跳转tabBar页
wx.redirectTo():关闭当前页面，跳转到应用内的某个页面。不能跳转tabBar页
可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
wx.reLaunch():关闭所有页面，打开到应用内的某个页面
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行
promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行
async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行
68、小程序的声明周期函数
onLoad()页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow()页面显示/切入前台时触发
onReady()页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide()页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
70、Vue 组件中data 为什么必须是函数
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
72、v-show和v-if指令的共同点和不同点？
共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同
v-show：本质是通过控制css中的display设置为none，控制隐藏，只会编辑一次；
v-if是动态的向DOM树内添加或删除DOM元素，若初始值为false，就不会编译了，而且v-if不停的销毁和创建会比较销毁性能；
总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
73、Vue的双向数据绑定原理是什么？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
74、canvas在标签上设置宽高和在style中设置宽高有什么区别？
canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度，还会出现被拉伸的效果，和设置的值不符合
如果canvas的width和height没指定或值不正确，就被设置成默认值
75、vue第一次页面加载会触发哪几个钩子？
传参可以使用params和query两种方式。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
5、二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。
77、vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中的状态管理器
场景：当页面应用中，组件之间的状态、音乐的播放、登录状态、加入购物车等
push()方法是向数组末尾添加一个或者多个元素，并返回新的长度。
pop()方法删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值unshift()方法是向数组的开头添加一个或多个元素，并且返回新的长度。
Shift()方法用于把数组的第一个元素从其中删除，并返回被删除的值
80、哪些操作会造成内存泄露
内存泄露指任何对象在不再拥有或不再需要它之后依然存在
setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露
循环（两个对象彼此引用且彼此保留）
82、CSS3新增伪类有那些?
p:only-child 选择属于其父元素的唯一子元素 :checked 单选框或复选框被选中。83、 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
84、下面代码输出什么？
85、解释一下变量的提升
变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。
严格模式用于标准化正常的JavaScript语义。严格模式可以嵌入到非严格模式中，关键字'use strict'。使用严格模式后的代码应遵循JS严格的语法规则。例如，分号在每个语句声明之后使用。
87、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
88、vue更新数组时能够触发视图更新的数组方法
created(创建完成):在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted(挂载完成):在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
90、为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
display：none 不显示对应的元素(不占位)，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素(占位)，在文档布局中仍保留原来的空间（重绘）
null 表示一个对象被定义，但是放了个空指针，转换为数值时为0
undefined 表示声明的变量未初始化，转换为数值时为NaN
93、同步和异步的区别？
同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。
同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
94、请给出异步加载js方案，不少于两种
95、项目做过哪些性能优化？
1、减少HTTP请求数
6、减少DOM元素数量
主要是通过 children，它同样是一个数组
97、媒体查询是什么?怎么使用？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。
Promise.all可以将多个Promise实例包装成一个新的Promise实例。用于将多个Promise实例，包装成一个新的Promise实例。都成功才会返回成功
promise.race类似于Promise.all() ,区别在于 它有任意一个返回成功后，就算完成，但是 进程不会立即停止
101、跨域请求的解决办法有哪些？
古老的方法 JSONP跨域（动态创建script来读取他域的动态资源）
跨域资源共享（CORS）
nodejs中间件代理跨域
102、vue的指令有哪些
103、vue的计算属性和方法有什么区别
methods中定义的函数，只要页面上调用，就无条件的执行
computed中的计算属性依赖的数据不发送变化时，只读取，不会重新计算，计算属性的结果无需在data中定义，在页面中可以直接使用，会在vue实例上产生一个缓存，如果依赖的数据不发生变化，则会读取缓存
用于保留组件状态或避免从新渲染(缓存的作用 | 缓存使用频率高的页面，提高渲染效率)
可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中
include:字符串或者正则表达式。只有匹配的组件会被缓存
exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存。
105、列举vue生命周期钩子函数
hash：在地址栏url中的#符号，虽然在url中，却不会被包含在http请求中，对后端没有影响，因此改变不会重新加载页面
history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求
107、箭头函数有什么特点
不能使用 new 构造函数 箭头函数不能当作Generator函数108、vue组件间如何传值
父子组件通信 --通过自定义属性和props来实现
子父组件通信 --通过自定义事件和$emit实现
109、vue等单页面应用及其优缺点
用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小 前后端分离，如vue项目 完全的前端组件化，前端开发不再以页面为单位，更多采用组件化思想，代码结构和组织方式更加规范，便于修改和调整 首次加载页面的时候需要加载大量静态资源，相对时间相对较长 不利于seo优化，单页页面，数据渲染前，意味着没有seo 浏览器的前进、后台导航不能使用 能够原封不动的把嵌入页面展示出来 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决 会产生很多页面，不容易管理 iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化 很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差 iframe框架页面会增加服务器的http请求，对于大型网站是不可取的 现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发111、css选择器有哪些？哪些属性可以继承
需要在border外侧添加空白时 上下相连接的两个盒子之间的空白，需要相互抵消时 需要在border内侧添加空白时 上下相连的两个盒子之间的空白，希望等于两者之和时113、介绍js的基本数据类型
114、介绍js有哪些内置对象
不在同一行声明多个变量
使用字面量方式创建对象、数组，（替代new Array）
函数不应该有的时候有return，有的时候没有return
fon-in循环中的变量，用var关键字说明作用域，防止变量污染
116、如何实现数组的随机排序？
118、使用js实现获取文件扩展名？
119、列举几个你知道的js框架么？能讲出他们各自的优点和缺点？
jQuery：实现脚本与页面的分离，最少的代码做最多的事情，插件丰富/不向后兼容，插件兼容， AngularJs：双向数据绑定，模块化/无法完美兼容低版本，太笨重 vue：性能好，简单易用，前后的分离，单页面应用/不利于seo优化，报错不明显 React：虚拟DOM，跨浏览器兼容，模块化，单项数据流，兼容性好/不适合单独做一个完整的框架文档流：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素，即为普通流/文档流
文本流：文档的读取和输出顺序，也就是我们通常看到的由左到右、由上而下的读取和输出形式
ready：表示文档结构已经加载完成（不包含图片等非文字媒体文件）
onload：表示页面包含图片等文件在内的所有元素都加载完成
121、vue数据双向绑定原理
采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
封装组件：主要是为了解耦，具备高性能、低耦合，在通用组件的时候要留一个插槽
第一步：在compoents文件夹中新建一个vue文件
第二步：在main.js中全局引入，先import，再注册到VUE中
第三步：在任何页面直接使用自己定义的组件
当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。
127、vue-loader是什么？使用他的用途有哪些？
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时130、vue开发过程中用过的性能优化的方式？
3：三方插件懒加载（按需加载） 4:减少引入外部文件大小
1、尽量减少HTTP请求次数
终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。
CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；
图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；
内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。
减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！
2、减少DNS查找次数
域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入/newuri
浏览器会把用户指向到Location中指定的URL。头文件中的所有信息在一次跳转中都是必需的，内容部分可以为空。不管他们的名称，301和302响应都不会被缓存除非增加一个额外的头选项，如Expires或者Cache-Control来指定它缓存。<meat
/>元素的刷新标签和JavaScript也可以实现URL的跳转，但是如果你必须要跳转的时候，最好的方法就是使用标准的3XXHTTP状态代码，这主要是为了确保“后退”按钮可以正确地使用。
但是要记住跳转会降低用户体验。在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，因为在HTML文件被加载前任何文件（图像、Flash等）都不会被下载。
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问/astrology 时，实际上返回的是一个包含301代码的跳转，它指向的是/astrology/
连接新网站和旧网站是跳转功能经常被用到的另一种情况。这种情况下往往要连接网站的不同内容然后根据用户的不同类型（如浏览器类型、用户账号所属类型）来进行跳转。使用跳转来实现两个网站的切换十分简单，需要的代码量也不多。尽管使用这种方法对于开发者来说可以降低复杂程度，但是它同样降低用户体验。一个可替代方法就是如果两者在同一台服务器上时使用Alias和mod_rewrite和实现。如果是因为域名的不同而采用跳转，那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。
Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，“异步”并不异味着“即时”，这很重要。
为了提高性能，优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以查看Add an Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax：
让我们来看一个例子：一个为例，你可以看一下它的spirit image图像是怎样在onload中加载的。这个spirit image图像在中你可以看到如何在你输入内容时加载额外的页面内容。
有预期的加载：载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后用户抱怨“新的页面看起来很酷，但是却比以前慢”。问题可能出在用户对于你的旧站点建立了完整的缓存，而对于新站点却没有任何缓存内容。因此你可以在访问新站之前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。
7、减少DOM元素数量
一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。
大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。你在页面布局中使用表格了吗？你有没有仅仅为了布局而引入更多的<div>元素呢？也许会存在一个适合或者在语意是更贴切的标签可以供你使用。
使用无coockie域名存在静态内容的另外一个好处就是一些代理（服务器）可能会拒绝对coockie的内容请求进行缓存。一个相关的建议就是，如果你想确定应该使用example.org还是www.example.org作为你的一主页，你要考虑到coockie带来的影响。忽略掉www会使你除了把coockie设置到*.example.org（*是泛域名解析，代表了所有子域名译者dudo注）外没有其它选择，因此出于性能方面的考虑最好是使用带有www的子域名并且在它上面设置coockie。
设计人员完成对页面的设计之后，不要急于将它们上传到web服务器，这里还需要做几件事：
你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使用imagemagick中下面的命令行很容易检查：
如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。由于浏览器支持有限，设计者们往往不太乐意使用PNG格式的图片，不过这都是过去的事情了。现在只有一个问题就是在真彩PNG格式中的alpha通道半透明问题，不过同样的，GIF也不是真彩格式也不支持半透明。因此GIF能做到的，PNG（PNG8）同样也能做到（除了动画）。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
“我们要说的是：给PNG一个施展身手的机会吧！”
在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息（如EXIF信息）：
在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，而就是100万像素。
31、不要在HTML中缩放图像
那么你的图片（mycat.jpg）就应该是100×100像素而不是把一个500×500像素的图片缩小使用。
favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not
Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。
因此，为了减少favicon.ico带来的弊端，要做到：
文件尽量地小，最好小于1K
在适当的时候（也就是你不要打算再换favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。
33、保持单个内容小于25K
这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重要。
34、打包组件成复合文本
把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件（切记：HTTP请求是很奢侈的）。当你使用这条规则时，首先要确定用户代理是否支持（iPhone就不支持）。
我要回帖
更多关于 手机页面怎么调整 的文章
更多推荐
- ·哪些品牌的回转工业风机品牌排行榜前十名既实用又经济？请推荐几款性价比高的产品。
- ·李彦宏有时莫名其妙的感觉身体不舒服服会否自我百度诊断？
- ·我发现了蚂蚁作文2oσ个字森林新增获取方式后，如何通过ofo共享单车积累绿色能量？
- ·降低供应链成本的方法过高，有哪些降低成本的方法？
- ·亿迈的亚马逊跨境电商个人开店要多少钱半托管服务真的很出色吗？
- ·解放j6p原车柴暖一下不着了,后来关了从开启动不了电源灯一直闪烁是什么情况啦？
- ·有知道长胜正基公司的吗，它家的产品如何？
- ·行业内，长胜正基如何保证产品质量？
- ·扬子江药业集团的产品口碑怎么样？
- ·如何检验代购芬迪包包的真假？
- ·香港代购的lv如何辨别真伪？
- ·百度经验优质度如何提升？
- ·沐曦股票在那上市的？
- ·soul上谁能看到别人的信息有不雅语言呢?
- ·支付宝怎么改核酸报告要24小时的？
- ·纯前端如何实现跳转页面而不改变URL（不使用iframe）？
- ·怎么让图片拥有url？
- ·如图女孩子遇到正面持刀行凶哪个部位最容易被捅？捅到哪里会最深？
- ·大思英语网络课程学费高吗，一节课多少钱？
- ·观音老母和保家仙写在一张纸上对吗？
- ·东北话两个筷子不一个颜色怎么说？
- ·买东西时方言勒价什么意思？
- ·大家有知道北京的非凡画室怎么样的么？
- ·北京的美术考前培训机构那么多，哪个比较有名？
- ·脸上有痘痘是痤疮吗？
- ·2022中考普高的录取分数线大概是多少浙江桐庐？
- ·上虞区小学升初中满分多少？
