女王控的博客

前端

164 篇文章

Webpack 深入学习

基础 简介 entry(入口) 入口起点(entry point)即是 webpack 通过该起点找到本次项目所直接或间接依赖的资源(模块、库等),并对其进行处理,最后输出到 bundle 中。入口文件由用户自定义,可以是一个或者多个,每一个 entry 最后对应一个 bundle。 output(出口) 通过配置 output 属性可以告诉 webpack 将 bundle 命名并输出到对应的位置。 loader webpack 核心,webpack 本身只能识别 js 文件,对于非 js… »

深入理解 Webpack 源码

webpack 构建后代码 打包单一模块 webpack.config.js chunk1.js 打包后,main.js(webpack 生成的一些注释已经去掉) 这其实就是一个立即执行函数,简化一下就是: 看一下自运行的匿名函数里面干了什么: 整个函数里就声明了一个变量 installedModules 和函数 ,并在函数上添加了一个 m,c,p 属性,m 属性保存的是传入的模块数组,c 属性保存的是 installedModules 变量,P… »

深入理解 Babel

处理流程 首先从源码解析(Parsing)开始,解析包含了两个步骤 词法解析(Lexical Analysis) 词法解析器(Tokenizer)在这个阶段将字符串形式的代码转换为 Tokens(令牌)。Tokens 可以视作是一些语法片段组成的数组。例如 词法解析后的结果如下: 从上图可以看,每个 Token 中包含了语法片段、位置信息、以及一些类型信息,这些信息有助于后续的语法分析。 语法解析(Syntactic Analysis) 这个阶段语法解析器(Parser)会把 Tokens… »

前端模块化详解

背景 在 JavaScript 发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今 CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着 web2.0 时代的到来,Ajax 技术得到广泛应用,jQuery 等前端库层出不穷,前端代码日益膨胀,此时在 JS 方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化,为什么要模块化,模块化的优缺点以及模块化规范,并且介绍下开发中最流行的 CommonJS、AMD、ES6、CMD… »

浏览器渲染合成层

浏览器渲染流程 首先简单了解一下浏览器请求、加载、渲染一个页面的大致过程: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 这里主要将客户端渲染展开梳理一下,从浏览器内核拿到内容(渲染线程接收请求,加载网页并渲染网页),渲染大概可以划分成以下几个步骤: 解析 html 建立 dom 树 解析 css 构建 render 树(将 CSS 代码解析成树形的数据结构,然后结合 DOM 合并成 render 树) 布局 render 树(Layout/reflow… »

0%