10. 性能优化（25题）

用户9618

用户7340

用户9254

2月4日修改

1.
script标签放在header里和放在body底部里有什么区别？​

参考答案：

将 <script> 标签放在<head>和 <body> 底部，会对页面的加载和性能产生不同的影响：​

优点：

1.
预加载： 浏览器在渲染页面之前，会先下载和解析所有在 <head> 部分的脚本文件。这样可以确保脚本在页面加载过程中随时可以被调用。​

2.
全局可用性： 一些脚本，特别是需要在页面一加载就运行的脚本，适合放在 <head>  中。​

缺点：

1.
阻塞渲染： 浏览器在遇到 <script> 标签时会暂停 HTML 的解析和渲染，直到脚本下载并执行完毕。这可能会导致页面加载变慢，尤其是当脚本文件较大或者需要从远程服务器下载时。​

2.
页面白屏时间延长： 用户可能会看到页面在加载过程中有一段时间的白屏，直到脚本加载完成。​

优点：

1.
非阻塞渲染： 将 <script> 标签放在 <body> 底部意味着浏览器可以优先下载和渲染 HTML 内容，这样用户可以更快地看到页面内容。​

2.
更好的用户体验： 用户不会因为等待脚本加载而长时间看到空白页面。页面内容会先显示出来，然后再执行脚本，这提高了页面的响应速度和用户体验。​

缺点：

1.
延迟脚本执行： 如果某些脚本需要在页面加载之前运行（如某些初始化脚本），放在 <body> 底部可能会导致这些脚本运行延迟，影响功能。 ​

现代优化技术

1. defer 属性： 在 <head> 部分使用 <script> 标签时，可以添加 defer 属性。这个属性会告诉浏览器异步下载脚本，但在页面解析完成后再执行脚本。这样既可以保持脚本全局可用，又不会阻塞页面渲染。​

代码块

2. async 属性： async 属性也用于异步加载脚本，但它会在脚本下载完成后立即执行，不考虑页面的解析进度。这对某些独立的、不会依赖于其他脚本或 DOM 结构的脚本很有用。​

代码块

总结

•
<head> 部分： 适合需要立即执行的脚本，但可能阻塞页面渲染。​

•
<body> 底部： 适合一般脚本，能提高页面加载性能和用户体验。​

•
使用 defer 或 async： 现代浏览器支持这些属性，可以同时兼顾性能和功能需求。​

2.
前端性能优化指标有哪些？怎么进行性能检测？​

参考答案：

概述

web性能说简单点就是网站打开速度快不快，页面中的动画够不够流畅，表单提交的速度是否够快，列表滚动页面切换是否卡顿。性能优化就是让网站变得快。​

在MDN上对web性能的定义是网站或应用程序的客观度量和可感知的用户体验。比如减少页面加载时间(减少文件体积，减少HTTP请求，使用预加载)，让网站尽快可用(懒加载或者分片加载)，平滑的交互性(使用CSS替代JS动画，减少UI重绘)，感知表现(加载动画，loading等给用户感觉快)，性能测定(性能指标，性能测试，性能监控以便持续优化，毕竟性能优化是个持续的过程)。​

页面性能关乎到用户的留存，网站的转换率，用户体验和网站的传播，甚至影响搜索排名遭到用户投诉，当然也会影响开发的效率。​

1.性能指标

进行性能优化之前首先要知道要在哪些方面做性能优化。

首先需要了解性能指标，多快的速度才算快呢？可以使用专业的工具可量化的评估出网站或应用的性能表现。​

立足于网站页面响应的生命周期，分析出造成较差性能表现的原因，最后进行技术改造，可行性分析等具体的优化措施，持续迭代优化就可以了。​

事实上性能是相对的，他并不是绝对的概念。对于一个用户而言在不同的网络环境下访问页面的速度可能是不同的。即使相同的网站在懒加载的情况下也会显得快。​

在讨论性能的时候精确地，可量化的指标是很重要的。但是仅仅因为一个度量标准是基于客观准备并且可以定量的度量的，并不一定意味这些度量是有用的。对于Web开发人员来说，如何恒量一个Web页面的性能一直都是一个难题。​

最初，开发人员使用Time to To Byte。DomContentLoaded和Load这些恒量文档加载进度的指标，但他们不能直接反应用户视觉体验。​

为了恒量用户视觉体验，Web标准中定义了一些性能指标。这些性能指标被各大浏览器标准化实现，例如First Paint和First Contentful Paint。​

还有一些由Web孵化器社区组提出的性能指标，如Largest COntentful Paint, Time to Interactive, First Input Delay, First CPU Idle。​

另外还有Google提出的First Meaningful Paint, Speed Index。

百度提出的First Screen Paint。

这些指标之间并不是毫无关联，而是在以用户为中心的目标中不断演进出来的，有的已经不再建议使用，有的被各种测试工具实现，有的则可以作为通用标准可用于生产环境测量的API。​

2.RAIL性能模型

RAIL是Response，Animation，Idle和Load的首字母缩写，是一种由Google Chrome团队于2015年提出的性能模型，用于提升浏览器的用户体验和性能。​

RAIL模型的理念是以用户为中心，最终目标并不是让你的网站在任何特定设备上都能运行很快，而是使用户满意。​

Response: 应该尽可能快速的响应用户的操作，应在在100ms以内响应用户输入。​

10. 性能优化（25题）​

10. 性能优化（25题）