web浏览器停止运行此脚本 优化浏览器前端
译者 | 京东金融-移动研发部-前端工程师 田腾
原作者 |Sanjay Purswani
来源 |Software Engineer at comparethemarket.com
优化事关速度和满意度
为了提升用户体验（User Experience，UX），我们希望前端提供快速加载和执行的网页。而对于提升开发者体验（Developer Experience, DX）来说，我们希望前端能够快速，简便和实用。
这样的优化不仅使我们的用户和开发者满意，也会显着提高SEO排名, 因为Google的SEO排名会偏向于优化较好的页面。如果你已花费了大量时间来提升自己网站的Google Pagespeed Insights分数，那么本文将有望揭示分数的实际意义以及为优化前端我们采取的大量策略。
背景
最近，我的整个团队有机会花费一些时间升级到我们的代码库，该升级可能使用React技术。这让我思考我们应该如何建立前端项目。很快我意识到浏览器将是我们考虑升级方法中的一个重要因素，同时也是我们知识的一大瓶颈。
方法首先
我们不能控制浏览器或者改变它的行为方式，但是我们可以理解它的工作原理，用来优化我们页面的加载。
幸运的是，浏览器行为的基本原理相当稳定并有据可查，长时间内也不会显着改变。
这些特点至少给了我们一个努力的目标。
其次
另一方面，代码，堆栈，结构和模式是我们可以控制的。他们更灵活，改变地更快，为我们提供更多的选择。
因此
我决定彻底地弄清楚我们的代码最终结果应该是什么样，然后形成一个写这种代码的意见。 在这第一篇文章中，我们将专注于了解浏览器。
浏览器的功能
我们来建立一些知识。以下是我们期望浏览器运行的一些微不足道的HTML。
浏览器如何渲染页面
当浏览器收到我们的HTML时，会解析它，将其分解成一个自己理解的词汇，得益于HTML5 DOM规范，这些词汇在所有浏览器中保持一致。然后，浏览器将通过一系列步骤来构建和渲染页面。以下是高度概括的描述。
使用HTML创建文档对象模型（DOM）。
使用CSS创建CSS对象模型（CSSOM）。
执行DOM和CSSOM上的脚本（scripts）。
结合DOM和CSSOM形成渲染树（render tree）。
使用渲染树布局（layout）所有元素的大小和位置。
在所有像素中绘制（paint）。
第一步 – HTML
浏览器从上到下读取HTML的标记，将其分解成一个个节点来创建文档对象模型。
HTML优化策略样式写在顶部，脚本写在底部
虽然这个规则使用起来也有例外和细微差异，但一般的想法是尽可能早地加载样式，尽可能晚地加载脚本。这样做的是因为脚本需要在HTML和CSS完成解析后再执行，因此我们将样式放到最前面，以便在编译和执行底部的脚本之前，有充足的时间来计算样式。 接下来我们进一步研究如何调整这个优化。
精简和压缩
这适用于我们提供的所有内容，包括HTML，CSS，JavaScript，图像和其他资源。精简删除任何冗余字符，包括空格，注释，额外的分号等。
压缩，例如GZip，将代码或其他资源中重复的数据，替换为指向原始实例的指针。大幅压缩下载文件的大小，而是依靠客户端解压缩文件。
通过这两项处理，你有望将有效载荷减少80％或90％。例如，将bootstrap减少87％。
可访问性
虽然这不会使你的网页下载速度更快，但会大大提高有身体缺陷用户的满意度。确保为所有人提供可用功能！在元素上使用aria标签，在图像上提供替代文本以及所有其他的不错功能()。使用像WAVE这样的工具来识别你可提高可访问性的地方。
第二步 - CSS
当浏览器找到任何与样式相关的节点，例如，外部，内部或内联样式时，它会停止渲染DOM并使用这些节点创建CSSOM。这就是为什么人们说CSS“阻塞渲染”。以下是不同类型样式利弊。
