昨天很迷糊的完成了第一次公司分享会。全程盯着PPT屏幕，不敢面对前来捧场的小伙伴，紧张到结束了都没理清自己说了些什么，预计的半小时内容也拖堂到近1个小时。舞台经验尚浅，同志继续努力！

分享的初衷是分享自己目前的开发方式和性能排查方式。为了弥补，手写后记一篇，避免涉及太多技术点，本文只简单概括一下（不含现场演示内容）。

简单回顾：

分享的两个小问题——

1、前端工程化

2、浏览器渲染原理

关于前端工程化。随着web应用复杂程度与日俱增，开发者需要从软件工程的角度去思考前端开发，才能保证开发和维护的顺利和高效，从而开始思考工程化的概念。

前端工程四个阶段：

①  技术选型。

等等等等...

技术选型是为了开发效率。根据项目和团队特征选择合适的技术方案。没有最牛逼的技术，只有更合适的技术。

②  简单的构建优化。

等等等等...

构建是为了运行性能。对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并。现在还有很多前端开发人员在手动压缩合并，前端自动化已经非常成熟了，合理利用工具解放生产力吧。

③  模块化开发。

等等等等...

模块化是为了维护效率。模块化最大的意义，我觉得是分工合作。模块复用主要在开发阶段，如果项目比较复杂，前端合作开发人员大于1人，模块开发就可以有效的避免编码冲突，而且新进开发者也可以先只关注主负责的模块。之后迭代周期中，也可以不用担心这段代码是否被其他页面使用，而不敢轻易下手，导致项目编码时只敢做加法不敢做减法。

④  组件化开发与资源管理。（因本人对资源管理研究尚浅，此次没有分享相关内容）

页面是由组件构成。原则是一个组件一个目录，组件集中存放在components文件夹。

关于浏览器渲染原理。深入理解HTTP请求过程是前端性能优化的核心（这句话划重点）。

浏览器基础结构：

• 渲染引擎（Rendering engine）：负责解析用户请求内容（html或xml，css） 
  
• 网络（Networking）：负责处理网络相关的事务，如HTTP请求 
  
• UI后端（UI backend）：负责绘制提示框等浏览器组件，底层使用的是操作系统的用户接口 
  
• Javascript解释器（Javascript interpreter）：负责解析和执行javascript代码 
  
• 数据存储（Data storage）：负责持久存储应用数据，如cookie，缓存等

Webkit渲染引擎主要流程：

Gecko渲染引擎主要流程（FireFox v3.6） :

总体渲染流程是一致的：解析HTML -> 构建DOM树 -> 构建渲染（Render）树 -> 布局 -> 绘制

后记：

分享结束Q&A时，小伙伴问到的两个问题。

问：模块化开发中，相同的模块结构和样式布局，只是颜色不一样怎么处理？

答：小伙伴提到是不是要用js去判断。我的建议是只是颜色不一样，能用样式解决的问题，就不要用脚本。js是单线程，加载js文件的同时，浏览器其他线程是阻塞状态，也就意味着此时浏览器渲染停止了，所以非必须的业务逻辑处理不用js。

• 前后未分离的页面，创建一个class名称（假设class名为 other）来定义颜色。html结构里做好注释，以便后端小伙伴知悉。
  

<!-- if 默认 -->
<h1 class="m-logo">我是logo</h1>
<!-- else 特定页面 -->
<!-- <h1 class="m-logo other">我是定制颜色logo</h1> -->

• 前后分离的页面，看技术选型支持的 if...else 语法 。
  

比如：

artTemplate模板引擎

{{if isOther}}
    <h1 class="m-logo other">我是定制颜色logo</h1>
{{else}}
    <h1 class="m-logo">我是logo</h1>
{{/if}}

Vue.js ：

<h1 class="m-logo" :class="{other:isOther}">我是logo</h1>

问：Chrome浏览器并发加载上限为什么只有6个？怎么优化网络请求？

（= . =|||   这个...两个问题确实是我的短板，我只能按我目前的知识储备回答一下。针对优化网络请求，当时只是简单的回答了使用CDN，现在稍微细化整理一下）

答：这两个问题其实很大，我的小脑瓜不够使。

关于浏览器为什么有并发上限。来自知乎： 浏览器允许的并发请求资源数是什么意思？ 

关于怎么优化网络请求。要说清楚可能还需要先详细的解说下网络请求过程是个啥。网上可以搜索到关于网络请求更专业的文章，在此略过。

1. CDN查询过程的优化：可以在浏览器层面，甚至路由器层面对DNS服务器相关的信息进行缓存，减少DNS寻址时间。

2. 网络请求的优化：网络请求涉及到带宽，网络的选择，缓存等。可以使用CDN请求静态资源，解决网络选择和缓存的问题，但CDN地址不要携带Cookie，所以CDN域名需与主域名不同。

3. http请求大小和次数的优化：每一个http请求都会走网络环境到达服务器，这就会造成网络环境的损耗。合理的优化静态资源的大小和合并资源。（我觉得这个是资源优化，只是会影响网络请求，所以当时没有给小伙伴说这个）

4. 服务端渲染：前端框架（如vue,react）是执行框架代码生成html再进行浏览器渲染，这个渲染过程对首屏相当大的损耗。使用服务端渲染是通过服务器生成html再发送到浏览器进行渲染。（这个适用于前后分离的开发项目，我觉得属于渲染优化，但也会影响网络请求时间，因为前端处理渲染就会增加js代码量，js文件体积就直接影响了http请求的时长）

以上言论仅代表个人观点，不妥之处，欢迎指正。

本文部分图片来源网络，若有侵权请联系，立马删除。

2018/05/25 上午