手机log是什么意思思，怎么使用？

来源：蜘蛛抓取(WebSpider) 时间：2022-10-10 08:24 标签： 手机log是什么意思

Logstash是一个开源数据收集引擎，具有实时管道功能。Logstash可以动态地将来自不同数据源的数据统一起来，并将数据标准化到你所选择的目的地。如下图所示：

数据往往以各种各样的形式，或分散或集中地存在于很多系统中。Logstash 支持各种输入选择 ，可以在同一时间从众多常用来源捕捉事件。能够以连续的流式传输方式，轻松地从您的日志、指标、Web 应用、数据存储以及各种 AWS 服务采集数据。

3、Logstash的过滤器：实时解析和转换数据

数据从源传输到存储库的过程中，Logstash 过滤器能够解析各个事件，识别已命名的字段以构建结构，并将它们转换成通用格式，以便更轻松、更快速地分析和实现商业价值。

Logstash 能够动态地转换和解析数据，不受格式或复杂度的影响，例如：

（1）利用 Grok 从非结构化数据中派生出结构
（2）从 IP 地址破译出地理坐标

尽管 Elasticsearch 是我们的首选输出方向，能够为我们的搜索和分析带来无限可能，但它并非唯一选择。

Logstash 提供众多输出选择，您可以将数据发送到您要指定的地方，并且能够灵活地解锁众多下游用例。

从官网下载，解压即可：

安装完毕之后，请先让我们通过最基本的Logstash管道来测试一下刚才安装的Logstash，如下所示：

备注：选项 -e 的意思是允许你从命令行指定配置

Logstash管道有两个必需的元素：输入和输出，以及一个可选元素：过滤器。输入插件从数据源那里消费数据，过滤器插件根据你的期望修改数据，输出插件将数据写入目的地。

启动以后，下面我们在命令行下输入"hello world"

static(默认)， 静态定位，流式布局
relative，相对定位，参与流式布局，可以使用left等在原有位置上进行位置调整。
absolute，绝对定位，脱离文档流，相对于另一个元素进行定位。
fixed，固定定位，脱离文档流，相对于浏览器窗口定位，不随页面滚动而改变位置。
sticky，粘性定位，可实现动态fixed。

相对于离自己最近的、position为非static的祖先元素进行定位。

Transition：简单的动画，只需要在两个状态之间变化的动画。
keyframeAnimation：适合需要在多个状态连续进行的动画。
js动画：功能最强的动画，但是效率最低。

Js动画：1，手写js动画时，直接在停止动画的代码之后添加要执行的代码，如果使用js动画工具库，则把要执行的代码写在动画结束时的回调函数中。

多异步任务并发执行问题：合并promise。

7.1.页面打开时需要发送很多ajax请求（例如加载下拉列表项），而且部分ajax请求之间还有依赖关系，如何优雅地编写代码保证这些请求即高效又有序地执行？

使用promise或者async函数，防止回调函数多层嵌套。
当多个异步任务需要先后执行时，使用Promise连续.then控制。
多个异步任务并发执行没有先后依赖时，使用Promise.all合并。

独立存在的函数，直接调用时，非严格模式下其中的this指向全局对象(浏览器中是window,nodejs中是global)，严格模式下指向undefined。
如果是对象的方法，则通过谁调用，就指向谁。
构造函数通过new调用时，this是正在创建的对象。,

8.1.怎样改变函数中this的指向。

函数中的this是可以通过方法改变的。
Call ，call是函数对象的方法，作用是指定this，调用这个函数。
apply，和call基本一样，唯一的区别是，传参方式不同，aplly需要提供一个数组。
Bind，bind也是函数对象的方法，作用是生成一个新的函数，新的函数和原函数代码一样，但是里面的this是绑定过的。

8.2.如何保证一个类中的很多方法（函数）不管怎么调用，this总是指向实例对象？

在类中声明实例方法时直接声明为箭头函数，或者在声明时添加bind(this)，或者在构造函数中对实例方法进行bind(this)。

事件触发后，先从根元素到叶子元素逐层捕获，然后再从叶子元素到根元素逐层冒泡。

typeof只能判断类型，所以，数组和对象返回的都是object，这时就需要使用instanceof来具体判断。
instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

不改变原数组（创造新数组）的方法 

concat()：拼接两个或两个以上的数组，并返回一个新数组，不会改变原有数组的值.

slice()：从已有的数组中返回选定的元素。
start 必需。规定从何处开始选取(包括该位)。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取(不包括该位)。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

join()：把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

