改善用户体验 Web前端优化策略总结-刘锐

1、改善用户体验的Web前端优化策略总结，刘锐，2015年7月，爱歌技术部汽车服务组，为什么要优化？从开始加载到完全加载，你能“忍受”一个网页多久？前端优化的价值，在互联网行业，要成为一个受人尊敬的互联网企业，产品访问速度是一个基石，用户只需要1秒钟放弃一个产品，1秒钟关闭网页，1秒钟打开竞争对手的网站。加载时间每增加一秒就意味着金钱和用户的损失。需要优化的部分，减少超文本传输协议请求，简单描述正常的超文本传输协议请求过程：如果您在浏览器中输入并按回车键，浏览器将与该网址指向的服务器建立连接，然后浏览器可以向服务器发送请求信息，服务器在收到请求信息后将返回相应的信息，浏览器在收到服务器的响应信息后

2、将解释并执行数据。但是，当我们请求的网页文件中有很多图片、CSS、JS等信息时，与服务器的连接会频繁建立，连接会被释放，这肯定会造成资源的浪费，而且每个HTTP请求都会给服务器和浏览器带来性能负担。在相同的网络速度下，下载一张100KB的图片比下载两张50KB的图片要快。最终用户要求的80%的时间都花在前端。大部分时间都停留在下载页面中的组件上：图片、样式表、脚本、闪存等等。相反，减少组件数量可以减少页面上的HTTP请求数量。这是加速页面的关键。HTTP请求处理，减少合并css和js的HTTP请求，并将它们合并成尽可能少的文件，这样可以减少网络的往返时间和下载其他资源的延迟时间。示例：合并方法

3、：手动、Minify、Nginx concat模块，合并后，减少了HTTP请求的内联样式表。作为一个大型网站，内联样式表被用在主页上，这可以减少http请求的数量并防止裸奔。当然，其他页面需要使用外部样式表，以便于维护。因为作为一个大型网站，主页访问量非常大。缩小请求图片的地图，把一张图片分成多个区域，每个区域指向一个不同的网址。例如，中国地图的图像根据省市被分成几个区域，这些区域被称为热点。点击热点链接到相应省市的相关页面，称为图片地图。如果导航栏或其他超链接中使用了多个图片，将它们转换为图片地图是加速页面的最简单方法。例如，上面的效果是通过使用三个独立的图片实现的，如果您使用图片映射，效率

4、会更高，因为三个http请求减少到只有一个http请求。由于减少了http开销，响应时间将会缩短。减少图片请求的数量。将背景图片整合成一张图片，然后使用CSS的背景图像和背景位置属性来定位要显示的部分。例如，如何通过减少超文本传输协议请求来生成CSS精灵？Ps，Compass，cssgaga .spritegen .网站-/，减少DNS查询，DNS:负责将域名网址转换为服务器主机IP。当你输入一个网址时，电脑不知道它是什么。它必须通过转换机制转换成计算机能够理解的IP地址。在域名系统查询过程中，浏览器无法获得任何资源；如果有许多域名系统查找过程，它肯定会影响我们网

5、站的性能。浏览器缓存机制，默认情况下IE缓存30分钟，火狐和Chrome1缓存1分钟。因为域名系统查找需要时间，所以应该尽可能减少域名系统查找的次数。最理想的方法是把所有的内容资源放在同一个域中，这样你只需要执行一次域名系统查询就可以访问整个网站，这样可以提高性能；这样做会带来另一个问题，那就是因为这些资源都在同一个域中，而且HTTP建议客户端对于每个域只有一定程度的并行性(其建议是2)，那么在下载资源时就会出现排队现象，这将会降低性能。因此，建议在一个网站中使用至少2个域但不超过4个域来提供资源。每个浏览器的并行连接数(相同的域名)，DNS搜索过程，避免重定向，重定向，即原始请求被转移到其他

6、位置，并且网页被移动到新的地址。如果重定向没有完成，用户偏好或搜索引擎数据库中的旧地址只能给来访的客户一个404页的错误消息，访问流量将白白丢失。在开发时，应该更多地考虑原始的网址规则是否可以扩展！当客户遇到这种情况时，用户只能等待客户再次发送请求，有些网站甚至会一直跳到他想带你去的地方。当然，此时，用户看不到任何页面内容，只有浏览器的进度条不断刷新。用户获得一次或多次新地址，这不可避免地增加了请求，违反了我们减少HTTP请求的原则！使Ajax可缓存，前端代码充满了AJAX请求。如果您可以对Ajax请求使用浏览器缓存，那么您可以显著减少网络请求并提高程序响应速度。有两种方法可以请求AJAX:获

