发表于 | | 阅读次数:

优化结果：

  • 结果首屏时间从20多秒缩减为1s

nginx配置js压缩

1
2
gzip on
gzip types application/javascript ...

配置etag 和expire

图片资源优化

1. 压缩图片，tinypng

2. 图片懒加载, 加载条件为：元素的scrollTop - clientHeight > window.scrollTop

JS优化

1. 使用延迟脚本或者异步脚本

2. 入口文件或者首页依赖的包，不要放进vendor

  • 虽然分离公共的库进vendor可以加快打包速度，但是增加了vendor的体积，

  • 非入口文件依赖的vendor使用async，入口文件和首页文件，使用defer，可以使用文件js按顺序执行，并且不阻塞页面渲染。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    new HtmlWebpackPlugin({
        template: paths.client('index.html'),
        chunksSortMode: 'dependency',
        hash: false,
        // favicon: paths.client('static/favicon.ico'),
        filename: 'index.html',
        inject: 'body',
        minify: {
          collapseWhitespace: true
        }
      }),

  • 插入延迟或者异步脚本，需借助html-webpack-plugin的插件

    1
    2
    3
    4
    new ScriptExtHtmlWebpackPlugin({
        defer: ['vendor1', 'app'],
        defaultAttribute: 'async'
      })

发表于 | 分类于 | | 阅读次数:

常见问题

你在昨天/本周学到了什么？

编写代码的哪些方面能够使你兴奋或感兴趣？

你最近遇到过什么技术挑战？你是如何解决的？

在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？

请谈谈你喜欢的开发环境。

你最熟悉哪一套版本控制系统？

你能描述当你制作一个网页的工作流程吗？

假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?

你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?

你如何对网站的文件和资源进行优化？

浏览器同一时间可以从一个域名下载多少资源？有什么例外吗？

请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？

请写一个简单的幻灯效果页面。

如果今年你打算熟练掌握一项新技术，那会是什么？

请谈谈你对网页标准和标准制定机构重要性的理解。

什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？

请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。

请解释 CSS 动画和 JavaScript 动画的优缺点。

什么是跨域资源共享 (CORS)？它用于解决什么问题？

HTML问题

doctype的作用是什么

浏览器标准模式 (standards mode) 、准标准模式（almost standards mode）和混杂(怪异)模式 (quirks mode) 之间的区别是什么？

  • 怪异模式：不同的浏览器在页面的渲染上没有统一的规范，产生了差异，那些网页是按照当时占统治地位的浏览器的渲染模式来渲染的，因为不同浏览器解析方式不同，所以称之为怪异模式
  • 标准模式是指，浏览器按照W3C的最新标准解析执行代码
  • 浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页
  • 详细https://blog.csdn.net/xujie_0311/article/details/42044277

HTML 和 XHTML 有什么区别？

  • 实际上 W3C 下与网页（超文本）相关的标准有两个系列：HTML 系列和 XHTML 系列。
    前者从 HTML 第一版一直发展到 HTML 4.x、HTML5，
    而 XHTML 系列从 XHTML 1.0、1.1、2.0 跳跃到 HTML5 的一部分：所谓的“XHTML5”。
    HTML 系列的工作重点在于丰富与超文本相关的功能、标记，提供较好的兼容性，更加面向“人”；
    而 XHTML 系列的工作重点在于将 HTML 改为更加符合 XML 严格规范的格式，更加面向“机器”。

主要区别

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

使用 data- 属性的好处是什么？

  • 在JavaScript框架变得流行之前，前端开发者经常使用data-属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。
  • 这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。
  • 而现在，不鼓励使用data-属性。
    原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。

将HTML5看做开放的网络平台，它的基本构成条件是什么

  • 语义-提供更准确的描述内容
  • 连接-提供新的方式与服务器通信
  • 离线和存储-允许网页在本地存储数据并有效地离线运行
  • 多媒体-在Open Web中，视频和音频被视为一等公民
  • 2D/3D图形和特效-提供更多更富有表现力的演示选项
  • 性能和集成-提供更快的访问速度和性能更好的计算机硬件
  • 设备访问-允许使用各种输入、输出设备
  • 外观-可以开发丰富的主题

请描述cookie、sessionStorage和localStorage的却别