1.pop(): 删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
2.push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
3.reverse():用于颠倒数组中元素的顺序。
4.shift(): 数组的第一个元素从其中删除，并返回第一个元素的值,如果数组是空的，那么 shift() 方法将不进行任何操作.
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
5.unshift():将参数添加到原数组开头，并返回数组的长度.
必需。整数，规定添加/删除元素的位置（元素在数组的下标），使用负数可从数组结尾处规定位置。
必需。要删除的元素数量。如果设置为 0，则不会删除元素。
可选。向数组添加的元素。 
splice()：向/从数组中添加/删除元素，然后返回被删除的元素。
注意：splice方法会改变原始数组。
  • 实现子元素在父元素中居中：绝对定位+上下左右设置0+margin:auto。

能够根据不同的浏览器尺寸，显示不同的布局方式。依赖媒体查询实现。

元素从结构上分为4层，内容，内间距，边框，外间距。

  • Js中的对象都有一个属性叫做__proto__(也是一个对象)，表示对象的原型。当访问对象中的属性或方法时，首先在对象本身中寻找，如果找不到则会在原型中寻找，原型中也找不到时会在原型的原型中寻找，直到最顶层为止。
  • js中的类(构造函数)都有一个prototype的属性，表示本类的原型类型，通过这个类实例化的对象(这个构造函数创建的对象)， _proto__都指向本类的prototype，从而实现了类方法的共享。一个类的prototype也是一个对象，它也有__proto_，把它的__proto__指向另一个类的prototype时，那么这个类的对象就能访问另一个类中的方法，从而实现了方法的继承。

当一个函数A的作用域被内部的B函数引用时，A函数的作用域就会被B函数闭包，如果函数A返回了函数B，当A函数执行完毕时，A函数的作用域也不会释放。

闭包可以实现对象的私有属性和私有方法。
闭包可以封装变量，从简减少对全局作用域的污染。

箭头函数，字符串模板，let块级作用域声明方式，const常量，class声明类，结构赋值，Promise，ES6模块化。

  • 箭头函数对this的影响是什么？
    箭头函数中的this总是函数所在上下文中的this,也就是相当于普通函数+bind(this)
  • 什么时候使用const？
    赋值之后不需要再进行修改的量可以使用const
  • let与var的区别是什么？你使用哪一个？
    Let是块级作用域变量，var是函数级作用域变量，两个都用。

一个页面发送到非本身来源的请求叫做跨域请求，浏览器只禁止ajax跨域请求。

1，cors，服务器在响应头中添加access control allow origin字段，浏览器在收到请求之后就会认为本次请求时允许跨域的。 2，JSONP,浏览器使用创建script标签的形式发送请求，将一个函数名作为请求参数发给服务器，服务器将需要返回的数据封装在一段js代码中（把前端发来的函数名进行调用，把要发送的数据作为参数），然后把这段代码返回给前端，前端立刻执行这个函数。 3，代理服务器，将请求先发送给代理服务器，代理服务器装发给目标服务器。

怎么列出一个文件夹下的所有文件？

开启Webpack的watch功能时，只要你一保存文件，项目就会自动重新编译，其中的原理是什么？

请你列出url的结成部分

21.Express中常用的中间件都有哪些？

都可以实现在用户的浏览器中存储一些数据。
不同：cookie是由服务端主导的，主要用于存储用户身份验证信息。localstorage是由前端js控制的，主要用于缓存业务逻辑数据。Cookie会随着请求头和响应头往返于服务器和浏览器之间。

LocalStorage能存储多少数据量？如果数量过大会出现什么问题？怎么办？
不同浏览器有区别，一般都是5MB左右。

什么时候使用watch？

需要监听组件数据变化时

watch可以监视什么？

凡是vue组件改造的set,get属性，都可以监听。

mixin都能混入什么？

Vue组件data中的数据在组件创建时，都会被改造为set,get类型的属性，当数据发生变化时set方法就会调用，set方法中添加了重新渲染的代码。

  • 在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。
    大大型项目中，可以使用vuex进行数据管理，将数据统一放在store中进行管理。

  • 怎么找出所有的子孙组件？

  • Vuex的核心概念有哪些？它们的作用是什么？组件如何使用store中的数据如何改变store中的数据？
    State，仓库中的状态（数据）。Getters，状态的衍生状态。Mutation，状态的修改方法。Actions，状态的异步修改方法。

webSocket是一种双工通信技术，可以实现服务器主动向客户端发送数据。

微信小程序开发中，使用的主要文件：
前端开发的项目时运行在浏览器中的。能够调用浏览器提供的webAPI
微信小程序是运行在微信提供的平台中的。能够调用微信提供的API。

有没有用过小程序UI库？用过哪个？用了哪些组件？
微信API有哪些限制让你觉得不爽？
1，没有状态管理工具；2，事件只能绑定一个监听函数；3，模板中事件绑定方法不能传参；4，异步API不支持promise；5，wxs功能过于单调。

WebWorker是h5中新增的WebAPI，用于启动一个独立的线程，主线程和分线程只能通过相互发送消息进行通信。当前端页面中有耗时很长的代码需要执行时，可以放在worker中执行，否则会卡塞主线程，影响用户体验。

