前端面经学习部分

sleep_earily
134 阅读3分钟

浏览器进程

  1. Browser 进程：浏览器的主进程，只有一个。负责浏览器界面显示，与用户交互
  2. GPU 进程：最多一个，用于 3D 绘制，包含
    • GUI 渲染线程
    • js 引擎线程
    • 事件触发线程
    • 定时触发器线程
    • 异步 http 请求线程

GUI渲染线程与JS引擎线程是互斥的，所以script需要放到最后，优先加载页面，使用async和defer不会阻塞dom渲染，可以异步加载

  • defer：dom加载完成后加载js

脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行,等dom的加载)

web worker

可以使用web worker开一个线程用于资源计算 当开发人员发现 JS 引擎线程超负荷运作的时候，可以通过Web Worker提供的API开辟一个新的线程，用于独立的运行脚本程序（但是该脚本程序不能操作DOM，主要用于计算），避免 JS 引擎线程阻塞 GUI 线程渲染视图。

Vue.js的template编译

简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

优点在于静态节点的优化——当没有变化时不会更新渲染，

vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

首先：在css里加上以下代码

[v-cloak] {
    display: none;
}
复制代码

如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

vuex的getter

  • getters 可以认为是 store 的计算属性,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值.

从vuex中取的数据，不能直接更改，需要浅拷贝对象之后更改，否则报错

在v-model上怎么用Vuex中state的值

需要使用computed属性

// ... 
computed: { 
    message: { 
        get () { 
            return this.$store.state.message 
        }, 
        set (value) { 
            this.$store.commit('updateMessage', value) 
         } 
     } 
 }

路由按需加载

随着项目功能模块的增加，引入的文件数量剧增。如果不做任何处理，那么首屏加载会相当的缓慢，这个时候，路由按需加载就闪亮登场了。

webpack< 2.4 时
{ 
    path:'/', 
    name:'home',
    components:resolve=>require(['@/components/home'],resolve)
} 
webpack> 2.4 时
{ 
    path:'/', 
    name:'home', 
    components:()=>import('@/components/home')
}

import()方法是由es6提出的，动态加载返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。

作者：monkeysoft
链接：juejin.cn/post/685003…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。`

作者：monkeysoft
链接：juejin.cn/post/685003…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