上面提到的技术名词，都是在客户端以键值对存储的存储机制，并且只能将值存储为字符串。

  • 后两者都由客户端初始化，cookie也可以有服务器使用set—Cookie请求头初始化
  • cookie手动设置过期时间，session页面关闭时过期，local永不过期
  • Cookies会通过Cookie请求头自动发给服务器，而后两者不会
  • cookie容量为4KB，后两者都是5MB
  • cookie和local任一窗口都可访问，session仅在当前窗口
cookie localStorage sessionStorage
由谁初始化 客户端或服务器，服务器可以使用Set-Cookie请求头。 客户端 客户端
过期时间 手动设置 永不过期 当前页面关闭时
在当前浏览器会话（browser sessions）中是否保持不变 取决于是否设置了过期时间 是 否
是否随着每个 HTTP 请求发送给服务器 是，Cookies 会通过Cookie请求头，自动发送给服务器 否 否
容量（每个域名） 4kb 5MB 5MB
访问权限 任意窗口 任意窗口 当前页面窗口

<script>、<script async>和<script defer>的区别?

  • script- HTML解析中断，脚本被提取并立即执行。执行解析后，HTML解析继续
  • script async - 脚本的提取、执行与HTML的解析并行，不会阻塞页面继续解析，脚本执行完毕可能在HTML解析完毕之前。
    当脚本与页面上其他脚本独立式，可以使用async
  • script defer- 仅仅是脚本的提取和HTML解析并行，脚本执行将在HTML执行完解析完成后进行。
    如果有多个含defer的脚本，脚本的执行顺序按照在document中出现的位置，从上到下顺序执行。

注意：没有src属性的脚本，async和defer属性会被忽略。

为什么最好把JS的<script>标签恰好放在</body>之前，有例外情况吗?

  • 把<link>标签放在<head></head>之间是规范要求的内容
    。此外，这种做法可以让页面逐步呈现，提高了用户体验。
    将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。
    一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把<script>标签恰好放在</body>之前

  • 脚本在下载和执行期间会阻止HTML解析，把<script>标签放在底部，保证HTML首先解析完成，将页面呈现给用户。
    同时，将<script>标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，<script>使用defer属性，放在<head>中

什么是渐进式渲染

  • 渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术
    一些举例：
  • 图片懒加载：——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
  • 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
  • HTML异步加载： HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在。
  • 框架中的路由懒加载，代码分离

HMTL5新标签

  • header、nav、section、footer、article、aside、hgroup、figure
    、audio、video、source、canvas、map、area、

为什么在<img>标签中使用srcset属性？请描述浏览器遇到该属性后的处理过程

  • 因为需要设计响应式图片。我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。

    srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。

    sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择

    所以，有了这些属性，浏览器会

    1. 查看设备宽度
    2. 检查size列表中哪个媒体条件威震
    3. 查看给予该媒体查询的槽大小
    4. 加载srcset列表中引用的最接近所选槽大小的图片
    1
    2
    3
    4
    5
    6
    7
    <img srcset="elva-fairy-320w.jpg 320w,
                 elva-fairy-480w.jpg 480w,
                 elva-fairy-800w.jpg 800w"
         sizes="(max-width: 320px) 280px,
                (max-width: 480px) 440px,
                800px"
         src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

你有过使用不同模版语言的经历吗？

  • 有过，比如 Pug （以前叫 Jade）、ejs 等等。
    在我看来，这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能。大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。

CSS问题

CSS选择器的优先级如何计算？请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？

请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么

  • 重置（Resetting）： 重置意味着除去浏览器的所有默认样式。对于页面所有的元素，像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。
  • 标准化：没有去掉所有的默认样式，保留了一部分有用的，还纠正了一些常见错误

通常使用标准化就可以了
当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。

请阐述Float定位的工作原理。

  • 浮动元素从网页的正常流动中移出，但保留了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流脱离
  • 如果浮动元素的父元素只包含浮动元素，那么该父元素的高度会坍塌为0，我们可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题(clear: both | left | right)
  • 把浮动元素的父元素属性设置为overflow: auto或overflow: hidden,会使其内部子元素形成BFC，并且父元素会扩张自己，使其能够包围它的子元素

