zhoumeina99的博客

转载 js从编译到执行过程

之前写博客，经常需要引用一些基础的内容，每次都花不少时间找合适的文章，索性花点时间自己写。于是有了这个系列的文章。执行上下文是对JavaScript代码执行环境的一种抽象，每当JavaScript运行时，它都是在执行上下文中运行。全局执行上下文— 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的window对象（浏览器的情况下），并且设置this的值等于这个全局对象。一个程序中只会有一个全局执行上下文。函数执行上下文— 当执行一个js函数时，js。

转载 页面渲染：性能分析

Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。配合无痕模式，可以避免chrome插件的影响。

转载 promise 或 async 函数作为 forEach()

参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。则表示其后面的表达式需要等待结果，函数最终返回一个。函数的语义，它表示函数中有异步操作，我们可以使用 for…可能没办法到达预期目的哦。这样就能输出预期结果。

转载 浏览器工作原理和实践

《浏览器工作原理与实践》是极客时间上的一个浏览器学习系列，在学习之后特在此做记录和总结。未激活的页面，setTimeout执行最小间隔是1000毫秒。为了协调这些任务有条不紊地在主线程上执行，页面进程引入了消息队列和事件循环机制，渲染进程内部会维护多个消息队列，比如延迟执行队列和普通的消息队列。把这些消息队列中的任务称为宏任务。

转载 WebAssembly

一旦把 SessionStack 整合进网络应用或网站的生产环境，它会开始记录所有的一切：所有的 DOM 变化，用户交互，JavaScript 异常，堆栈追踪，失败的网络请求和调试数据。当你想在生成的 JavaScript 代码中查询特定的行和列的代码的时候，可以在源码映射中进行查找以获得代码的原始位置。现在，我们将会剖析 WebAssembly 的工作原理，而最重要的是它和 JavaScript 在性能方面的比对：加载时间，执行速度，垃圾回收，内存使用，平台 API 访问，调试，多线程以及可移植性。

转载 浏览器工作原理与实践

好了，今天就讲到这里，下面我来总结下今天所讲的内容。如果有一些确定好的任务，可以使用一个单线程来按照顺序处理这些任务，这是第一版线程模型。要在线程执行过程中接收并处理新的任务，就需要引入循环语句和事件系统，这是第二版线程模型。如果要接收其他线程发送过来的任务，就需要引入消息队列，这是第三版线程模型。如果其他进程想要发送任务给页面主线程，那么先通过IPC把任务发送给渲染进程的IO线程，IO线程再把任务发送给页面主线程。消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。

转载 了解浏览器是如何工作的，能够让你站在更高的角度去理解前端

引起回流的因素，第一是dom节点增加或者是删除，第二是元素的尺寸，边距，填充，边框，宽高，第三dom节点位置变化，第四dom节点display显示与否，第五，页面渲染初始化，浏览器窗口尺寸变化，向浏览器请求某些样式信息。前端是个很大的概念，是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面，现在的说法一般是指Web前端，也就是针对于网页端开发的工作。多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程来启动和管理的。

转载 宏任务和微任务

我们用js建几个div，之后添加到一个节点下，再立刻打印一下这个节点下子元素的个数，这几行执行完之后，我们可以看出打印了5，页面上也显示了五段话，这没有什么问题。有些了解的可以看出，先打印出100 400肯定是没有毛病的了，问题应该就出在200跟300上，它俩之间300为什么要比200打印的早呢？会阻断js执行，也会阻断DOM渲染，利用这一点，我们可以直观的去看出谁先谁后和DOM渲染在什么时候执行的。首先我们知道，js是单线程了，按照顺序一行一行执行，如果某行报错则停止后续执行，然后就是。

原创 浏览器重排重绘

转载 CSS animation 和 transition 的性能探究

CSS animation 和 transition 的性能探究

转载 JavaScript ArrayBuffer和Blob

图片来源：https://zhuanlan.zhihu.com/p/97768916这篇主要介绍Blob和ArrayBuffer相关的一些API之间的关系和用途，并不会详细介绍每个属性和方法，更多的是想讲述清楚一些概念。

