寻找提高网页渲染性能和删除网页加载时经常出现的白色闪烁的方法？关于网页开发，有很多关于网页开发的调整和提示 - 从设计到应用程序的最终部署。但是，大多数最终用户的时间花费在前端，因此从用户的角度来看，最有希望寻求改进的领域是网页以及当用户点击链接或URL时网页加载的速度。

在网页加载的各种问题中，白色闪烁被认为是在页面访问，加载，重新加载和遍历因特网浏览器期间发生的常见问题之一。出现白色闪烁的原因有多种，包括浏览器在样式表加载完成之前尝试渲染页面，JavaScr ip t问题和其他渲染错误。浏览器将始终等待，直到渲染之前所有内容（超出图像）完成下载。

我们将简要介绍一下Web开发人员的一些最佳实践，这些实践可以帮助提高网页速度并减少渲染网页时的白色闪烁：

在Tomcat服务器上启用压缩
实现缓存过滤器
划分Div中的页面
在页面末尾包含Java Scripts
在Java服务器页面的Body上设置背景颜色
将样式表放在java服务器页面的顶部
删除java服务器页面中的重复脚本
确保页面只有一个DOCTYPE，HTML，Head和Body标签
使用GET代替POST来获取数据请求

介绍

对于任何网页设计师来说，要记住的最重要的事情是他们的应用程序最终用户应该有一个美妙的体验，使他们可以毫无阻碍地浏览网页。最终用户与网页的交易，他们最不关心它在幕后的功能。因此，网页设计师必须处理很多事情以增强用户体验，需要注意用户在浏览网站时不会感到烦躁，原因是加载页面太慢或任何白色闪烁当他导航到不同的链接时发生。

在本文章中，我专注于一个常见问题“白色闪烁”，这发生在页面访问，加载，重新加载和遍历互联网浏览器期间。我在本文中推荐的提示基于我的个人经验，如果遵循这些最佳实践，除了去除白色闪烁之外，它还有助于提高加载网页的性能。

白色闪烁

'White Flicker'基本上是一种在两个网页之间转换时出现的“闪烁/闪烁”。它发生在IE中的网页加载期间，当在屏幕刷新/重新加载期间点击链接或触发屏幕重新加载/刷新的菜单时。

网页加载缓慢并产生白色闪烁，因为浏览器很多次都处理页面中的组件：图像，样式表，脚本，Flash等。在呈现任何页面之前，浏览器将始终等到所有内容（超出图片）已完成下载。

下面列出了一些最佳实践，可以帮助减少白色闪烁/闪烁并提高网页性能。

1、在Tomcat服务器上启用压缩：

为大量应用程序启用“压缩”可以帮助提高性能。如果我们使用Tomcat服务器通过互联网为远程客户端提供服务，我们可以通过启用“内容压缩”来显着改善页面加载时间。内容在通过互联网传输时会被压缩。所有现代浏览器都支持HTTP / 1.1 GZIP压缩，如果您的服务器也启用它，页面加载时间会急剧减少。它们只是在浏览器中弹出，就好像它们是从本地服务器提供的一样。

要在Tomcat服务器上启用压缩，请在“server.xml”中创建以下条目，该文件位于服务器的“conf”文件夹中。

Text Box: Entry without Compression: <Connector port="8080" protocol="HTTP/1.1” connectionTimeout="20000" redirectPort="8443" /> After Enabling Compression: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" compression="on" compressionMinSize="1024" noCompressionUserAgents="gozilla, traviata" compressableMimeType="text/javascript, application/x- javascript, application/javascript, text/html,text/css,text/plain, image/png,image/gif"/>

*请注意：跳过Tomcat中的小文件压缩。

跳过压缩太小的文件是很好的 - 压缩开销将带走所有好处，并可能导致更大的文件。

实现缓存过滤器：

过滤器足以处理发送到Web应用程序的请求或响应（或两者）。过滤器在一个方法中提供此功能，该方法不会影响Web应用程序使用的servlet和JSP，除非这是所需的效果。要在大文件上实现缓存，在代码中添加过滤器可以提供帮助。下面给出了一个示例过滤器：