1，如果地址栏中输入的是一个域名，浏览器会先使用自己的DNS缓存进行域名解析，转为IP地址，如果缓存中不存在，则会请求使用上层DNS（操作系统的DNS），操作系统会先查询本地HOST文件，如果HOST文件中不存在则会使用网络设置的DNS进行域名解析。最终得到域名对应的IP地址。
2，获得IP地址后，浏览器按照IP地址进行连接(tcp连接)，连接成功之后按照http协议的格式（请求行，请求头，请求头）发送http请求，服务器会返回响应报文（响应行，响应头，响应体），浏览器收到响应报文后，会根据响应头中的Content-Type字段来决定如何进行下一步处理，对于普通的网页Content-Type值是text/html，浏览器就会在页面中打开本次请求响应体中的数据。

3，在打开页面时，浏览器首先对html文本进行解析，创建DOM树，然后将每个节点渲染到页面上，其中如果出现了附带资源的标签（例如img,script等），浏览器会再次按照这些资源的src发送请求，当请求完成之后将请求内容插入到页面中，其中script标签资源是同步加载的，其他资源是异步加载的。

打开一个有很多图片的页面时，浏览器与服务器会建立多少个连接？
一般情况下1个连接。如果图片来自不同的域名则会是多个连接。

1，尽量减少页面资源的请求次数（可以通过base64图片、合并图片、合并js，css文件实现）。
2，对页面代码进行压缩（主要是js代码压缩）
3，合理地使用懒加载。
4，对于不需要支持多国语言的中文网页，可以使用放弃使用UTF-8，使用GBK编码。
(以上是从前端角度进行优化，下面几条是从服务端角度优化)
5，网页中的静态资源使用CDN服务。
6，使用缓存，服务端使用redis进行接口缓存，同时在响应头中通过lastmodified,Etag等字段控制浏览器缓存。
7，使用gzip进行数据压缩。
8，使用多域名，部分浏览器对于同一个域名的并发请求量设置有上限，所以可以把页面资源分布在不同域名中，例如静态资源独自使用一个域名。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before

@import，导入另一个css文件，@font-face，导入一个字体文件，@keyframes声明一个关键帧动画，@media声明一个媒体查询条件。

这么多内核有什么差别？你怎么看待这些差别？
由于W3C对于HTML5标准的指定不是是非详细，或者各浏览器厂商没有完全遵守HTML标准，导致不同的浏览器内核对页面的渲染会有一些差异。所以在前端开发中要解决浏览器之间的差异，进行样式统一。

行内元素：会在水平方向排列，设置width无效，height无效，margin上下无效，padding上下无效。
块级元素：各占据一行，垂直方向排列。

图片（img）下方会占据一些空白，怎么消除？

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

都是解决网站对于老旧版本浏览器的兼容问题。

  • 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
  • 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

Webpack是为前端开发设计的自动化打包工具，能够对项目中的js、css、图片等资源进行打包（其中js可以直接打包，其他类型资源需要各自对应的loader支持），相比于传统的grunt、gulp等构建工具，webpack在打包js代码时，能够识别多种模块化语法，进行模块化打包。 

Webpack怎么打包图片到js中，原理是什么？打包到js中的图片怎么显示到页面上？
对于小图片，打包之后会形成base64图片，而大图片会打包成一个url地址。

Vue项目中放在哪些位置的图片会被打包？如何避免大图被打包？
放在assets中的静态资源会被打包，将大图片放在public文件夹中。
Webpack怎么打包css？原理是什么？打包到js中的css怎么加载到页面上？
Webpack能否打包字体文件？能否打包字体图标？
将webpack配置文件中的打包入口配置为多个入口。
Webpack怎么实现将某个模块（在项目的node_modules中）中的文件复制到编译输出文件夹中？
Webpack的核心概念有哪些，你能画一副图表示编译过程码？

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
首先代码里对用户输入的地方和变量都需要仔细检查长度和对<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。

  1. 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
    2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
  2. 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
  3. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
  4. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。
    防范：在服务端敏感接口中添加referer判断。

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

栈和队列都是线型数据结构，栈只有一个入口，同时也是出口，所以数据遵循先进后出，后进先出的规则。队列一侧是入口，另一侧是出口，所以数据先进先出，后进后出。
Js中的数组可以实现栈和队列。Push和pop方法是一对栈操作，push和shift是一对队列操作。

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

46，如何为对象添加set/get属性？

47，react的组件有哪些声明方式？区别是什么？

48，vue组件怎么使用store中的数据？ 

重置样式表是什么？有什么用？你用过哪些重置样式表？
增加了变量，函数，混入，嵌套等功能。
使用js书写css的工具。
自动为css添加各种浏览器私有样式的前缀。