请阐述z-index，并说明如何形成层叠上下文，（stacking context）

  • z-index属性控制元素的层级（重叠元素的垂直叠加顺序），只能作用于position值不为static的元素
  • 未定义z-index时，按照元素在DOM中出现的先后顺序叠加
  • 非静态元素及其子元素将始终覆盖静态(static)定位元素之上
  • 在一组层叠上下文(即包含多个图层的元素)，其子元素的z-index值是相对于该父元素而不是根节点元素，
  • 如果元素 B 位于元素 A 之上（兄弟关系），即使元素 A 的子元素 C 具有比元素 B 更高的z-index值，元素 C 仍然在B之下

详情：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

请阐述BFC（Block Formatting Context）及其工作原理

创建BFC的条件（只要元素满足下面任一条件即可触发 BFC）

  • 浮动元素：float不是none,（left | right | inherit)
  • 绝对定位元素:position（absolute，fixed）
  • display 为以下其中之一的值:table-cells、table-caption、inline-block、flex、或inline-flex。
  • overflow不是visible：（hidden，auto，scroll）

作用

有哪些清除浮动的技术，都适用哪些情况？

  • 添加一个空div作为兄弟：<div style="clear: both;"/>
  • Clearfix方法,伪元素选择器::after
1
2
3
4
5
.clearfix::after {
   content: '',
   display: block;
   clear: both;
}
  • 父级元素设置overflow:hidden | auto

大型项目中一般使用第二种，当子元素高度大于父元素时，设置overflow:hidden可能使其子元素显示不完整

请解释什么是雪碧图(css sprites),以及如何实现

雪碧图是把多张图片整合到一张图片上。他被运用在众多使用了很小图标的网站上。实现方式：

  • 使用生成器将多张图片打包成一张雪碧图，并为其生成合适的CSS
  • 每张图片都有相应的CSS类，该类定义了background-image、background-position、和background-size属性
  • 使用图片时，将相应的类添加到你的元素中

好处：

  • 减少请求多张图片的HTTP请求数（一张雪碧图只需一个请求）。对于HTTP2而言，加载多张图片不再是问题
  • 提前家在资源，防止在需要时才开始下载引发的问题，比如只出现在:hover伪类中的图片，不会出现闪烁

生成器：https://www.toptal.com/developers/css/sprite-generator

你最喜欢的图片替换方法是什么，你如何选择使用。

如何解决不同通过浏览器样式兼容性问题

  • 使用autoprefixer自动生成css属性前缀
  • 直接兼容不同浏览器的CSS库，如Bootstrap
  • 使用reset CSS 或者normalize.css
  • 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。

如何为有功能限制的浏览器提供网页？使用什么样的技术和流程？

  • 优雅降级：为现代浏览器构建应用，同时确保它在旧版本浏览器中正常运行
  • 渐进增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能
  • 利用caniuse.com检查特性支持；
  • 使用Modernizr进行特性检测
  • 使用autoprefixer解决css的兼容性

有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？

  • visibility: hidden: 元素仍在页面流中，并占用空间
  • width: 0; height: 0: 使元素不占用空间，导致不显示它
  • position: absolute; left: -99999px: 将它置于屏幕之外
  • text-indent: -9999px: 这是适用于block元素中的文本
  • Metadata：
  • WAI-ARIA：

你使用过栅格系统吗？偏爱哪一个？

  • 使用过antd和bootstrap的栅格系统，看项目需求和使用的库

你是否使用过媒体查询或移动优先的布局？

  • 根据屏幕的尺寸改变导航栏的样式

你熟悉 SVG 样式的书写吗？

如何优化网页的打印样式？

  • 分开屏幕显示与打印的样式

    <link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />

    <link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

  • 设计一份打印样式表
    i. 用点单位(pt)指定大小
    1
    2
    3
    4
    5
    6
    7
    body {

      font-family: "Times New Roman", serif;

      font-size: 12pt;

      }

实在太简单了,比起用像素单位来说,这个应该更能想象12点字体会印多大,同时我们也选用serif字体,这种字体打印出来比较细致,而且比较容易阅读.
ii. 隐藏不必要的标签节省墨水

1
2
3
4
5
6
7
8
9
10
11
12
13
body {

  font-family: "Times New Roman", serif;

  font-size: 12pt;

  }