转载 在nginx上部署vue项目(history模式)；

route history模式为什么要重定向页面

原创 make sure to exclude it from component resolution via compilerOptions.isCustomElement

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.TypeError: Cannot set properties of undefined (setting 'Fld_ST_00020_r')一直报这个错误，找了很久，才发现原来一个标签写错了，太粗心了template 写成了 tempalte 导致认为.

原创 vue3 Cannot set properties of undefined (setting ‘Code‘)

需要动态添加属性，一直报错不能添加某个属性为undefined，原来我设置的是一个字符串ref()默认是普通类型，需要变成ref({})默认对象的才行 let formRule = ref<any>({}); // 保存input表单验证规则function changedItem(key, val){ formRuleData.value[key] = val }报错图片如上...

转载 vue页面添加锚点

本文实例为大家分享了vue实现锚点定位的具体代码，供大家参考，具体内容如下这里主要是实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能如果是获取浏览器的滚动高度，各个浏览器有所差异，使用以下几种方式：Chrome： document.body.scrollTopFirefox： document.documentElement.scrollTopSafari： window.pageYOffset我这里是局部元素滚动，因此稍有差异。先附上html及css代码块：scroll-

转载 2021中高级前端面试题总结

总结了一下最近面试遇到的一些题目，比较偏React。1.HTML中居中的方式text-align:center方式，水平居中块级元素中的行内元素，如inline，inline-block margin:0 auto方式，这种对齐方式要求内部元素是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。 display:table-cell，配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将

转载 什么是脏检查？

脏检查的全名是 脏数据检查。是AngularJS命名的。脏数据也就是产生了变化的数据。脏检查因一个原因而被称为脏。它定时检查而不是直接监听属性变化。我们把这个检查称为摘要周期(digest)。angularJS监测对象变化不是像vue.js那样通过Object.defineproperty这种接口，而是在某些情况下制定策略，通过复制保存一份数据，进行快照对比，来监测变化。脏检查这个东西，其实在三大主流前端框架中或多或少都有涉及。React 每次生成新的Virtual DOM，与旧Vi..

转载 JS常用内置方法1——slice()和splice()的区别

JS常用内置方法1——slice()和splice()的区别　　以前还是纯小白的时候，总会搞混JS数组的 slice() 和splice() 方法。因为这2个方法名字太像了，就差一个字母，语法也有类似之处。　 现在久了没用，有时候也会忘记，所以做一个总结来区分一下。　　slice()　　　　slice()定义：从已有的数组中返回你选择的某段数组元素　　　　 slice()语法：arrayObject.slice(start,end)　　　　　　注：　　　　　　①...

转载 理解并实现PubSub模式

理解并实现PubSub模式假如我们正在构建一个类似于 Google Docs 的应用程序，当用户按下一个按键时，需要做的事情有很多： 新字符显示到屏幕上；插入点向后移动；将本次动作加入到撤销的历史记录中； 保持与服务器同步；拼写错误检查；统计字数和页数等等。按照传统的做法，假如我们监听 keypress 事件，并在一个处理中完成所有的任务，这想想都觉得可怕了。 那么有没有什么方法可以更好的解决这个问题，答案就是分布式事件。PubSub 模式，是 Publish/Subscribe 的缩写，意为.

转载 前端开发怎么用node和nginx？

node和nginx组合那些事对于前端开发，了解nodejs和nginx是有必要的。前端开发者自己构建项目时，更多的是自己使用nodejs+mongoDB搭建后端接口，使用nginx作为反向代理服务器。为何选用nginx？对于前端来说，我觉得它是便于学习的，方便配置的。下面是node和nginx组合的一点心得。nodejsnodejs搭建简易的前端服务接口...

转载 node搭建简单的本地服务器

首先要安装node，方法很多，可以去网上找找，可以直接去官网下载安装，新版本的node是自带npm的；安装好以后，新建一个js文件，名为server.js： 1 let http = require('http'); 2 let fs = require('fs');//引入文件读取模块 3 4 let documentRoot = 'E:/webserver'; 5 //需要访问的文件的存放目录 6 7 let server= http.createServer(functi