57，css3的新特性都有哪些？
圆角，阴影，变形，渐变色。

58，什么是元素外间距重叠？那种情况下会产生外间距重叠？
流式布局中块元素的上下外间距会产生重叠。

59，常见兼容性问题有哪些？
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
对于老IE浏览器使用css hack解决兼容问题。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
Retina屏幕手机浏览器的1px边框问题，通过前后缀伪元素或者缩放解决。

怎么查一个JS/CSS/HTML特性的在各种浏览器及各个版本上是否支持？
上MDN查询或者直接试
怎么查各种浏览器及其各个版本的使用率？
百度“2019年国内浏览器市场占比”

正常情况下localstorage不能跨域访问，但是可以通过iframe实现间接的跨域访问，域名A的网站在页面中通过iframe打开域名B的页面，然后通过postMessage给B网页发送消息，域名B页面读取localstorage数据之后再通过postMessage将数据传递给A页面，从而实现跨域访问localStorage。也就是说B页面必须配合，A页面才能跨域访问。

61，浏览器事件的传播流程是什么？如何阻止事件传播和默认行为？
事件传播顺序：先捕获，后冒泡。

Async函数没有返回值，或者只能返回Promise对象。在async函数的函数体中可以使用await，await 后面只能调用返回Promise的函数，且通过await调用之后返回值不再是promise，而是promise.then时所传递的数据（如果失败则会抛异常）。从而实现以同步代码的格式调用异步函数。

如果await调用中的Promise是reject状态，await下面的代码是否会执行？为什么？ 不执行，因为抛异常了。

如果await调用中的Promise一直是pending状态，await下面的代码是否会执行？为什么？
不执行，只有promise成功之后才会继续执行。

63，什么是深拷贝和浅拷贝？
浅拷贝就是只复制数组（对象）本身，而不复制其内容（引用类型的数据内容），最终两个数组中指向同一套数据。深拷贝则是既赋值本身也赋值内容。
Js中对于引用类型的数据，默认进行的都是浅拷贝。

64，JS如何实现对数组（对象）的深拷贝？
对于不含方法的纯数据对象，可以转为JSON字符串再解析为对象，对于包含方法的对象，则需要使用递归遍历其属性逐个赋值。

65，什么是JS严格模式？怎么进入严格模式？严格模式下有哪些限制？

严格模式是JS的一种特殊执行模式，设立”严格模式”的目的，主要有以下几个：
1，消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2， 消除代码运行的一些不安全之处，保证代码运行的安全；
3，提高编译器效率，增加运行速度；
4， 为未来新版本的Javascript做好铺垫。

在函数中或全局域的开头添加字符串”use strict”进入严格模式。

严格模式主要有以下限制：
函数的参数不能有同名属性，否则报错
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
eval不会在它的外层作用域引入变量
arguments不会自动反映函数参数的变化
禁止this指向全局对象

66，什么是函数防抖和函数节流？
函数防抖：对于频繁触发的事件，如果只希望其最后一次（或第一次）执行绑定函数的执行，则需要使用函数防抖。
函数节流：对于频繁触发的事件，希望其按照一定的频率进行绑定函数调用，则使用函数节流。
函数防抖和节流都可以通过settimeout实现。

MVVM模式使用数据双向绑定，model和view直接进行交互。

68，js的模块化技术都有哪些？
CommonJS，同步模块化标准，NodeJS采用的就是这套标准。
AMD，异步模块化，requireJS使用的标准。
ES6模块化，ES官方的标准，本质上也是一种同步模块化。

69，vue组件中的mixin字段作用是什么？
Mixin是组件混入项，可以将mixin对象中的内容混入到当前组件中，从而实现组件逻辑的复用。

70，React框架中高阶的作用是什么？哪些情况下使用？
高阶组件的本质是一个函数，它接受一个参数组件，然后内部创建一个新组件，将参数组件包裹在新组建中，在新组件中扩展新的内容，最终返回新的组件。使用这种组件组合技术，可以将高阶组件和任何组件结合，从而实现高阶组件逻辑的复用。
当一个组件业务逻辑很复杂时，也可以将组件模板部分写成function组件，然后逻辑部分写为高阶组件和function组件结合，从而实现组件模板和逻辑的分离。

React项目中常见Container/Component模式，Component负责接收属性数据、渲染界面和调用函数属性（实现视图逻辑），Container负责实现函数属性，Ajax调用等（业务逻辑）；请分析这种模式的优缺点。
能够将组件的视图部分和逻辑部分进行分离，利于各自的开发和后续维护，尤其是大型组件，可以实现代码分散。缺点是两个组件之间增加了传值的代价（例如ref），把MVVM的结构搞出了MVC的味道。

如何调试Redux，查看当前状态、action数据流？
浏览器安装react调试插件。