7、取和发布；AJAX请求使用GET方法。可以缓存获取，但不能缓存发布。区别：为了提高性能，优化Ajax响应非常重要。最重要的方法是使用响应缓存来提高Ajax的性能，比如添加过期头、缓存控制等。下面列出了其他方法：使用Gzip模块减少域名系统查询，压缩JavaScript，避免重定向配置ETags头，延迟加载，预加载，延迟加载。所谓的延迟加载意味着当真正需要数据时，数据加载操作实际上被执行。例如，图片和js在包含许多大图片的长页面中，在用户将页面滚动到它们的位置之前，浏览器可见区域之外的图片不会被加载；通过点击页面触发一些特殊效果，如弹出百度地图和用户登录注册窗口；用于延迟加载图片的JQuery插

8、件：jquery.lazyload.js、Echo.js预加载实际上意味着在实际开始使用数据之前异步加载数据，当您需要使用它时，您可以直接使用之前加载的数据。此时，由于数据已经加载，而无需等待很长的加载过程，程序的速度明显提高。为了减少DOM，网页中太多的元素对于加载网页和执行脚本来说是一个沉重的负担，100个元素和1000个元素的加载速度有很大的差别。要知道网页中有多少元素，您可以在浏览器中使用一个简单的命令document . getelementsbytagname(*)。长度，如何减少DOM，存储html代码与脚本，存储html代码与文本区，爱卡主页热车标签模块，这是由文本区包装，并填

9、写数据时，鼠标滑动。根据域名，划分内容，最小化iframe的数量，删除死链，根据域名划分内容浏览器。根据域名下载内容可以使浏览器增加并行下载链接，但要注意控制2-4个域名的使用，否则dns查询也是一个问题。一般网站规划静态资源都是以类似的方式放置的。这具有避免静态域名上的cookie的优点。饼干的规则将在后面介绍。最小化iframe的数量提供了一种简单的方法将一个网站的内容嵌入到另一个网站中。但是我们需要小心使用iframe。如果Iframe的内容为空，将会消耗加载时间。iframe将阻止主页的onload事件。onload事件将触发加载所有iframe(包括其中的元素)后占用的连接数，阻止加

10、载主页资源，删除死链，删除“死链接”，或返回404个错误的请求以避免浪费请求。，将样式表放在页面的顶部，为什么进度条会出现在应用程序中，因为它们让用户知道系统在安装或使用过程中没有崩溃，并且改善了用户体验！在许多浏览器中(包括工业工程)，将样式表放在超文本标记语言文档的底部会阻止页面呈现，导致空白的CSS被放在头部。主要原因是浏览器从上到下解析文件，这提高了渲染性能，避免了页面空白或重绘，并将样式表放在页面顶部。在这里，网页是进度监视器。当浏览器逐步加载页面时，页面标题、导航栏、顶部徽标等。所有这些都将为等待页面的用户提供视觉反馈。让用户感觉网站没有被挂起，提高用户体验！避免使用CSS表达式。

11、CSS表达式可以动态设置CSS属性。CSS表达式的问题在于，它们被重新计算的次数比我们想象的要多，不仅是当网页被绘制或改变大小时，而且当我们滚动屏幕或移动鼠标时。因此，我们尽量避免使用它，以防止因使用不当而造成的性能损失。使用而不是导入，避免使用过滤器，在外部样式表中使用CSS导入而不是导入，这将增加网页加载的延迟。CSS导入允许将样式表导入到其他样式表中。当外部样式表使用CSS导入时，浏览器不能并行下载这些样式表，这将增加网络请求的往返时间。例如，如果first.css包含以下内容：导入url(second.css)，浏览器必须先下载、分析并执行first.css，然后再下载second.c

12、ss。避免使用滤镜css滤镜，不需要使用任何绘图软件，使用纯css生成各种滤镜效果，如模糊效果、透明效果、色彩对比度调整、色彩反转等。使用过滤器会在下载图片时阻止网页的绘制，并且使用这种过滤器会导致内存使用的问题。将脚本放在页面的底部，并将js文件包含在页面的元素中，这意味着在下载、解析和执行所有js代码(浏览器在遇到标签时开始呈现内容)之前，无法呈现页面的内容。对于那些需要大量js的页面，或者页面中有一个无限循环，这无疑会导致页面呈现明显的延迟，并且在延迟期间浏览器窗口将是空白的。减少JavaScript和CSS，删除重复的脚本，减少JavaScript和CSS。减少资源大小意味着删除不必要

