Memo

首页 » Archive by category 'Memo' (Page 5)

thunkli

webkit内幕

浏览器内核 Trident Gecko WebKit 浏览器渲染页面的过程 从耗时的角度,浏览器请求、加载、渲染一个页面,时间花在下面五件事情上: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 结论 css css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 Javascript 载入后马上执行; 执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。原因:因为浏览器需要一个稳定的DOM树结构,而JS中很有可能 … 继续阅读

发表在 Memo |
thunkli

webpack中Hash、chunkhash与contenthash区别

hash hash字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的。 chunkhash chunkhash代表的是chunk的hash值。简单讲,chunk就是模块。chunkhash也就是根据模块内容计算出的hash值。 contenthash 使用extract-text-webpack-plugin单独编译输出css文件,造成上一节js/css共用hash指纹 extract-text-webpack-plugin提供 … 继续阅读

发表在 Memo | |
thunkli

React Context API

import React from ‘react’ import {render} from ‘react-dom’ const ThemeContext = React.createContext(‘light’) class ThemeProvider extends React.Component { state = {theme: ‘light’} toggleTheme = () => { this.setState(({theme}) => ({ theme: theme … 继续阅读

发表在 Memo | |
thunkli

Preload与Resource Hints

preload <!– preload stylesheet resource via declarative markup –> <link rel=”preload” href=”/styles/other.css” as=”style”> <!– or, preload stylesheet resource via JavaScript –> <script> var res = document.createElement(“li … 继续阅读

发表在 Memo |
thunkli

WebView与JavaScript通信

本文所说的APP指IOS APP(Swift),不包括Android APP。 APP如何渲染网页? 苹果提供了UIWebView组件,像浏览器一样可以加载任何网页。iOS8以后,苹果推出了新框架Webkit,提供了替换UIWebView的组件WKWebView。速度更快,占用内存少。 WKWebView 执行JavaScript //home.html //… <h1>Welcome!</h1> //… <script> function redHe … 继续阅读

发表在 Memo | |
thunkli

优化webpack打包速度

随着项目复杂度的提升,react、react-dom、react-route等一系列框架的引入,再加上babel-preset-es2015、babel-preset-react等一系列插件,webpack变得越来越慢。webpack提供了DllPlugin和DllReferencePlugin插件可以让构建速度飞起来。 DllPlugin 这个插件专门用于单独的webpack配置来创建一个dll-only-bundle。 它创建一个manifest.json文件,由DllReferencePl … 继续阅读

发表在 Memo | |
thunkli

我对redux的理解

react是单向数据流动的的框架,数据可以从顶层组件依次传递给层级最深的组件。 react组件通信 react组件树形结构犹如家族关系: 爷爷要和小红通信:爷爷告诉爸爸,爸爸告诉小红。爸爸要和叔叔通信:可以将两者交互的state提升至爷爷,通过爷爷state的改变来完成通信使命。 现实项目中需求远比上面的关系要复杂的多,状态便变得难于管理。如果能把需要通信的组件状态放到一个store的地方,这样只需要去store更新状态与之相关的视图自动更新,这样是不是简单了很多了呢? 于是就有了redux这样 … 继续阅读

发表在 Memo | |
thunkli

redux-react Provider 与 connet

普通的react组件是无法与redux交互的,因此需要react-Redux来对react组件加工。react redux主要提供了Provider与connect方法 常见示例: import React, {Component, PropTypes} from ‘react’ import ReactDOM from “react-dom”; import thunk from ‘redux-thunk’ import {createStore, applyMiddleware, combi … 继续阅读

发表在 Memo | |
thunkli

React组件数据共享

众所周知React是单向数据流动的框架,数据可以通过props一层一层的传下去。但是如果传递组件与目标组件层级相差太多,就会多出很多不必要的props传递过程。 针对此种问题,React提供了”context” API。 class Button extends React.Component { render() { return ( <button style={{background: this.props.color}}>{this.props.chi … 继续阅读

发表在 Memo | |
thunkli

Webpack实时监听在IntelliJ IDEA中修改的文件

由于很多编辑器支持“safe write”功能,并且默认启用它,这使dev server无法实时监听到文件的修改。“safe write”意味着修改不会直接写入原始文件,而是写入临时文件,当保存操作完成时,将重命名并替换原始文件。因为原始文件被删除,因此会导致文件监视器提丢失轨道。为了防止此问题,你可以在编辑器中禁用“safe write”功能。 IntelliJ – Settings > System Settings > Synchronization > di … 继续阅读

发表在 Memo | |