71，vue框架中标签的ref属性有什么作用？
在组件代码中获取原生HTML标签对象，或者获取组件对象。

72，babel的作用是什么？
将ES6代码转为ES5代码。 

babel会进行哪几类转换？
babel插件和预设是什么？

Babel插件可以在babel进行代码转换时使用一些额外的功能，插件预设就是一组插件列表。
如何让babel针对特定浏览器转换出最精简和高效的代码？

74，怎么解决页面加载时的闪烁问题？
对页面整体内容进行隐藏，显示加载进度条，然后在页面的加载完毕事件中取消进度条，显示页面内容。
在vue中可以通过v-cloak指令进行。

76，前端页面中的图形绘制使怎么做？

先列题目，然后加答案。

，遇到宏任务放到宏队列（macrotask），遇到微任务放到微队列（microtask。主线程执行完毕，调用栈被清空，这个时候就会从微队列里取出位于首位的回调放入执行栈开始执行，微队列长度-1，然后依次执行队列里的回调任务直到所有任务被执行完毕，此时微队列为空，调用栈也为空，这时再从宏队列里取出位于首位的一个任务，然后放入调用栈执行，执行完毕之后，再去取微队列里的任务，按照之前的步骤循环。

2. js为什么要实现成单线程的，有什么好处？

原因：作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
单线程的好处：设想，如果 Javascript 被设计为多线程的程序，那么操作 DOM 必然会涉及到资源的竞争，那么这门语言必然会被实现的非常臃肿。在客户端中跑这么一门语言的程序，资源消耗和性能都将是不乐观的，同时在客户端实现多线程不是刚需。
设计成单线程，并辅以完善的异步队列来实现，那么运行成本就会比多线程的设计要小很多了。

  1. 进程是资源分配的最小单位，线程是程序执行的最小单位（资源调度的最小单位）
  2. 进程有自己的独立地址空间，每启动一个进程，系统就会为它分配地址空间，建立数据表来维护代码段、堆栈段和数据段，这种操作非常昂贵。
    而线程是共享进程中的数据的，使用相同的地址空间，因此CPU切换一个线程的花费远比进程要小很多，同时创建一个线程的开销也比进程要小很多。
  3. 线程之间的通信更方便，同一进程下的线程共享全局变量、静态变量等数据，而进程之间的通信需要以通信的方式（IPC)进行。不过如何处理好同步与互斥是编写多线程程序的难点。
  4. 但是多进程程序更健壮，多线程程序只要有一个线程死掉，整个进程也死掉了，而一个进程死掉并不会对另外一个进程造成影响，因为进程有自己独立的地址空间。

4. 闭包的含义、原理、优缺点、使用场景、如何回收

含义：闭包是函数和声明该函数的词法环境的组合。这个环境包含了这个闭包创建时所能访问的所有局部变量。
闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量，是函数内部和外部之间的桥梁。
原理：函数的作用域是一条作用域链，而且作用域链是有顺序的，我们称之为链式作用域结构。在js中，外部不能读取到内部的变量，而内部可以读取到外部的变量。利用这个特性，闭包可以将读取到的属性扔到外部使用。
优点：可以读取函数内部的变量，让这些变量的值始终保持在内存中。
缺点：闭包对脚本性能有负影响，不能滥用。并且闭包会在父函数外部，改变父函数内部变量的值。

  1. 给对象设置私有变量并且利用特权方法去访问私有属性
  2. 采用函数引用方式的setTimeout调用,原生的setTimeout传递的第一个函数不能带参数,通过闭包可以实现传参效果
  3. 单例模式的实现，确保全局只有一个实例对象
  4. module仿模块化，使用闭包封装“私有”状态和组织。只用返回一个公有的API，其他的所有规则都在私有闭包里，防止泄露到全局作用域，并且可以减少与别的开发人员的接口发生冲突。

5. JS数据类型有哪些，怎么做类型判断？

6. 类型转换有哪些？

执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。
JavaScript 中有三种执行上下文类型：
全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。
函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序执行一系列步骤。
Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文。

创建执行上下文分为两个阶段：1.创建阶段  2.执行阶段

在创建阶段会发生三件事：

  1. this 值的决定，即我们所熟知的 This 绑定。

8. new操作符做了什么

  1. 执行构造函数中的代码，为空对象添加属性A.call(o);，也可以理解为将构造器函数内部this指向新建的空对象。
  2. 返回添加属性后的对象。

9. 解释构造函数、对象、原型链之间的关系

每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。通俗的说，实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。

10. 继承的几种方式以及优缺点

  1. 缺点：引用类型的属性被所有实例共享；在创建 Child 的实例时，不能向Parent传参

  2. 优点：避免了引用类型的属性被所有实例共享，并且可以在 Child 中向 Parent 传参
    缺点：方法都在构造函数中定义，每次创建实例都会创建一遍方法。

  3. 优点：融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式
    缺点：调用两次父级的构造函数

  4. 缺点：包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

  5. 缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法

  6. 优点：这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