转载 for in 和 for of 的区别

1、for...in 循环：只能获得对象的键名，不能获得键值 for...of 循环：允许遍历获得键值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var arr = ['red', 'green', 'blue'] for(let item in a...

转载 wangeditor 粘贴word内容带＜!--[if gte mso 9]＜![endif]--＞

bug:最近遇到页面渲染数据多了<!--[if gte mso 9]<![endif]-->/<!--[if gte mso 10]>分析原因，原来是富文本编辑器粘贴word内容是的样式问题，不同富文本编辑器处理方式略有不同，不过都大同小异，解决此问题考虑二处，一处是富文本编辑是就把多余的标签去掉，一处是针对已经上线的项目，数据库已经有此类数据，再从接口取到数据时稍做处理即可。下面详细展示错误页面和bug以及解决代码，如有不足，欢迎交流！一：富文本编辑器编辑内容

转载 解析 Array.prototype.slice.call(arguments,1)

Array.prototype.slice.call(arguments,1) 经常会看到这段代码用来处理函数的参数网上很多复制粘帖说：Array.prototype.slice.call(arguments)能将具有length属性的对象 转成数组，除了IE下的节点集合（因为ie下的dom对象是以com对象的形式实现的，js对象与com对象不能进行转换）关键点：1、Array是构造函数2、arguments是类数组对象(缺少很多数组的方法)3、call让一个对象调用另一个对象的方法。.

转载 es6数组方法find()、findIndex()与filter()的总结

总结一下es6常用的数组方法find()、findIndex()与filter()find()该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：const myArr=[1,2,3,4,5,6];var v=myArr.find(value=>.

转载 微信小程序____小程序的组件用法与HTML5标签的区别

熟悉一门开发语言或是一种框架，除了了解它的基本语法、基本控件、基本属性之外，最好的方式莫过于追根溯源，与同类型的、自己熟悉的语言比较并了解它的异同，这样才能更好的去理解并记忆。下面我们先探究下它们之间的区别。小程序与传统HTML5的区别小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序就是基于HTML5开发。经过仔细研究文档和代码开发，从视图层的角度来说，小程序与传统HTML5还是有明显的区别，主要区别在于：开发工具不同。区别于

原创 一次同步与多次异步结合

相关技术背景（背景技术），与本发明最相近似的现有实现方案（现有技术）1.1 背景技术移动小程序框架mPaas， 为H5应用提供原生能力的自定义接口JSAPI,利用这些接口使用更多的原生功能，提高H5应用的用户体验。例如获取环境变量接口，初始化小程序应用时，有多条H5 http数据请求需要执行，为了保证H5数据请求的正确执行，需要初始化应用之前调用原生获取环境变量接口，根据监听原生异步回调函数获取环境变量，执行下一步的H5 http数据请求。1.2 与本发明相关的现有技术一1.2.1 现有技..

转载 MVVM 模式理解

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。　　Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架

转载 H5页面，华为手机打开不加载JS的问题

今天在做H5页面放在其他手机上面都可以刷出列表，但是就是放在华为手机上面刷不出来，怎么想都想不通，后面主管说华为手机的浏览器是严格遵守H5什么鬼东西的，然后其他浏览器做到比较好的，如果有报错就帮我们解决了，所以页面能正常展示。然后就把代码丢到IE浏览器去运行，发现了报错就是这行报错，这个是智能提示框里面的代码，也是我从网上粘过来的。仔细一看，发现他这个不是普通的单引号然后百度了一下：https://segmentfault.com/q/1010000008876108?_ea=1764027.

转载 $.ajax 中的contentType

在 cnodejs.org 论坛中有一个问题，让我也很奇怪，说是 $.ajax 设置数据类型 applicaiton/json之后，服务器端(express)就拿不到数据，好奇之下，就去翻了翻资料，发现了一个自己也没有注意到的事。于是有了这篇文章。正文$.ajax contentType 和 dataType , contentType 主要设置你发送给服务器的格式，dataType设置你收到服务器数据的格式。在http 请求中，get 和 post 是最常用的。在 jquery 的 a