13、的字节(例如，注释、额外的空格、换行符和缩进)。压缩CSS和JavaScript，可以减少字节数，提高下载、解析和执行的速度。统计数据显示，精简后的文件大小平均减少了21%，即使应用Gzip，文件大小也将减少5%。比较压缩和未压缩的jquery: Js压缩工具：JSMin，Packer，webkaka；Css压缩工具：CssCompressor，webkaka删除重复的脚本不仅浪费了浏览器的下载时间，也浪费了解析和执行时间。为了最小化DOM访问，DOM操作的成本很高，这通常是web应用程序的性能瓶颈。天生迟钝。在高性能的JavaScript中，这个比喻是：“把DOM想象成一个岛，把JavaSc

14、ript(ECMAScript)想象成另一个岛，它们通过一个收费桥连接起来。”因此，每次你访问DOM的时候，你都会被告知一个桥费，你访问DOM的次数越多，你支付的费用就越多。因此，通常建议尽量减少交叉次数。解决方案：修改和访问DOM元素将导致页面的重绘和重排，循环是DOM操作的罪恶行为。因此，请合理地使用JavaScript变量来存储内容，考虑大量DOM元素中循环的性能开销，并在循环结束时写一次。减少对DOM元素的查询和修改，并在查询时将它们分配给局部变量。为了最小化DOM访问，这个函数循环修改页面元素的内容。这段代码的问题是元素在循环的每次迭代中被访问两次：一次是为了读取innerHTML属

15、性，一次是为了重写它。访问DOM的次数越多，代码运行的速度就越慢。因此，当有其他选择时，我们应该尽量减少访问DOM的次数。优化图片大小，使用CSS Sprites优化图片大小，并优化图片大小。无论是在网页上还是在移动应用中，图片都是非常重要的。他们可以让你的页面看起来更好，更突出。然而，高质量和美丽的图片往往非常大，这将减缓页面加载和消耗更多的带宽。图像优化工具：网络卡卡，在线图像优化器，图像优化器，TinyPNG，Riot等。使用Css精灵优化图片。有人提到，你不应该在超文本标记语言中使用缩放图片，也不应该在超文本标记语言中使用缩放图片。不要通过缩放图片来适应页面。如果你需要小图片，就直接使

16、用它们。例如，如果您计划使用100 x100px的图片，不要试图使用500 x500px的大图片来缩放，这违反了“优化图片大小”的原则！Favicon.ico压缩并缓存网站图标文件favicon.ico。无论您的服务器是否有该文件，浏览器都会尝试请求该图标。因此，我们应该确保这个图标存在，文件尽可能小，最好小于1k，并设置一个长的到期时间！避免空图片src，这仍然会使浏览器向服务器发送请求，这是对服务器时间和资源的完全浪费。尤其是当你的网站每天都被很多人访问时，这种空洞的请求所造成的损害是不可忽视的。因此，请注意我们的网页中是否有这样的代码。img . src=；使用cdn，cdn的全称是内容

17、交付网络，即内容分发网络。基本思想是避免互联网上可能影响数据传输速度和稳定性的瓶颈和链接，从而使内容传输更快、更稳定。CDN系统通过在整个网络中放置节点服务器，形成一层基于现有互联网的智能虚拟网络，根据网络流量、每个节点的连接、负载情况、到用户的距离和响应时间，将用户的请求实时重定向到最近的服务节点。其目的是使用户能够就近获取所需内容，解决互联网网络的拥塞，提高用户访问网站的响应速度。在离你最近的地方放置一个副本服务器，这样你可以以最短的距离和最快的速度获取内容；本质上是一个缓存，它将数据缓存在离用户最近的地方。为什么使用CDN？网站服务器在北京，运营商是电信。当山西联通用户访问网站时，由于跨地区、跨运营商的原因，网站开通速度将远远低于北京本地电信客户，容易导致客户流失。由新闻热点和重大事件引发的突发流量问题虚拟主机，由于它与多个网站共享一个服务器，每个网站的带宽都有限，而且带宽太小，流量又多一点，所以网站打开缓慢甚至无法