11. 实现原型式继承

12. 实现构造函数继承

13. 面向对象的属性

14. 设计模式有哪些，项目中使用到哪些

  1. 策略模式，封装不同的计算方法，封装调用接口，常见购物车商品价格计算
  2. 发布订阅模式，参考vue响应式原理

15. 浏览器事件有哪些过程? 为什么一般在冒泡阶段, 而不是在捕获阶段注册监听? addEventListener 参数分别是什么 ?

过程：事件捕获阶段、处在目标阶段、冒泡阶段

IE低版本不支持捕获，为了兼容性，一般都写冒泡

addEventListener可接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值若为true，表示在捕获阶段调用事件处理程序；若为false，表示在冒泡阶段调用事件处理程序

17. js中的装箱和拆箱了解吗？

装箱：把基本数据类型转化为对应的引用数据类型的操作。每当读取一个基本类型的时候，后台就会创建一个对应的基本包装类型对象，从而让我们能够调用一些方法来操作这些数据。
所以直接定义一个基础类型字符串也能调用方法。

拆箱：将引用类型对象转换为对应的值类型对象
如果是自定义的对象，你也可以自定义它的valueOf()或者toString()方法，实现对这个对象的拆箱。

18. 节流与防抖原理

防抖与节流函数是一种最常用的 高频触发优化方式，能对性能有较大的帮助。

防抖 (debounce): 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可。

节流(throttle): 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms执行一次即可。

19. 面向对象和非面向对象有什么区别

面向对象是对事件处理的抽象，方便扩展设计，非面向对象一般是针对流程的处理，没有抽象概念。

20. 高阶函数是什么，怎么去写一个高阶函数

只需满足以下任意一个条件，即是高阶函数:

  1. 接受一个或多个函数作为输入
  2. return 返回另外一个函数

21. 模块化介绍一下，什么是编译时优化？模块化的演化过程？

AMD是依赖前置，在define里先定义好依赖模块，然后在回调函数里做引用

CMD是依赖后置，define了一个模块，在里面什么时候用到模块了，什么时候再require

require是动态编译，运行时才加载，import是编译时就要加载，属于静态编译。但是目前已经有import()函数在提案内，可以实现动态加载了，此外还有更新的提案，await提升，之前await只能在标记async的函数内使用，现在的提案是await可以单独使用，import()动态加载时还需要写then做后续处理，现在不用了，写法简化很多。

PWA并不是单指某一项技术，你更可以把它理解成是一种思想和概念，目的就是对标原生app，将Web网站通过一系列的Web技术去优化它，提升其安全性，性能，流畅性，用户体验等各方面指标，最后达到用户就像在用app一样的感觉。

PWA中包含的核心功能及特性如下

// 获取除第一个参数之外的其余参数，然后执行 // 处理函数成为构造函数的情况 // 构造函数 return 的是一个引用值的话，则 new 操作符返回的就是这个引用值
  1. 操作dom有哪些方法？
  2. 怎么用原生js实现一个轮播图，以及滚动滑动？
  3. 怎么实现上传下载的功能？
//假设要获取的cookie的名字是name,则遍历数组找到名字所对应的值

31. 怎么打断点，如何确定一个结果来自于哪个函数

32. 简述自定义事件实现方法

36. 编写函数 convert(money) ，传入金额，将金额转换为千分位表示法

37. js浮点数运算不精确，如何解决

我们进行运算的时候，实际上是把数字转换为了二进制进行的，所以我们把0.1和0.2转换为二进制：
这里可以看出转换为二进制是一个无限循环的数字，单在计算机中对于无限循环的数字会进行舍入处理的，进行双精度浮点数的小数部分最多支持52位。然后把两个2进制的数进行运算得出的也是一个二进制数值，最后再把它转换为十进制。保留17位小数，所以0.1+0.2的值就成了 0.00004。  0.1+0.1的值成了0.00000，全是0的时候可以省略，就成了0.2。
解决办法最简单的是直接toFixed，有时结果也是不准确的，所以我们还可以直接截取小数点后面的值直接乘以10的倍数，得到相加结果再除以相同的10的倍数。

38. 实现函数的柯里化

39. 前端存储方式，以及它们之间的优缺点

40. 怎么从十万个节点中找到想要的节点，怎么快速在某个节点前插入一个节点？

41. 如何找到一个字符串中最长的两个字符串？

42. 正则用过吗？exec, 匹配一个手机号？去空格？

43. 给你一亿个数，是连续的，怎么找出两个不存在的数

45. 做一个表格，一分钟刷新一次，怎么实现

