浅谈WEB标准与前端性能优化
Web前端开发技术和优化措施
Web前端开发技术和优化措施Web前端开发技术和优化措施涉及到网页前端的搭建和优化，以提高网页的性能和用户体验。
在本文中，我们将讨论一些常用的Web前端开发技术和优化措施。
1. HTML（超文本标记语言）：HTML是一种用于构建网页的标记语言，它描述了网页的结构和内容。
通过使用HTML，可以创建各种元素，如标题，段落和列表，并将它们组织在一起以创建整个网页。
2. CSS（层叠样式表）：CSS是一种用于样式化网页的语言。
它允许开发人员通过定义元素的外观和布局来控制网页的样式。
通过使用CSS，开发人员可以为元素添加颜色，字体，边框和背景等属性。
3. JavaScript：JavaScript是一种客户端脚本语言，用于增强网页的交互性和动态性。
通过使用JavaScript，开发人员可以编写代码来控制网页元素的行为，并与用户进行交互。
通过使用JavaScript，可以创建表单验证，轮播图和下拉菜单等功能。
4. AJAX（异步JavaScript和XML）：AJAX是一种用于创建异步Web应用程序的技术。
它通过在不刷新整个页面的情况下加载数据来提高用户体验和网页性能。
通过使用AJAX，可以向服务器发送异步请求并在网页上更新部分内容，而无需刷新整个页面。
5. 响应式设计：响应式设计是一种用于创建适应不同设备和屏幕尺寸的网页的技术。
它使用CSS媒体查询和流动布局来调整网页的布局和元素大小以适应不同的屏幕大小。
响应式设计可以确保网页在桌面，平板电脑和移动设备上都能良好显示。
1. 压缩和合并文件：通过压缩和合并CSS和JavaScript文件，可以减少文件的大小并减少加载时间。
可以使用工具将多个CSS和JavaScript文件合并为一个文件，并使用压缩工具压缩文件的大小。
2. 图片优化：通过使用适当的图像格式和压缩图像的大小，可以减少图像的文件大小和加载时间。
可以使用工具将图像转换为适当的格式，如JPEG，PNG或WebP，并使用压缩工具压缩图像的大小。
Web应用性能优化的探索与研究
Web应用性能优化的探索与研究随着互联网的发展和技术的不断创新，Web应用已经成为许多公司必不可少的业务手段。
然而，Web应用的性能却往往成为限制业务发展和用户满意度提高的瓶颈。
为了提高Web应用的性能，许多技术人员从多个方面进行探索和研究。
一、前端性能优化前端性能优化是指对Web前端代码进行优化，使页面加载速度更快、响应更迅速、用户体验更流畅。
1. 压缩和合并文件将CSS、JavaScript、图片等文件进行压缩和合并，可以减少HTTP请求，大大加快页面的加载速度。
2. 优化图片通过使用适当的图片格式、使用CSS Sprites、使用懒加载技术等，可以减少图片加载的时间，从而提高页面的加载速度。
3. 异步加载脚本使用异步加载脚本，可以在页面内容加载完成之前先加载JavaScript，并在页面内容加载完成后再执行JavaScript，从而提高用户体验。
二、服务器性能优化服务器性能优化是指对服务器端应用进行优化，从而使Web应用能够更快、更稳定地响应用户的请求。
1. 缓存机制使用缓存机制可以减少数据库查询和数据的读取时间，从而提高Web应用的响应速度。
2. 压缩传输内容通过压缩HTML、CSS、JavaScript等内容，可以减少网络传输所需的时间，从而提高Web应用的响应速度。
3. 负载均衡使用负载均衡可以将请求分发到不同的服务器上，从而分担服务器的压力，提高Web应用的响应速度。
三、数据库性能优化数据库性能优化是指对数据库进行优化，从而提高Web应用的数据处理速度。
1. 建立索引建立索引可以使数据库的查询速度更快，从而提高Web应用的数据处理速度。
2. 数据库分区使用数据库分区可以将数据分散到不同的存储设备上，从而提高Web应用的数据处理速度。
3. 数据库缓存使用数据库缓存可以减少数据库的读取次数，从而提高Web应用的数据处理速度。
结论Web应用性能优化是一个复杂的过程，需要从多个方面进行考虑和优化。
Web应用程序的性能优化
Web应用程序的性能优化在今天的数字化时代，Web应用程序越来越受欢迎。
Web应用程序可以在浏览器中运行，而无需安装任何软件。
它们让用户可以在任何地方，使用任何设备登录到系统，访问其数据和服务。
然而，与此同时，Web应用程序的性能却成为了一个问题。
缓慢的页面加载速度、滞后的响应时间和增加的服务器负载都会使用户感到沮丧并导致商业损失。
因此，Web应用程序的性能优化成为了一个不可避免的问题。
本文将讨论Web应用程序的性能优化的重要性，并提供一些基本的策略和技术，以帮助开发人员在开发和维护Web应用程序时达到最佳性能。
为什么 Web 应用程序需要性能优化Web应用程序的性能是用户体验的关键因素之一。
一个缓慢的页面加载速度可能会让用户感到失望并导致他们离开网站。
随着用户界面越来越重视，Web应用程序的响应时间变得越来越重要，这是用户记忆的一部分。
如果一个Web应用程序响应速度太慢，用户就可能使用其他Web应用程序或更传统的应用程序。
低速度还会影响搜索引擎优化（SEO）的排名。
搜索引擎排名是基于许多因素，其中一个非常重要的因素是页面加载时间。
如果用户离开了网站，搜索引擎可能会认为这个网站的内容不足以吸引用户，并将它的排名下降。
考虑到所有这些因素，Web应用程序的性能优化是至关重要的。
通过优化性能，开发人员可以提高用户体验、保持高搜索引擎排名和减少服务器负载。
几个性能优化技巧下面是一些可用于提高Web应用程序性能的技巧：1. 合并和压缩文件在Web应用程序中，有许多JavaScript，CSS和HTML文件。
这些文件的数量会对页面加载时间产生影响。
因此，开发人员应考虑将这些文件组合并成更少的文件。
这样可以减少HTTP请求并提高加载时间。
压缩文件也是很重要的一个操作，因为文件的大小是页面加载速度的重要因素。
2. 优化图像Web页面中的图像可以使页面更具吸引力。
但是，这些图像的大小可能很大，其加载时间会大大增加。
前端Web性能优化技巧
前端Web性能优化技巧Web页面的性能一直是开发者关注的热点话题。
随着互联网业务的不断发展，Web应用的性能优化变得越来越重要。
尤其是对于前端开发者来说，通过一些简单的技巧和方法，可以提高Web页面的性能和用户体验。
本文将介绍一些前端Web性能优化技巧。
1. 减小HTTP请求HTTP请求是Web性能的一项关键指标。
在浏览器中，每个HTTP请求都会增加页面的加载时间和带宽占用。
因此，减小HTTP请求次数是优化Web性能的一个重要方向。
可以通过以下几种方式减小HTTP请求：- 合并CSS和JavaScript文件。
将多个CSS文件合并为一个，减小HTTP请求次数。
同样，将多个JavaScript文件合并为一个也可以达到相同的效果。
- 使用CSS Sprite。
将多个小图片合并成一个大图片并使用CSS Sprite技术，可以减少图片的HTTP请求次数。
- 延迟加载不必要的资源。
例如，可以将页面底部的JavaScript脚本移到页面浏览器加载完毕后再加载。
- 利用浏览器缓存。
将静态资源（例如CSS、JavaScript、图片）缓存到浏览器中，可以减少HTTP请求次数。
但是要注意缓存时间，避免频繁更新导致用户看到错误的内容。
2. 压缩文件在Web应用中，许多资源都是通过文件传输来实现的，包括HTML、CSS、JavaScript等。
为了减少传输数据量，可以对这些文件进行压缩。
通过压缩可以减小传输数据大小，提升传输速度。
可以使用一些第三方工具如Gzip、Brotli来对资源进行压缩；另外，服务器端也可以启用压缩技术来压缩资源并输出到浏览器。
3. 关注页面加载时间页面加载时间是Web性能的重要指标之一，影响着用户的使用体验。
页面加载时间的影响因素较多，主要包括以下几个方面。
- 网络延迟。
网络延迟是指用户请求到服务器响应之间的时间，受到国内外网络、安全协议等多个因素的影响。
- 文件大小。
通过减小文件大小来提高页面加载速度。
前端开发中的Web性能优化策略
前端开发中的Web性能优化策略随着互联网的快速发展和用户对网页加载速度的要求越来越高，Web性能优化成为了前端开发中必不可少的一环。
本文将介绍一些常见的Web性能优化策略，帮助开发者提升网页的加载速度和用户体验。
1. 压缩和合并文件在前端开发中，通常会有大量的CSS和JavaScript文件需要加载。
这些文件越多，浏览器的请求次数就越多，从而导致网页加载速度变慢。
为了解决这个问题，开发者可以使用压缩和合并文件的策略。
压缩文件可以通过去除文件中的空格、注释和换行符来减小文件的体积。
而合并文件则是将多个文件合并成一个文件，减少浏览器的请求次数。
通过这两种策略，可以显著提升网页的加载速度。
2. 使用CDN加速CDN（内容分发网络）是一种通过将网站的静态资源分布到全球各地的服务器上，从而提供更快速度和更可靠性的网络访问的技术。
通过使用CDN，可以将静态资源（如图片、CSS和JavaScript文件）缓存在离用户更近的服务器上，从而减少用户请求的时间和带宽消耗。
3. 图片优化图片通常是网页中占用大量带宽的元素之一。
为了减小图片的体积，可以采用以下策略进行图片优化。
首先，选择合适的图片格式。
JPEG适用于照片和复杂的图像，而PNG适用于图标和简单的图像。
其次，压缩图片。
可以使用各种工具和技术来压缩图片，如使用图片编辑软件调整图片质量、使用压缩算法或使用CSS的background-image属性来加载图片。
最后，使用适当的尺寸。
将图片缩放到合适的尺寸，避免在网页中显示过大的图片，可以减少加载时间。
4. 延迟加载延迟加载是一种通过推迟加载某些元素，直到用户需要时再加载的策略。
这可以减少初始加载时间，提升用户体验。
一种常见的延迟加载策略是懒加载。
懒加载是指在用户滚动到页面上的某个区域时，再加载该区域内的图片和其他元素。
这样可以先加载页面上可见的部分，而不是一次性加载整个页面，提高加载速度。
5. 缓存策略使用缓存是一种有效的提升网页性能的策略。
Web前端开发技术和优化措施
Web前端开发技术和优化措施随着互联网的快速发展，Web前端开发技术也在不断演进。
在网站和应用程序的开发过程中，前端开发扮演着至关重要的角色。
一个良好的前端技术和优化措施可以提高用户体验，加快页面加载速度，提高网站的排名，从而使网站更具有竞争力。
本文将探讨一些前端开发的技术和优化措施。
一、前端开发技术1. HTML和CSSHTML和CSS是Web前端开发的基础。
HTML（Hypertext Markup Language）负责网页的结构和内容，而CSS（Cascading Style Sheets）则负责网页的样式和布局。
前端开发人员需要熟练掌握HTML和CSS的基本知识，以构建出美观、结构清晰的网页。
2. JavaScriptJavaScript是一种用于网页交互的脚本语言，它可以使网页具有动态效果、响应用户的交互，丰富用户体验。
近年来，随着Node.js和前端框架（如React、Vue、Angular）的兴起，JavaScript的应用范围更加广泛，前端开发人员也需要深入了解JavaScript的相关知识和技能。
3. 响应式设计随着移动设备的普及，响应式设计成为了Web前端开发的一个重要趋势。
响应式设计可以使网页适应不同屏幕尺寸的设备，提供更好的用户体验。
前端开发人员需要掌握媒体查询、弹性布局等技术，设计出既适合PC端又适合移动端的网页。
4. 前端框架前端框架可以帮助开发人员更快地构建复杂的Web应用，提高开发效率。
常用的前端框架包括React、Vue、Angular等。
这些框架提供了丰富的组件和工具，使得开发人员可以专注于业务逻辑的实现，而不用过多关注页面结构和布局。
5. WebAssemblyWebAssembly是一种可移植、高性能的二进制格式，可以运行在Web浏览器中，并且可以与JavaScript互操作。
通过WebAssembly，可以在Web平台上实现更多的计算密集型任务，提高Web应用的性能。
Web前端开发技术和优化措施
Web前端开发技术和优化措施随着互联网的快速发展，Web前端开发技术也在不断演进。
为了提供更好的用户体验和更高的性能，开发人员需要掌握一些有效的前端开发技术和优化措施。
下面将介绍一些常用的技术和措施。
1. 响应式布局：随着移动设备的普及，用户越来越多地使用手机和平板电脑访问网站。
为了适应不同屏幕尺寸的设备，开发人员需要使用响应式布局技术。
响应式布局可以根据设备的屏幕尺寸自动调整页面的布局，从而提供更好的用户体验。
2. 图片优化：图片对网页加载速度有很大影响。
在开发中，我们可以使用以下几种方法来优化图片加载速度。
选择合适的图片格式。
对于图标和简单的图形，使用矢量图形格式（如SVG）可以减少文件大小和加载时间。
压缩图片。
可以使用图像编辑工具或在线工具压缩图片，减少文件大小。
使用懒加载技术。
懒加载是指在用户滚动页面时，才加载可见区域内的图片，减少初始加载时间。
3. CSS和JavaScript文件的合并和压缩：将多个CSS和JavaScript文件合并成一个文件，并对其进行压缩，可以减少文件数量和文件大小，提高页面加载速度。
可以使用工具（如gulp或webpack）进行合并和压缩。
4. 使用缓存：浏览器缓存可以从本地存储获取资源，而不必每次都从服务器下载。
开发人员可以设置适当的缓存策略，将静态资源（例如样式表、脚本和图片）缓存到本地，减少网络请求，加快页面加载速度。
开发人员还可以使用缓存相关的HTTP头（如Expires 和Cache-Control）来控制缓存行为。
5. 使用CDN加速：CDN（内容分发网络）可以将网站的静态资源分发到全球的网络节点上，使用户能够从最近的节点获取资源，减少访问延迟，提高加载速度。
开发人员可以将静态资源上传到CDN上，并通过CDN提供的链接来引用资源。
6. 异步加载：对于页面中的异步内容（例如广告、社交分享插件等），可以使用异步加载来提高页面加载速度。
可以使用JavaScript动态加载这些资源，而无需阻塞页面加载。
Web前端页面性能优化小结
Web前端页面性能优化小结Web前端页面性能优化小结Web前端页面性能优化小结影响用户访问的最大部分是前端的页面。
*站的划分一般为二：前端和后台。
我们可以理解成后台是用来实现*站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。
而前端呢?其实应该是属于功能的表现。
而我们建设*站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。
不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。
说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢?前端的页面主要包括xhtml,c,js。
其实xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash,视频等。
而前端开发工作者可以控制的是什么呢?那就是xhtml，c，js的代码及相应的修饰(背景)图片。
下面我就根据我自己的经验来说说：一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。
结构中主要包括了head和body两个部分，但是我们经常说的是结构语义化主要是body 中的标签，但是我在这里还是简单的说一下 head，head中其实包括了一些对于我们seo很有用的一些东西，比如title,description,keywords,这些东西在蜘蛛抓取的时候都是有帮助的，当然，还有其他的一些，我在此就不一一说明了，比如设置缓存等一些其他的信息。
那么body中的话，包括的标签就很多了，我觉得作为一个合格的前端开发人员你应该去熟悉他们，比如div,span,h,ul,ol,dl,p等等这类的标签的使用。
应该非常合理，还有就是注意h标签的断层，及h1标签的使用，这些都是非常重要的。
同时在我们的结构中不要出现style和onclick这样的内联的样式和事件.。
Web前端开发技术和优化措施
Web前端开发技术和优化措施Web前端开发技术是指在Web应用程序开发过程中所使用的一系列技术，包括HTML、CSS、JavaScript等。
优化措施是指在开发过程中采取的一些方法和手段，以提高Web页面的性能和用户体验。
下面将分别介绍Web前端开发技术和优化措施。
1. HTML（超文本标记语言）：用于创建网页结构的标记语言。
HTML可以描述一个网页的内容和结构，包括标题、段落、图像、链接等，是Web页面的基础。
2. CSS（层叠样式表）：用于定义网页的样式和布局。
通过CSS可以实现网页的美化效果，包括颜色、字体、背景、边框等。
3. JavaScript：一种用于在网页上实现交互功能的脚本语言。
通过JavaScript可以实现网页的动态效果和用户交互，包括表单验证、事件处理、动态内容更新等。
4. Ajax（Asynchronous JavaScript and XML）：一种在网页上实现异步通信的技术。
通过Ajax可以实现网页无需刷新即可更新内容的功能，提高用户体验。
5. jQuery：一种基于JavaScript的快速、简洁的JavaScript库。
jQuery提供了丰富的功能，简化了JavaScript代码的编写，包括DOM操作、事件处理、动画、Ajax等。
6. Bootstrap：一种流行的前端开发框架。
Bootstrap提供了一套现成的HTML、CSS、JavaScript组件和样式，可以快速搭建响应式网页。
1. 减少HTTP请求：每个HTTP请求都会引起网络延迟，影响网页加载速度。
优化措施包括合并多个CSS、JavaScript文件、使用CSS Sprites技术合并图片等。
2. 压缩文件：压缩CSS和JavaScript文件，减小文件大小，加快文件下载速度。
3. 使用浏览器缓存：通过设置文件缓存策略，使得浏览器能够缓存网页的静态资源，减少重复请求。
4. 延迟加载：将不必要立即加载的资源，如图片、JavaScript代码等，推迟到用户实际需要时再加载，减少首次加载时间。
Web前端开发技术和优化措施
参考内容
随着互联网的快速发展，Web前端开发技术的重要性日益凸显。本次演示将 详细阐述Web前端开发技术的概念、常用技术以及优化方向，希望为读者提供有 价值的参考。
在网站建设中，Web前端开发技术扮演着至关重要的角色。它能让网站变得 更为友好、易用且富有吸引力，同时还能提高用户体验和满意度。Web前端开发 技术主要涵盖了HTML、CSS和JavaScript等，这些技术帮助实现网页的结构、样 式和交互功能。
JavaScript用于实现网页的交互性。通过JavaScript，可以响应用户的点 击、拖拽等操作，与服务器进行通信，实现动态的内容更新。现代的前端框架 （如React、Vue、Angular等）基于JavaScript，提供了更高效、更灵活的组件 化开发方式。
4、框架与库
为了提高开发效率和代码质量，前端开发者经常使用各种框架和库。例如， Bootstrap提供了响应式布局和丰富的组件；jQuery简化了DOM操作和Ajax请求； 而React、Vue和Angular等框架则提供了组件化开发的能力。
7、可访问性
可访问性是指网站对于残障人士和老年人的友好程度。为了提高可访问性， 需要色彩对比度、文字大小、键盘导航等方面的问题，提供无障碍化的网页设计 和服务。
8、性能优化
性能优化是提高网站性能的关键措施之一。可以通过优化数据库查询、减少 HTTP请求次数、使用缓存等技术提高网站性能。同时，合理地使用异步编程和 Web Workers等技术也可以提页在不同设备上都能良好地显示。通过媒体查询和流式 布局等技术，可以轻松实现响应式设计，提高用户体验。
4、提高代码质量
良好的代码质量可以提高可维护性和可扩展性。可以通过代码审查、自动化 测试、模块化开发等方法提高代码质量。同时，合理地使用工具和技术也可以降 低代码复杂度，提高开发效率。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
龙源期刊网 http://www.qikan.com.cn
浅谈WEB标准与前端性能优化
作者：梁春燕
来源：《数字技术与应用》2011年第01期
摘 要:国内几乎大部分的网页设计师没有遵守W3C标准。作为一名合格页面工程师,要学
会熟读标准,认识和了解标准。要检验你的代码是否和标准一致,要了解W3C标准的优势和用
意。前端性能优化和web标准有什么关系？就是对你遵循web标准的一个补偿。
关键词:WEB标准 网站建设 网页设计 网站前端性能优化 W3C
中图分类号:TP393 文献标识码:A 文章编号:1007-9416(2011)01-0113-02
网站标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构
(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分为三个方面:结构化标准语言
主要包括XHTML和XML;表现标准语言主要包括CSS;行为标准主要包括DOM、ECMAScript
等,这些大都源自W3C。
HTML和XHTML页面都是由“内容、结构、表现、行为”这4个方面组成的。内容是基础,
然后附加上去结构和表现,最后再对它们加上行为。而为什么在“前端开发”火热的现在还提遵守
WEB标准这个问题？我觉得有必要站在架构的层面,也站在众多的、辛苦的网页制作耕耘者的
立场上,全局看待web标准。
没有统计数字也可以从现在的网页产品中看到,国内几乎大部分的网页设计师没有遵守
W3C标准。非标准化的应用,FLASH眩目的动感,可以帮你让领导认可,让客户点头,让自己的工
作效率快快,产品多多。大家在匆忙中忽视或是避让了标准和规范,暂时忘记了真理才会永恒,然
而,每一个设计师都有追求完美的心理,他们永远对自己的作品不满足,一定不会给自己打满分。
在这个追求完美的过程中,他们要到达目标,其实就是前面的标准。也许,当网页制作中的每个成
员接近或是抵达这个目标时,内心一定非常释然。
作为一名合格页面工程师,要学会熟读标准,认识和了解标准。要检验你的代码是否和标准
一致,要了解W3C标准的优势和用意,假如用语言距离,普通话让中国人彼此能够沟通,英语让世
界人可以沟通。W3C标准就是让页面在不同的终端都可以运行,让使用各种终端的用户都能浏
览你的页面,也就是跨越平台,获得更大众化的用户的认可。更像一个平凡的人走向优秀,一个产
品走向品牌。
落后的页面工程师体系,美工代劳的页面代码,唯有IE才能浏览的页面代码,用图形工具直
接导出的页面代码,使大量流量消耗的页面代码,速度慢的像蜗牛的页面代码……每次改版修改
都要大动干戈,一种让页面工程师和民工一样的页面代码！网页设计师多了,站长多了,但质量标
龙源期刊网 http://www.qikan.com.cn
准却越来越差。模仿得形似神不似的韩版界面,让我们倍感失落。似乎想看到唯美一些的网站,
打开时总需要我们有足够的耐心去等待,或者有足够的技术安装插件。WEB标准就是一场革命,
革命——就是推翻旧的落后的体制,建立一个全新的先进的体制。这样,我们才会有秩序,才会和
谐发展。
如何遵循标准,其实标准有很多,结构标准,表现标准,行为标准。选择标准规范,就优先选择
W3C推荐的标准。结构标准可选项,建议选择适合你公司和团队的标准,其实核心理念还是让项
目统一遵循一个标准,严格的XHTML是这样的。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Moved to example.org
XHTML的媒体类型是application/xhtml+xml ,而不是被大多设备都识别的text/html。增加
xml头部声明还会造成IE6的quirks模式。总得来说,不是通用性很强的标准,使用的时候需要舍
弃W3C的一些说明,改良后的应该是去掉xml声明,去掉媒体类型是application/xhtml+xml。不
要给你们团队的开发造成不必要的困扰。
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
龙源期刊网 http://www.qikan.com.cn
建议选择XHTML1.0标准的过渡型,如果你觉得XHTML过于花俏,不适用,HTML4.0的严
格型也是很好的选择。HTML2.0已经被HTML5所取代,看来HTML4还是更具有向后的延续
性。
前端性能优化虽然是一个技术性话题,但对于用户体验有着非常大的影响,如果你的网站打
开要等待三、五秒或者等到浏览器提示无法连接,用户已经对这个网站产生了负面的抵触心
理。更别提流量、品牌影响、用户忠诚度。
前端性能优化和web标准有什么关系？就是对你遵循web标准的一个补偿。前端优化给
Web标准提供了一个检验的机会,用“实践是检验真理的唯一标准”来判断标准化到底好不好,对
不对,该不该遵守。为什么要这样做就可以提升速度,这些与Web标准有没有某种关联或者因果
呢？我们暂时把这些个条目分成三类:服务端运算优化,传输优化,客户端运算优化。
1、服务器端优化
服务器端就是对网站动态语言的执行(asp,php),数据库查询、存储速度等,总的来说就是输
入/输出的运算。这些跟前端没关系,但是却影响着前端。看不出来？那就自行优化服务器性能,
数据库性能,多买点服务器扩容吧。提高域名的DNS解析速度。减少DNS的解析个数。相信
以后还会有先进的技术来解决。
2、传输优化
龙源期刊网 http://www.qikan.com.cn
这一类很烦,首先是字节,字节越小越好,怎么能小下来,最有效的方式就是Google的方案,把
首页做的极其精简,图片、html、静态文件都非常小,再就是缓存,把文件放到本地缓存区读取。
还有http请求数,减少文件传输中的排队等待。
2.1 字节优化
减少冗余html,用结构化、语义化的html来体现,行为、表现、结构分离,独立的html文件
将变得很小。这点,禅意花园做得真好！压缩文本文件,css,html,js去掉注释、空格、换行等。降
低图片字节,选择合适的图片类型,png-8非常好,再用工具将图片进行压缩去掉,比如png-8的压
缩工具。用合适的图片尺寸,不要再做菜鸟,很不负责任的把大图控制一下宽高就用上了。gzip
压缩一下,减小服务器端传输到客户端时候的字节。flash文件和flash+xml的动态flash也减小
字节。
2.2 缓存
服务器端配置一下,提高缓存的命中率和把不经常修改的文件缓存了。Add Expires
headers、Etags、ajax使用get方式便于缓存。把能分离出来的css,js分离成外部文件便于缓
存。使flash和xml文件可缓存。打通不同运营商的限制,CDN提高不同类型运营商的网络传输
速度,电信,网通,铁通,教育网等等。
2.3 请求数
尽量减少文件请求数,能合并到一起的合并一下,css、js、图片等,减小排队等待和服务器端
的开销。分域提高同时加载数,优化排队等待。避免404无效请求数。避免重定向。
2.5 延迟加载和预载
把暂时不用的文件等主体页面加载完了再加载,把用户稍后要看浏览的内容预先加载进来,
相册浏览就是很好的例子,先用小图片放大再把大图展示出来,看本张图片时把下一张预载进来
等等。
3、客户端优化
(1)讨厌的IE滤镜和CSS expressions少用,小心把浏览器挂死,CUP 被100%占用。(2)CSS放
到前面去,JS能放到后面的放在代码后面,将页面尽早展示给浏览者。(3)减少IFRAME的使用,
这是一个不智之举。(4)减少DOM个数,降低浏览器解析压力。(5)使用 而不是@ import Choose
over @import,在 IE 中 @import 指(6)令等同于把 link 标记写在 HTML 的底部,而这与第一条相
龙源期刊网 http://www.qikan.com.cn
违背。提高JS的执行效率。(7)缩小 Cookie,针对 Web 组件使用域名无关性的 Cookie (Use
Cookie-free Domains for Components)。
(8)还有小图片的REPEAT背景会提高浏览器的CPU占用率。(9)合理的DOM排序,把重要
的内容代码前置,优先加载。
除了这些,虽然还有很多没对号入座的有关性能优化的条目,但至少,我们已经可以体验到网
页工程师的工作是如此烦琐,任务是如此艰巨,需要对代码、文件、HTTP协议、缓存、服务器
等内容或是技术达到精准的掌握和控制,达到提供给浏览用户最最基本的体验,那就是——访问
速度。所有的幕后工作浏览用户是看不到的,但不要因为他们看不到而放弃我们的目标——优
化和遵守标准。Web标准的分离思想和结构化、语义化html促成了以上很多行为的实施,这是
美工时代所不能比拟的。只需要每个人的遵守,相信WEB标准会引领我们进入一个新的时代,
想像那种境界美得像“潘多拉”一样。
作者简介:梁春燕(1972-03-31),女,大学本科,讲师。研究方向:计算机科学与技术。