think
think copied to clipboard
bytemofan
think in fe
## nginx是什么？ nginx是俄罗斯人 Igor Sysoev为俄罗斯访问量第二的Rambler.ru站点开发的一个十分轻量级的HTTP服务器。它是一个高性能的HTTP和反向代理服务器，同时也可以作为IMAP/POP3/SMTP的代理服务器。nginx使用的是BSD许可。 Nginx 以事件驱动的方式编写，所以有非常好的性能，同时也是一个非常高效的反向代理、负载平衡。 Nginx 因为它的稳定性、丰富的模块库、灵活的配置和低系统资源的消耗而闻名。 nginx适合用来做mongrel clusters 的前端 HTTP 响应。 ## 为什么要用nginx，nginx有什么特点？ [nginx的特点](https://www.ctolib.com/topics-101000.html)： - 核心特点：高并发请求的同时保持高效的服务 - 热部署 - 低内存消耗 - 处理响应请求很快 - 具有很高的可靠性 同时，nginx也可以实现高效的反向代理、负载均衡。 前端可以用nginx做些什么？ -...
webpack一般是配合单页面应用使用，但并不是所有的web应用都是单页的，有多个页面的情况还是很多的，当然你可以用其它的构建工具来打包，但对于习惯了webpack的你来说，要是能直接在webpack上做少许配置就可以支持多页面的打包构建，岂不乐哉！ ## 准备工作 - webpack已安装 - webpack-dev-server已配置 - js、css、图片、字体等的loader都已配置完毕 ## 多页HTML处理 既然是多页面，也就是说有多个HTML页面需要处理，而且得根据对应的HTML页面，打包对应页面的业务逻辑代码。比如我们最后想要的打包目录结构是这样的：  我们有三个页面，login.html、index.html、crop.html，我们分别打包出对应的css文件login.css、index.css、crop.css，且js也是如此的打包，可以看一下最后输出的index.html： ```html index-page Hello World! 这是一个多页面的webpack配置demo ``` index.html自动插入对应的index.css、index.min.js和公共库代码vendors.min.js。 为了实现这个目的，我们把我们的src目录作如下组织：  template文件夹中放置html的模板页面，这里配合[html-withimg-loader](https://www.npmjs.com/package/html-withimg-loader)还可以实现模板的拆分： ```javascript #include("./layout/meta.html") crop-page #include("./layout/header.html") #include("./layout/footer.html") ```...
前端开发过程中，总是会遇到跨域的问题。解决开发过程中的跨域问题的方式有多种： - webpack的webpack-dev-server提供的[proxy](https://webpack.js.org/configuration/dev-server/#devserver-proxy)功能 - nginx反向代理 - nodeJS原生实现 - nodeJS的代理模块[http-proxy](https://github.com/nodejitsu/node-http-proxy) - windows系统下使用Fiddler - MacOS系统下使用charles 思路就是把前端的API访问地址代理到对应的服务器地址或文件上去，比如开发时，我们访问的API为： `http://localhost:8000/m/user/info` 我们要拿到数据，就得代理到服务器或mock服务器： `http://xxx.test.com/m/user/info`。 也就是访问`http://localhost:8000/m/user/info`实际上就是在访问`http://xxx.test.com/m/user/info`。 但我们做前后端分离时，需要在线上环境使用代理服务的时候，在不希望使用nodejs的情况下，nginx就成了我们最好的选择，借助 Nginx 强大的反向代理功能，我就在开发机上轻松的模拟出了真实环境，并且可以愉快的开发和调试了。
Content-type用于指定请求和响应的HTTP内容类型。可以显式的指定，默认为text/html。 网络请求中，常用的Content-Type有以下几种： - `text/html` - `text/plain` - `text/css` - `text/javascript` - `image/jpeg` - `image/png` - `image/gif` - `application/x-www-form-urlencoded` - `multipart/form-data` - `application/json` - `application/xml` - ...... 其中，`text/html`、`text/plain`、`text/plain`、`text/javascript`、`image/*`都是常见的页面资源类型。 `application/x-www-form-urlencoded`、`multipart/form-data`、`application/json`、`application/xml`这四个则是ajax请求，表单提交或上传文件常用的资源类型。 更多资源类型参考[这里](http://tool.oschina.net/commons)。 ###...
## 实例化 实例化可以理解为组件第一次被创建，生成一个实例。会依次执行以下方法： 1. getDefaultProps() 2. getInitialState() 3. componentWillMount() 4. render() 5. componentDidMount() ### getDefaultProps() 对于每个组件的实例来说，这个方法只会调用一次，用于设置组件的默认props。后续该类的应用都不会被调用。 es5方式： ```javascript var App = React.creatClass({ getDefaultProps: function(){ return { name: 'pomy', git: 'dwqs'...
问题可以换个问法： **translate3d(x,y,z)为什么比translate(x,y)快？** 参考链接： - [CSS动画原理及硬件加速](http://www.cnblogs.com/shytong/p/5419565.html) - [GPU硬件加速](http://qkxue.net/info/38850/GPU)