46. 有了解WebWorker的实现原理吗，私下有实践过吗

直接来说，WebWorker可已开启多线程操作，但是不能操作dom。多线程之间可以通过postMessage传递信息，监听onMessages获取信息。

47. 平时做项目有没有考虑过内存的问题？怎么解决的？

48. 异步处理的方案有哪些？

//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素

4. 有哪些排序算法，时间复杂度是多少？什么时候快排的效率最低？

5. 改变数组和不改变数组的方法分别是哪些？

6. 给定一个数组和一个正整数N，求一个和小于N的最长连续子数组

7. 给定两个有序数组，合并为一个有序数组。不许使用 js 的 concat 和 sort 方法

**当数组长度小于等于10的时候，采用插入排序，大于10的时候，采用快排。
对于长度大于1000的数组，采用的是快排与插入排序混合的方式进行排序的，因为，当数据量很小的时候，插入排序效率优于快排。**

9. 不产生新数组，删除数组里的重复元素

10. 冒泡排序和快速排序的区别

冒泡排序是从最底层元素开始比较du,（与其上的元素比较）小于就往上再zhi比,大于就交换,再用较小dao的往上比较,直到最高层,第一次把最小的放到最上层,第二次把第二小的放到第二层,以次类推。

快速排序是先找到一个轴值,比较时把所有比轴值小的放到轴值的左边,比轴值大的放到右边,再在两边各自选取轴值再按前面排序,直到完成。

  1. 箭头函数，this指向
  2. 新增的数据结构有哪些？
  3. 解释ES6的暂时性死区

同源策略导致跨域，解决办法： JSONP、nignx反向代理、CORS配置（会有一次预检请求）

3. 页面加载的过程（输入URL后发生了什么？）

4. TCP三次握手和四次挥手，拥塞控制

6. HTTP请求头和响应头都有些什么字段？

304-延伸到浏览器缓存问题
307：临时重定向，请求体不会发生变化

11. 进程通信，有名和匿名管道

进程之间通信，就实现手段上来看，有以下几种：

  1. 匿名管道（有亲缘关系进程）
  2. 有名管道（无亲缘也可以）

PIPE匿名管道用于具有血缘关系之间的进程进行通信。
1.半双工通信，同一时间数据只能向一个方向传输，具有固定的读端和写端。
2.只能用于具有亲缘关系的进程间通信（父子或者公共祖先）。
3.本质是内核中的一块缓冲区。
4.自带“同步互斥机制”，同时只有一个进程能够读到数据。
6.管道提供字节流服务。

FIFO：命名管道（也是半双工），每个FIFO都有一个路径名与之关联，从而允许无亲缘关系的进程访问同一个FIFO

  1. 可以在没有亲缘关系的进程间交换数据
  2. FIFO有路径名与之关联，它以一种特殊设备文件形式存在于文件系统中。
  3. 会出现抢读，写一次，就要去读，不管是谁读，里面的数据都会被清理

cookie由服务器生成，保存在客户端浏览器，容易被劫持，不安全
session保存在服务端，每个sessionID都是唯一的，当用户量太大时，占用服务器资源，较安全
token的工作原理：
1.客户端第一次请求时，发送用户信息到服务器。服务器对用户信息使用HSA256算法及密钥进行签名，再将这个签名和数据一起作为token返回给客户户端。
2.服务端不再保存token，客户端保存token。
3.当客户端再次发送请求时，在请求信息中将token一起发送给服务器。
4.服务器用同样的HSA256算法和密钥，对数据再计算一次签名，和token的签名做比较
5.如果相同，服务器就知道客户端登录过，则反之。

  1. 如果浏览器关闭了再打开, 请求还是from cache吗?

一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。

  • 基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）
  • 在web worker的基础上增加了离线缓存的能力
  • 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->由开发者指定的动作）
  • 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
  • 由事件驱动的,具有生命周期
  • 并且可以让开发者自己控制管理缓存的内容以及版本
  1. token 的刷新机制是怎么样的， 为什么这么设置？
  2. 静态文件的浏览器缓存如何实现
一般是对服务器的数据做改变，常用来数据的提交，新增操作
put请求与post一样都会改变服务器的数据，但是put的侧重点在于对于数据的修改操作，但是post侧重于对于数据的增加
put的更新是全部更新，patch可以执行部分更新，只更新接收到的数据
属于浏览器的预检请求，查看服务器是否接受请求，预检通过后，浏览器才会去发get，post，put，delete等请求。非简单请求才会发送遇见请求

put请求与post一样都会改变服务器的数据，但是put的侧重点在于对于数据的修改操作，但是post侧重于对于数据的增加

  1. get是从服务器上获取数据，post是向服务器传送数据。
  2. 传参方式不同，一个参数挂在url上，一个参数在请求体里。
  3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
  4. GET产生一个TCP数据包，POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
  1. 反向代理知道么，Nginx
  1. 组件间的通信方式及原理
  2. MVC和MVVM了解吗？有什么区别？
  3. Vue是怎么实现对数组变化的检测的

