标签归档:前端

c君不在

2018/10/07

React 的行内条件渲染(inline conditional rendering)能够在无 else 分支的情况下简化条件渲染,这是由子元素定义及渲染决定的。

const ele = (
  <div>
    <p>{true}</p>
    <p>{true && 1}</p>

    <p>{false}</p>
    <p>{false && 2}</p>
  </div>
);

对应的 JavaScript 代码是

const ele = React.createElement(
  "div",
  null,
  React.createElement("p", null, true),
  React.createElement("p", null, true && 1),
  React.createElement("p", null, false),
  React.createElement("p", null, false && 2)
);

true && 1 等的表达式结果作为子元素去渲染时,使用  ChildReconciler#createChild ,其中仅当子元素类型(typeof)是 stringnumberobject 且不为 null 时才渲染,所以 true / false 则不会渲染。

继续阅读

【高性能网站建设进阶指南】读书笔记

高性能网站建设进阶指南

无阻塞加载脚本

无阻塞加载外链脚本的方法有:

  • XHR Eval,xhr 加载后 eval。
  • XHR 注入,xhr 加载后,创建 script 元素 scriptEle,然后把加载到的内容写进 scriptEle 的 text 属性来运行。
  • Script in Iframe,通过 frames/contentWindow 以及 parent/top 等来在父子窗口间相互调用。
  • Script DOM Element,动态创建 script 元素,然后设置 src 属性来加载外部脚本。
  • Script Defer,延迟执行,但执行顺序和声明 defer 的顺序一致,阻塞 DOMContentLoaded 事件。
  • document.write Script Tag,多个脚本并行下载,但依然阻塞其它类型资源,document.write("<script src='a.js'><\/script>")

继续阅读

国情之IE

前些天观看过别人的一个项目,因为没多详细看,后台做得如何不清楚。不过就前端这方面来说,我觉得做得很烂。

首先,他们应该一开始就没有认真规划好,从得到的HTML源码来看,结构非常之混乱。先不说国内常见的table嵌套布局问题,为了达到行间间距的目的,他们甚至使用一个tr来实现。也许是我从来没用过table来实现布局的原因,我非常的无语。

另外,他们除了把样式直接coding在源文件中外,还很很多地方是直接使用HTML中定义的标签来实现样式控制而不是CSS代码。至于别的关于性能优化方面的问题就更不用说了。

不过,我倒是对他们使用table来布局表示理解,因为那个项目面向的是医院内部,面向的是一个IE6的世界。
继续阅读