前端优化实践总结

[stuxt]

记录前端性能优化的实践

[stuxt]

目录

• 静态文件压缩（和基于gulp的前端自动化构建工具环境的搭建）
• 静态资源请求合并（基于nginx-http-concat模块）
• 充分合理的使用服务器和客户端缓存（提高性能）
• 前后端分离（由服务端渲染调整为客户端渲染，模板控制权交由前端控制）

[stuxt]

1、减少请求数量 1.1请求合并

Nginx的淘宝nginx_concat_module开源模块来实现。（动态打包）

优势：能扩展动态按需地实现首屏同步加载，非首屏动态异步加载。 1.2文件合并

Gulp或者Gulp+webpack来实现文件合并。（静态打包）

优势：能够减少每次请求服务器的性能消耗，打包工作在发布构建阶段中完成。

[stuxt]

每一个资源的请求都会发起一个http发请求，而一个http请求则会大致经过：

域名解析以及DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据的过程，过多的请求则会在不断请求的各个环节中浪费很多的时间，影响页面加载速度。

[stuxt]

1、修改nginx_http_concat 的源文件修改 为

static ngx_str_t  ngx_http_concat_default_types[] = {

    ngx_string("application/javascript"), #新增类型

    ngx_string("application/x-javascript"),

    ngx_string("text/css"),

    ngx_null_string

};

重新编译nginx；

2、vi nginx/conf/mime.types

    application/javascript                js;

 修改为

    application/x-javascript                js;