6. key的作用是什么？

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它。

  1. 聊一下高阶组件 hoc
  2. 聊一聊组件设计, 领域模型
  3. 原生事件和 React事件的区别

就是把一些js模块给独立出一个个js文件，然后需要用到的时候，再创建一个script对象，加入到document.head对象中就可，浏览器会自动帮我们发起请求，去请求这个js文件，然后写个回调函数，让请求到的js文件做一些业务操作。

目前最常用的配合Babel一起使用的polyfill是babel-polyfill，它会”加载整个polyfill库”，针对编译的代码中新的API进行处理，并且在代码中插入一些帮助函数。

babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。
Babel为了解决这个问题，提供了单独的包babel-runtime用以提供编译模块的工具函数， 启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数。垫片也是即用即插。这样可以避免自行引入polyfill时导致的污染全局命名空间的问题。

37. node 的多线程，高并发，安全

由于node 是单进程的，无法充分利用多核 CPU 的性能，一般会使用 cluster 模块，进行多进程的部署。在多进程的环境下，又会带来一些并发的问题。进程之间的数据是不共享的，但是依然会有很多共享的资源，比如文件系统，数据库等。对于这些资源的并发访问和修改依然会导致问题。
所以在 cluster 模式下，需要更可靠的锁机制，保证对多个 node 实例，一次只能执行一个异步函数。为了实现这一点，仅仅依赖单线程的 node 是不可行的，需要引入外部的状态管理。Redlock 算法提供了一种基于redis 的分布式锁的实现。关于分布式锁和redlock算法的详细介绍可以参考这个链接

40. 说说排查内存泄露的方法

内存泄露通常有两种情况，一种是容易复现的，一种是不容易复现的。
对于容易复现的我们在测试环境中模拟排查即可。
对于不容易复现的我们就要借助内存快照，可以使用devtool查看内存快照，heapdump保存内存快照。heapdump保存的内存快照只会有Node环境中的对象，如果使用node-inspector快照中就会包含前端变量，容易造成干扰。

42. 小程序跟 h5 的区别是什么? [小程序底层实现]

46. axios 为什么既可以在浏览器发请求,又可以在node层发请求?

47. 客户端渲染和服务端渲染的区别

使用导航守卫的钩子上报数据

4. 如何在用户刷新、跳转、关闭浏览器时向服务端发送统计的数据？

  1. 发出的是异步请求，并且是POST请求，后端解析参数时，需要注意处理方式；
  2. 发出的请求，是放到的浏览器任务队列执行的，脱离了当前页面，所以不会阻塞当前页面的卸载和后面页面的加载过程，用户体验较好；
  3. 只能判断出是否放入浏览器任务队列，不能判断是否发送成功；

5. 错误日志上报遇到的问题.

6. 负载均衡方式和容错机制

7. 怎么计算在一个页面上的停留时间

1. 移动端如何优化首页白屏时间过长 ?

2. 移动端优化方式? 离线包是如何实现的?

  • API注入，Native 直接在 JS 上下文中挂载数据或者方法

    • 延迟较低，在安卓4.1以下具有安全性问题，风险较高
    • 兼容性好，但延迟较高，且有长度限制

5. 怎么排查交互中的错误？

6. 浏览器内核有哪些，移动端用的是哪个？

7. 移动端页面适配解决方案

1. 前端安全方面有没有了解？XSS和CSRF如何攻防?

1. 文件指纹怎么生成？

npx是执行Node软件包的工具，它从 npm5.2版本开始，就与npm捆绑在一起。
npx 想要解决的主要问题，就是调用项目内部安装的模块。

  • 帮你在本地（可以是项目中的也可以是本机的）寻找这个 command

    • 找到了： 就用本地的版本
    • 没找到： 直接下载最新版本，完成命令要求
  • 使用完之后不会在你的本机或者项目留下任何东西

package.json文件描述了一个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息。格式必须是严格的JSON格式。
package.json文件指定了项目的版本，依赖文件，可运行脚本，入口文件等等

8. 能写一个二叉树么，怎么去遍历

9. 伪类知道吗，有哪些？

11. 二维码怎么工作的，扫描pc端的二维码，怎么让pc端登录？

12. 怎么做一个实时的聊天系统

13. 当消息有延迟的时候，怎么保证消息的正确顺序？

18. 了解盒模型吗？

21. 维护的公共组件需要发布大更新, 如何做?

23. 微前端了解吗？

24. 可视化表单了解过么?

26. 平时处理过什么兼容性？

我要回帖

更多关于 手机log是什么意思 的文章

 

随机推荐