#nav, #sidebar, #advertising, #search {

  display: none;

  }

iii. 去掉背景图片和颜色

1
2
3
4
5
body {

   background: none;

   }

除了screen，你还能说出一个 @media 属性的例子吗？

1
2
3
4
5
<style type="text/css">
@import url("screenstyles.css") screen;
 @media print {
     /* 打印时使用的样式放置在此 *
}

在书写高效 CSS 时会有哪些问题需要考虑？

  • 避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。
  • 原则上建议为独立的样式使用 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。
  • 搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）和合成（compositing）。在写样式时，避免触发重新布局的可能。

用 CSS 预处理的优缺点分别是什么？请描述你曾经使用过的 CSS 预处理器的优缺点。

优点：

  • 提高CSS可维护性
  • 易于编写嵌套选择器
  • 引入变量，增加主题功能，可在不同项目中共享主题文件
    缺点：
  • 需要预处理工具
  • 重新编译的时间可能会很慢

sass的优缺点
通过node-sass使用sass，它用 C ++ 编写的 LibSass 绑定，在Node版本切换时，必须重新编译
less用javascript编写，与NodeJS高度结合

如果设计中使用了非标准的字体，你该如何去实现？

  • 使用@font-face并为不同的font-weight定义font-family

请解释浏览器是如何判断元素是否匹配某个CSS选择器

  • 浏览器从最右边的选择器（关键选择器）开始，从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。
  • 浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有的元素集合）。
    然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，知道整个选择器匹配完，还在集合中的元素就匹配这个选择器了

请描述伪元素及其用途。

  • CSS伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可用于装饰(:first-line, :first-letter)或将元素添加到标记中(与content:…)组合，而不必修改标记（：before，：after）

说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。

请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

  • 元素默认box-sizing: content-box,元素的宽高width和height只会取决于内容(content)的大小
  • border-box改变计算元素width和height的方式，border和padding的大小也会计算在内

display的属性值有哪些？

  • none, block, inline, inline-block, table, table-row, table-cell, list-item, flex

请解释 inline 和 inline-block 的区别？

block inline-block inline
大小 填充父容器的宽度 取决于内容 取决于内容
定位 从新的一行开始，并且不允许旁观有HTML元素(除非是float) 与其他内容一起流动 与其他内容一起流动
能否设置width和height 能 能 不能
能否使用vertical-align对齐 不可以 可以 可以
边距和填充 各个方向都存在 各个方向都存在 只有水平方向存在。尽管border和padding在content周围，垂直方向上的空间取决于line-height

relative、fixed、absolute、和static四种定位有什么区别？

  • static: 默认定位属性值。指定元素使用正常的布局行为，此时给top，right，bottom，left，z-index属性设置值无效
  • relative: 参照物为元素原来所处文档流中的位置
  • absolute: 不为元素预留空间，参照物为该元素最近的非static祖先元素
  • fixed: 不为元素预留空间，参照物为屏幕视口(viewport)，即使页面滚动时也不改变
    fixed属性会创建新的层叠上下文，当元素祖先的transform属性非none时，容器由视口改为该祖先
  • sticky:

你使用过哪些现有的 CSS 框架？你是如何改进它们的？

  • Blueprint是比较早的基于静态CSS的框架
  • Bootstrap是基于less的框架。模块化的框架你要修改起来也是很方便的，基本上修改变量就可以了。

你了解 CSS Flexbox 和 Grid 吗？

  • Flexbox 解决了 CSS 中的许多常见问题，例如容器中元素的垂直居中，粘性定位（sticky）的页脚等。
    Bootstrap 和 Bulma 基于 Flexbox，这是创建布局的推荐方式。
  • Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是！），但目前浏览器支持并不广泛。

为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？

你有没有使用过视网膜分辨率的图形？当中使用什么技术？

— 使用更高分辨率的图形（显示尺寸的两倍）来处理视网膜显示。
更好的方法是使用媒体查询，像@media only screen and (min-device-pixel-ratio: 2) { … }，然后改变background-image。

  • 对于图标类的图形，可能使用 svg 和图标字体，因为它们在任何分辨率下，都能被渲染得十分清晰。
  • 响应式图片。通过设置img标签的srcset， sizes属性

什么情况下，用translate()而不用绝对定位？什么时候，情况相反,

  • 使用绝对定位、相对定位属性加上 top、left ，会影响offsetTop和 offsetLeft （元素相对于父级参照物的偏移距离）的值；使用translate(),offsetTop和 offsetLeft 的值都是固定不变的。

如果实现一个高性能的CSS动画效果？

CSS3动画

  • transition动画
  • 帧动画,用animate属性

哪些方式实现垂直居中和水平居中

实现圣杯布局，双飞翼布局

  • 双飞翼是通过中间box新建子元素并设置外边距隔离各列
    圣杯布局是通过设置父容器的内边距来隔离各列

Javascript

React

虚拟DOM是啥？以及diff算法原理

性能

你会用什么工具来查找代码中的性能问题？

  • Page Speed

其他问题

常见排序算法：冒泡，快排，插入排序

二分查找：递归和非递归

数组去重

babel原理

实现一个幻灯片功能

你最近遇到过什么技术挑战？你是如何解决的？

浏览器输入网址后做了什么？

项目

Echarts组件封装深入，CMDB模块代码优化

Tree组件结合权限生成树

整体代码优化

网页性能优化手段

  • 利用浏览器缓存，设置ETag和expire；nginx配置gzip on并且排除图片类型
  • 减少首屏渲染时间：减少请求数量和减小请求资源的体积
  • 利用webpack对资源打包压缩：压缩html，分离css并压缩，压缩JS
  • 图片资源优化：1. 使用雪碧图， 2. 不要再HTML中缩放图片 3.使用字体图片，iconfont
  • 网络传输性能检测工具——Page Speed
  • 使用CDN，CDN域名与主站域名不同
  • 页面渲染性能优化：浏览器渲染过程，渲染引擎和JS引擎，DOM渲染层与GPU硬件加速，
  • 重绘与重排：重绘布局不变，效果改变；重排，元素尺寸改变引起布局改变，重排必定引发重绘，尽量避免引发重排

发表于 | 分类于 | | 阅读次数:
安装相关依赖
yarn add koa koa-static koa-convert koa-webpack-middleware -D
  • koa-convert: 由于koa2中使用async await异步中间件，而koa-webpack-middleware仍然是generator函数，需要用koa-convert转换下
sever.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const Koa = require('koa')
const webpack = require('webpack')
const serve = require('koa-static')
const convert  = require('koa-convert')
const koaWebpackMiddleware = require('koa-webpack-middleware')
const webpackDevMiddleware = koaWebpackMiddleware.devMiddleware
const webpackHotMiddleware = koaWebpackMiddleware.hotMiddleware

const app = new Koa()
const config = require('./webpack.config')
const compiler = webpack(config)

const wdm = webpackDevMiddleware(compiler, {
  watchOptions: {
    aggregateTimeout: 300,
    poll: true
  },
  reload: true,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
})
app.use(convert(wdm))

app.use(convert(webpackHotMiddleware(compiler)))

app.use(serve(config.output.publicPath))

const server = app.listen(3000, 'localhost', function (err) {
  if (err) {
    console.error(err)
    return
  }
  console.log('Example app listening on port 3000!\n');
});

发表于 | | 阅读次数:

Mac OS X上编译V8

安装depot_tools

  • 克隆仓库

    git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git`

  • 追加环境变量

    在~/.bashrc或者~/.zshrc里面加上这一句（假设你下载的depot_tool位于路径/path/to/depot_tools）
    export PATH=$PATH:/path/to/depot_tools

    下载V8

  • 确保depot是最新版
    client

  • 下载v8
    fetch v8

  • 创建本地新分支

    git new-branch mywork

  • git pull 更新V8

  • gclient sync 更新依赖

编译

发表于 | 分类于 | | 阅读次数:

react-family升级webpack4

依赖

重新安装webpack相关依赖包
  • webpack
  • 新增加webpack-cli
  • html-webpack-plugin
  • webpack-dev-server
  • 各种loader,主要是file-loader,url-loader，其他看着办
移除
  • uglifyjs-webpack-plugin: production莫斯自动支持
    -

配置改动

CommonsChunkPlugin

移除

webpack.config.optimization.splitChunks({
1
2
  name: 'vendor'
}),

修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
optimization: {
       runtimeChunk: true,
       splitChunks:{
           chunks: 'all',
           minSize: 30000,
           minChunks: 1,
           maxAsyncRequests: 5,
           maxInitialRequests: 3,
           name: false,
           cacheGroups: {
               vendor: {
                   name: 'vendor',
                   chunks: 'initial',
                   priority: -10,
                   reuseExistingChunk: false,
                   test: /node_modules\/(.*)\.js/
               },
               default: {
                   minChunks: 2,
                   priority: -20,
                   reuseExistingChunk: true
               }
           }
       }
   }

mode

生产环境默认开启了很多代码优化（minify，splite等）
开发时开启注视和验证，并且自动加上了eval devtool
生产环境不支持watching，开发环境优化了重新打包的速度
自动设置process.env.NODE_ENV到不同环境，也就是不需要DefinePlugin来做这个了
如果你给mode设置为none，所有默认配置都去掉了

  • 方式1: 启动命令后加入参数

    1
    2
    3
    4
    "scripts": {
       "dev": "webpack --mode development",
       "build": "webpack --mode production"
     }

  • 方式2: 配置文件中加入mode属性

    1
    2
      mode: 'production' // development
    };

  • development模式下

    浏览器调试工具
    开发阶段的详细错误日志和提示
    快速和优化的增量构建机制

  • production模式下

    开启所有的优化代码
    更小的bundle大小
    去除掉只在开发阶段运行的代码
    Scope hoisting和Tree-shaking
    自动启用uglifyjs对代码进行压缩

ExtractTextWebpackPlugin
  • 使用mini-css-extract-plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // replace ExtractTextPlugin.extract({..})
          "css-loader"
        ]
      }
    ]
  }
}

发表于 | 分类于 | | 阅读次数:

ref

  • ref添加到Component上获取的是Component实例，添加到原生HTML上获取的是DOM对象

ReactDOM.findDOMNode

  • 当传入参数是DOM，返回的就是DOM， 当参数是Component，返回的是Component render方法中返回的DOM

发表于 | 分类于 | | 阅读次数:

react-draggable

参数说明

  • axis
    值为'x'/'y'
只能在x或y轴上移动
  • grid
    值为整形数组 [25, 25], [25, 50]
例:<Draggable grid={[25, 80]}></Draggable>
表明x轴和y轴移动的最小单位为多少px
  • bounds
    例：<Draggable bounds={{top: -100, left: -100, right: 100, bottom: 100}} ></Draggable>
说明: 上下左右四个边界最大所能抵达的范围

设置拖拽可用区和禁用区

1
2
3
4
5
6
7
8
9
10
11
12
13
<Draggable handle="strong" {...dragHandlers}>
          <div className="box no-cursor">
            <strong className="cursor"><div>Drag here</div></strong>
            <div>You must click my handle to drag me</div>
          </div>
        </Draggable>

        <Draggable cancel="strong" {...dragHandlers}>
          <div className="box">
            <strong className="no-cursor">Can't drag here</strong>
            <div>Dragging here works</div>
          </div>
        </Draggable>

发表于 | 分类于 | | 阅读次数:

Hexo发布文章基本步骤

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

功能丰富的Next主题

  • 主题配置： 添加标签，分类
  • 第三方服务: 评论系统，分享，浏览量统计

更多内容: Next

发表于 | 分类于 | | 阅读次数: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
user www-data;
worker_processes 4;
worker_rlimit_nofile 65535;
pid /run/nginx.pid;

events {
        worker_connections 65535;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;

        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        server {
                listen       80;
                #server_name  www.chengjinlu.top;
                server_name  localhost;

                #charset koi8-r;

                #access_log  logs/host.access.log  main;

                rewrite ^/(.*)/$ /$1 permanent;

                location / {
                        #try_files $uri $uri/ /html/index.html;
                        #rewrite ^/api/(.*)$ /$1 break;
                        #try_files $uri $uri/ /index.html;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_set_header Host  $http_host;
                        proxy_set_header X-Nginx-Proxy true;
                        proxy_set_header Connection "";
                        proxy_pass http://127.0.0.1:3000;
                        proxy_redirect off;
                        #root   html;
                        #root   html;
                        #index  index.html;
                }
        }
}