Text Box: Eg Filter: ExampleFilter.java package com.test.example.util; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class ExampleFilter implements Filter { FilterConfig fc; String cacheControl; public static final String HEAD_CACHE_CONTROL="Cache-Control"; public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response =(HttpServletResponse) res; // set the provided HTTP response parameters response.setHeader(HEAD_CACHE_CONTROL,cacheControl); // pass the request/response on chain.doFilter(req, response); } public void init(FilterConfig filterConfig) { this.fc = filterConfig; cacheControl=filterConfig.getInitParameter(HEAD_CACHE_CONTROL); } public void destroy() { this.fc = null; } }

在代码中添加此过滤器后，Web Client的“web.xml”中需要相应的条目。下面将提到需要在'web.xml'中创建的条目：

Text Box: <filter> <filter-name> ExampleFilter</filter-name> <filter-class>com.test.example.util.ExampleFilter </filter-class> <init-param> <param-name>Cache-Control</param-name> <param-value>max-age=5184000</param-value> </init-param> </filter>

除了上述条目，我们还为需要缓存的文件创建条目。这是通过添加需要缓存的文件的各种扩展来完成的。

我们在web.xml中输入以下条目：

Text Box: <filter-mapping><filter-name> ExampleFilter</filter-name><url-pattern>*.css</url-pattern></filter-mapping> <filter-mapping><filter-name> ExampleFilter</filter-name><url-pattern>*.js</url-pattern></filter-mapping> <filter-mapping><filter-name> ExampleFilter</filter-name><url-pattern>/images/*</url-pattern></filter-mapping>

通过进行上述过滤器映射，将过滤位置/ images /处的css，js和文件以进行高速缓存。

同样，我们可以为WebServices启用缓存。在Web服务的web.xml中制作类似的过滤器并制作类似的条目。将在Web服务端为Servlet完成Filter映射。

例如：

<filter-mapping>

<filter-name> ExampleFilter</filter-name>

<servlet-name>ContentServlet</servlet-name>

</filter-mapping>

客户端（JSP）的更改：

在Div中划分JSP：

JSP编码在应用程序的外观和感觉中也起着至关重要的作用。应始终遵循一些基本原则。在编写jsp页面时，基本页面结构应该是这样的; 它应该被分为五个独立的div，每个div应该被赋予一个唯一的ID选择器。div被标记; “容器”（包裹整个页面的内容），“top”（用于顶部横幅），“leftnav”（用于较小的左列），“content”（用于主要内容）和“footer”（用于页面底部的页脚）。

可用于对齐这些div的css代码如下：

Text Box: #container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%; } #top { padding: .5em; background-color: #ddd; border-bottom: 1px solid gray; } #leftnav { float: left; width: 160px; margin: 0; padding: 1em; } #content { margin-left: 200px; border-left: 1px solid gray; padding: 1em; } #footer { clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; }

在JSP中明智地包含JavaScripts：

并行下载阻塞是脚本引起的主要问题。的HTTP / 1.1规范建议的浏览器下载不超过两种组分在每主机名平行。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。但是，在下载脚本时，即使在不同的主机名上，浏览器也不会启动任何其他下载。所以建议在应用程序代码中明智地下载脚本。

包含在jsp中的JavaScript的位置在应用程序的性能中起作用。在jsps中包含</ HTML>标记之后的JavaScripts总是好的，除非在加载JSP时不需要它。实践这将提高屏幕加载的性能; 最后将加载JavaScripts。

例如。应在JSP代码的末尾添加如下脚本标记。

<SCRIPT language = Javascript src =“javascripts / myStyle_Common.js”> </ SCRIPT>

在JSP主体上设置背景颜色：

建议在body标签本身中设置类似于整个应用程序颜色的背景颜色。默认情况下，颜色设置为白色，因此在切换应用程序的各个屏幕时，在整个应用程序的背景颜色不是白色的情况下，将会出现白色闪烁。

例如。在Web应用程序中，背景颜色设置为黑色。所以下面的代码用于在所有JSP中设置bgcolor。

<body bgcolor =“black”>

将StyleSheets放在JSP的顶部：

jsps中使用的样式表有助于感知应用程序对用户的更快性能。如果样式表移动到文档HEAD使页面看起来加载更快。这是因为将样式表放在HEAD中允许页面逐步呈现。在我们的例子中，HTML页面是进度指示器当浏览器逐步加载页面时，标题，导航栏，顶部的徽标等都作为等待页面的用户的视觉反馈。这有助于改善有关应用程序的整体用户体验。

删除JSP中的重复脚本：

通过在jsp中包含相同的JavaScripts两次，也可以降低应用程序的性能。在Internet Explorer中，如果外部脚本包含两次且不可缓存，则在页面加载期间会生成两个HTTP请求。即使脚本是可缓存的，当用户重新加载页面时会发生额外的HTTP请求，这将导致应用程序的性能损失。作为一个警告，我们应该删除jsps中的重复脚本。

确保JSP只有一个DOCTYPE，HTML，Head＆Body标记：

应确保JSP仅包含一个DOCTYPE，HTML，Head＆Body标记。很多时候，我们在另一个jsp中包含的jsps包含所有这些标记，因此这些标记不止一次出现。多次出现这些标签也会妨碍页面加载性能。因此，应该在jsp代码中避免这样的多个标签。

使用GET代替Post来获取数据请求：

使用POST或GET方法发送数据的决定应该明智地做。应用程序的性能还取决于这些方法的正确使用。POST在浏览器中实现为两步过程：首先发送标头，然后发送数据。而另一方面，GET只需一步即可完成。因此最好使用GET，它只需要一个TCP数据包发送（除非你有很多cookie）。IE中的最大URL长度为2K，因此如果发送的数据超过2K，则可能无法使用GET。