麦都-平台开发组

《web前端性能优化之扫盲篇》分享会后记

写作时间:2018-05-25

昨天很迷糊的完成了第一次公司分享会。全程盯着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 上午