为什么网络性能如此重要？真的是！响应速度更快的网站将为用户提供更好的体验。理论上，更好的体验等于更好的用户满意度。更快还意味着用户希望在他们放弃之前更快地访问您的网站。放弃的原因有很多：页面加载时间过长、用户失去兴趣、浏览器崩溃等等。提高性能可以降低放弃率，这将给网站带来显着的收益。运行时性能是指Web应用在运行时对用户输入的响应速度，比如点击删除图片。Web性能影响因素运行时的性能受到许多因素的影响：从用于完成特定功能的算法的效率到优化方法；从解释器和浏览器渲染引擎的优化或不足到有效的内存管理和CPU使用；设计时间同步和异步操作之间的选择对性能有影响。运行时性能是一种比较主观的感觉。今天，我将从三个角度来分享我的性能优化技巧。角度一：当我们在浏览器地址栏输入一个URL时，开启了一个新的网络线程，DNS解析、TCP连接和HTTP请求响应不可避免地依赖于网络环境，遭受网络延迟、网络不稳定等问题。因素。我们能做的就是尽量减少网络请求，减少网络线程带来的网络消耗。角度二：浏览器也有一些原因。主流浏览器有IE、Chrome、Safari、Firefox、Opera等，不同浏览器的JS引擎性能不同，用户体验也不同。比如IE8及以下的内核性能就不好。众所周知。角度三：除了网络、浏览器等外部因素外，影响网页性能的主要是页面本身。作为开发者，性能优化可以控制的部分是页面，包括页面大小、页面结构、JS、CSS等。针对以上3点页面加载过程涉及的因素，下面简单讨论和优化方法介绍~性能优化技巧1.减少HTTP请求数：1）资源大小很重要，不是只与下载时间有关，也是因为IPv4和IPv6协议规定一个IP包的最大值为65535字节。一个IP包就是一个请求，所以可以得到一个等式：根据这个公式，我们可以把资源控制的越小越好。可以使用gulp等自动构建工具，自动合并JS文件，压缩文件和图片等。2）避免重定向：重定向表示客户端需要做进一步的动作才能完成请求，会延长请求时间。因此，在输入网址时应使用最完整、最直接的地址，如输入www.baidu.com，不要输入baidu.com。3）使用缓存机制：主要包括数据库缓存、服务器缓存（反向代理和CDN缓存）、浏览器缓存。2.图片的延迟加载如果页面中图片较多，可以采用延迟加载。只在首屏加载图片，当用户滚动访问后面的内容时再加载对应的图片。方法是用非常小的placeholder图片替换图片。placeholder图片只下载一次，原始图片的src存放在另一个属性中。当图片即将进入可见区域时，将路径赋值给src进行下载。用于显示的图片。下面是一个简单的例子：3、代码优化1）页面结构：CSS放在HTML内容的顶部，JavaScript放在HTML内容的底部。可以使用preload提前解析资源的DNS。由于浏览器从上到下阅读内容，因此您放置资源的位置会影响访问网站的速度。比如你把script标签放在HTML内容的前面，浏览器会先调用JavaScript解释器解析JS，然后渲染剩下的HTML内容。对于用户来说，你能看到的是HTML内容，所以1）这样做会造成页面可用性的延迟。此外，CSS还修改了页面节点。如果布局是在CSSOM构建之前进行的，那么在CSSOM构建之后，如果CSS修改了节点的布局，就会发生重排，布局需要重新计算绘制。2）JavaScript优化：比如减少对DOM的操作，减少重排和重绘，减少作用域链搜索，慎用eval函数等。JS代码和（下）CSS的优化主要需要前端开发人员有一个清晰的认识了解页面渲染原理，掌握基础知识，养成良好的编程习惯。3）CSS优化：比如减少通配符'*'的使用，提取常用样式增强复用性，精准选择器减少匹配时间，适度使用内联样式。
