下载文档原格式
应用性能优化总结在当今数字化的时代，应用的性能对于用户体验和业务成功至关重要。
无论是移动应用、网页应用还是企业级应用，优化其性能都是开发者和运维团队持续关注的焦点。
本文将对应用性能优化进行全面总结，涵盖了从前端到后端，从硬件到软件的多个方面。
一、前端性能优化1、减少 HTTP 请求HTTP 请求是影响页面加载速度的重要因素之一。
合并 CSS 和JavaScript 文件、使用 CSS sprites 技术将多个小图片合并为一张大图，以及合理利用缓存策略，都可以有效减少 HTTP 请求的数量。
2、压缩资源文件对CSS、JavaScript 和HTML 文件进行压缩，可以减少文件的大小，加快传输速度。
同时，对于图片资源，选择合适的图片格式（如JPEG、PNG 或 WebP）并进行压缩，也能显著降低图片的大小。
3、优化图片加载采用懒加载技术，只在用户滚动到图片可见区域时才加载图片，可以避免一次性加载大量图片导致的页面卡顿。
另外，使用响应式图片，根据不同的设备和屏幕尺寸提供合适大小的图片，也能提高加载效率。
4、优化 CSS 和 JavaScript 加载顺序将 CSS 文件放在 HTML 文件的头部，JavaScript 文件放在底部，可以避免 JavaScript 脚本的加载和执行阻塞页面的渲染。
5、利用 CDN 加速内容分发网络（CDN）可以将静态资源缓存到离用户更近的服务器上，减少数据传输的距离和时间，从而提高加载速度。
二、后端性能优化1、数据库优化合理设计数据库表结构，包括选择合适的数据类型、建立索引、优化查询语句等，能够显著提高数据库的读写性能。
此外，定期对数据库进行优化和维护，如清理过期数据、优化表碎片等，也是必不可少的。
2、缓存策略使用缓存可以避免重复计算和数据查询，提高应用的响应速度。
常见的缓存技术包括内存缓存（如 Redis）、页面缓存和数据库缓存等。
需要根据数据的更新频率和访问模式来选择合适的缓存策略。
最新前端性能优化述职报告范本尊敬的领导和同事们：今天，我将向大家汇报我在前端性能优化方面的工作进展和成果。
在过去的一年中，我们团队致力于提升网站和应用的加载速度、响应时间和整体用户体验。
以下是我们的工作重点和取得的成就。
1. 代码分割与懒加载：我们实施了代码分割技术，将应用程序分割成多个小块，并且只在需要时加载这些代码块。
这显著减少了初始加载时间，并提高了应用程序的响应速度。
2. 树摇（Tree Shaking）：通过移除未使用的代码，我们减少了最终打包的体积。
这不仅加快了加载速度，还减少了服务器的带宽消耗。
3. 优化静态资源：我们对图片和视频进行了压缩，同时利用了现代格式如WebP和AVIF，这些格式提供了更好的压缩率和加载性能。
4. 利用浏览器缓存：通过配置合理的HTTP缓存策略，我们减少了重复资源的加载，加快了页面的再次访问速度。
5. 使用CDN和边缘计算：内容分发网络（CDN）的使用，使得我们的资源可以在全球范围内快速分发，边缘计算的引入进一步降低了延迟。
6. 服务端渲染（SSR）：对于动态内容，我们采用了服务端渲染技术，这使得首屏加载速度得到了显著提升。
7. 性能监控与分析：我们部署了实时性能监控系统，可以即时发现并解决性能瓶颈问题。
8. 前端框架和库的优化：我们对使用的前端框架和库进行了审查，移除了不必要的依赖，并对关键库进行了版本升级，以利用最新的性能改进。
9. 响应式设计：我们确保了所有前端界面在不同设备上都能提供良好的用户体验，通过媒体查询和灵活的网格系统来实现。
10. 性能预算：我们设定了性能预算，确保在添加新功能时不会牺牲性能。
通过这些措施，我们不仅提升了网站的性能，还提高了用户满意度和转化率。
我们的努力已经得到了数据的支持，页面加载时间平均减少了40%，跳出率降低了15%，用户参与度提升了20%。
在未来，我们将继续关注性能优化的最新趋势和技术，不断探索和实施新的优化策略，以保持我们平台的竞争力。
前端性能优化的六个性能指标在前端开发中，性能优化是一个非常重要的方面。
一个网页的性能好不好，直接影响着用户的访问体验和网站的质量。
为了衡量和评估前端性能，有一些常用的性能指标可以作为参考。
本文将介绍六个常见的前端性能指标，并分别进行详细解析。
1. 页面加载时间（Page Load Time）页面加载时间是一个网页从开始加载到完全加载完成所花费的时间。
这个指标直接影响用户的等待时间，加载时间越短，用户获取信息的速度就越快，体验就会更好。
优化页面加载时间的方法有很多，比如减少HTTP请求、压缩和合并CSS和JavaScript文件、使用浏览器缓存等。
2. 首屏渲染时间（First Paint Time）首屏渲染时间是指页面首次出现可见内容的时间。
与页面加载时间类似，首屏渲染时间也是用户体验的重要指标之一。
通过优化HTML结构、延迟加载非关键资源、使用浏览器缓存等手段，可以减少首屏渲染时间，提高用户感知的速度。
3. 可交互时间（Time to Interactive）可交互时间是指页面完全加载完成并且用户可以与页面进行交互的时间点。
这个指标反映了用户能否立即与页面进行互动，对于提升用户体验非常重要。
减少JavaScript的执行时间、优化DOM结构，并避免过度渲染等手段可以减少可交互时间。
4. 请求响应时间（Response Time）请求响应时间是指浏览器发出请求后，服务器返回响应所花费的时间。
这个指标主要影响到后端性能，但也会直接影响到前端性能。
通过优化后端系统，如数据库查询优化、使用CDN加速等，可以缩短请求响应时间，提高整体性能。
5. 资源加载时间（Resource Load Time）资源加载时间是指页面中各种资源（如图片、CSS、JavaScript文件）加载完成所花费的时间。
优化资源加载时间可以通过减少资源大小、使用压缩和合并技术、使用懒加载等方式来提高页面的加载速度。
6. 可用性和稳定性（Availability and Reliability）除了上述几个具体的性能指标外，网页的可用性和稳定性也是非常重要的。
前端性能优化的10种技巧，提升用户体验随着互联网的快速发展，网站的性能对于用户体验的影响越来越大。
在一个网站中，前端性能优化往往是实现网站性能提升的关键所在。
在本文中，我们将介绍十种前端性能优化的技巧，帮助您提升网站的性能和用户体验。
一. 压缩图片加载过程最耗费时间的元素之一就是图片。
大图片会拖慢网站的速度，增加加载时间。
可以使用一些压缩图片的工具，比如TinyPNG、TypePNG、ImageOptim等等，这些工具帮助你缩小图片大小并加速加载速度。
二. 减少HTTP请求HTTP带宽是有限的，每次加载图片、脚本、样式表等元素都会消耗带宽，每个HTTP请求的时间延长，加载时间就会加长。
可以使用CDN技术，将文件分布在不同的服务器上缓存，以此达到优化的效果。
三. 尽量减小CSS和JS文件的大小CSS和JS文件是网站的主要构成部分，但是当文件过于庞大时，会严重拖慢网站的速度。
可以使用打包工具来将多个CSS和JS文件整合成一个文件，或者使用GZIP压缩算法。
四. 使用CSS Sprite和IconFont技术CSS Sprite和IconFont技术可以较好地解决加载多图片的问题。
CSS Sprite是将多个图片整合成一张图片，在页面上只显示某一部分，减少HTTP请求次数。
IconFont技术则是将图标字体转化为CSS代码，减少了图片的加载时间。
五. 资源懒加载资源懒加载技术可以帮助网页先加载重要的部分，等到页面滑到需要的部分时再进行加载。
这种方法可以明显地提升网页的响应速度，减少加载时间。
六. 压缩HTML代码可以使用HTML压缩工具，将HTML代码压缩成gzip格式。
这样可以减小文件的大小，加快加载速度。
七. 数据缓存数据缓存是一种常见的优化技术，利用这种技术可以减少HTTP请求次数和服务器端的负载。
可以在本地使用Web Storage API将数据存储在浏览器中，以便将来可以直接使用它们。
八. 前端异步加载前端异步加载技术可以使网站更快地加载，提升用户体验。
前端总结改进建议1.优化网页加载速度- 合并和压缩CSS和JavaScript文件，减少HTTP请求。
- 使用图片压缩工具来减小图片文件大小。
- 使用CDN（内容分发网络）来加速静态资源的加载。
- 将CSS放在页面头部，将JavaScript放在页面底部。
2.响应式设计- 使用媒体查询来适配不同尺寸的设备，提供良好的用户体验。
- 使用弹性布局（Flexbox）或格栅系统来构建响应式页面。
- 使用相对单位（如百分比或rem）来定义字体大小和元素宽度，以适应不同设备。
3.代码优化- 使用语义化的HTML标签来提高页面可读性和SEO优化。
- 避免使用内联样式和内联脚本，将其转移到外部CSS和JavaScript文件中。
- 使用代码压缩工具来减小文件大小，提高加载速度。
- 避免使用过多的第三方库和插件，只使用必要的功能。
4.浏览器兼容性- 尽量使用标准的HTML5和CSS3语法，避免使用已废弃的标签和属性。
- 在开发过程中测试和适配不同的主流浏览器（如Chrome、Firefox、Safari和Edge）。
- 使用兼容性检测工具来检测和修复浏览器兼容性问题。
5.性能优化- 减少DOM操作和重绘，尽量使用事件委托来提高性能。
- 使用异步加载脚本的方式，避免阻塞页面的加载。
- 对于大量数据的渲染，可以考虑使用虚拟滚动或分页加载来提高性能。
- 使用缓存策略，减少对服务器的请求次数。
6.安全性考虑- 对用户输入进行正确的验证和过滤，防止XSS和SQL注入等安全漏洞。
- 使用HTTPS来保护用户数据的传输安全。
- 在开发过程中及时更新和修复已知的安全漏洞。
以上是关于前端总结改进建议的一些内容，如果能够在实际开发中合理应用这些建议，将能提升网页的性能、用户体验和安全性。
希望对你有所帮助！。
前端性能优化总结（⾯试向）概述如今的前端开发已经从严重依赖后端演变成了node做中间层，MVVM框架进⾏服务端渲染做view层。
性能优化也变得异常重要，我主要对以下⼏个⽅⾯做了⼏个总结：1. performance⾯板。
2. 雅虎军规。
3. ⾸屏性能优化。
4. html，css和js的性能优化。
5. PC，移动端和服务端的性能优化。
6. react和vue框架的性能优化。
7. 前端⼯业化的性能优化。
虽然做不到⾯⾯俱到，但是过⼀段时间之后在看，也许会有不⼀样的体会呢~performance⾯板如何查看前端页⾯的性能？1. 在chrome浏览器端可以打开开发者⼯具，查看performance⾯板，然后点击'Start profiling and reload page'就可以重载页⾯，然后显⽰页⾯性能了。
2. 如果是react，可以安装'react-devtools'查看各个组件的渲染情况；还可以安装'redux-devtools-extension'查看redux的数据流动情况。
雅虎军规雅虎军规是业界最知名的性能优化指南，虽然有些已经不适⽤了，但是有很多条直到现在仍然很有参考价值的，⾮常适合⼀条条对着优化。
1.尽量减少 HTTP 请求个数——须权衡2.使⽤ CDN（内容分发⽹络）3.为⽂件头指定 Expires 或 Cache-Control ，使内容具有缓存性。
4.避免空的 src 和 href5.使⽤ gzip 压缩内容6.把 CSS 放到顶部7.把 JS 放到底部8.避免使⽤ CSS 表达式9.将 CSS 和 JS 放到外部⽂件中10.减少 DNS 查找次数11.精简 CSS 和 JS12.避免跳转13.剔除重复的 JS 和 CSS14.配置 ETags15.使 AJAX 可缓存16.尽早刷新输出缓冲17.使⽤ GET 来完成 AJAX 请求18.延迟加载19.预加载20.减少 DOM 元素个数21.根据域名划分页⾯内容22.尽量减少 iframe 的个数23.避免 40424.减少 Cookie 的⼤⼩25.使⽤⽆ cookie 的域26.减少 DOM 访问27.开发智能事件处理程序28.⽤ <link> 代替 @import29.避免使⽤滤镜30.优化图像31.优化 CSS Spirite32.不要在 HTML 中缩放图像——须权衡33.favicon.ico要⼩⽽且可缓存34.保持单个内容⼩于25K35.打包组件成复合⽂本⾸屏性能优化⾸屏加载时间⾮常重要，严重影响⽤户的跳出率。
第1篇一、前言时光荏苒，转眼间又到了一年一度的总结时刻。
作为一名前端工程师，我在过去的一年里，经历了许多挑战和成长。
在此，我将对自己过去一年的工作进行总结和反思，以便更好地规划未来的发展。
一、工作概述在过去的一年里，我主要负责公司项目的开发和维护工作。
具体工作内容如下：1. 参与项目需求分析，与产品经理、设计师和后端工程师沟通，确保项目顺利进行。
2. 使用HTML、CSS、JavaScript等前端技术进行页面开发，实现产品功能。
3. 负责页面性能优化，提高用户体验。
4. 参与团队技术分享，提升团队整体技术水平。
5. 对项目进行持续迭代和优化，满足用户需求。
二、工作亮点1. 技术能力提升（1）熟练掌握了HTML5、CSS3、JavaScript等前端技术，具备较强的代码编写能力。
（2）学习了Vue、React等主流前端框架，能够快速上手并应用于实际项目中。
（3）熟悉Webpack、Gulp等前端构建工具，提高了项目开发效率。
2. 项目成果（1）参与开发的多个项目上线，得到用户好评。
（2）优化页面性能，提高用户体验，降低页面加载时间。
（3）与团队协作，完成项目迭代和优化，满足用户需求。
3. 团队贡献（1）参与团队技术分享，提升团队整体技术水平。
（2）协助新员工解决技术难题，促进团队共同成长。
（3）积极参与团队讨论，为项目提出建设性意见。
三、工作不足1. 技术深度不足（1）对某些前沿技术了解不够深入，需要加强学习。
（2）在项目中遇到一些复杂问题时，处理能力有限。
2. 项目管理能力有待提高（1）对项目进度把控不够严格，有时出现延期现象。
（2）与团队成员沟通不足，导致部分工作协调不畅。
3. 自我提升意识不足（1）对新技术、新知识的学习不够主动，满足于现状。
（2）在工作中遇到问题时，缺乏主动解决问题的意识。
四、改进措施1. 技术提升（1）深入学习前端前沿技术，提高技术深度。
（2）关注行业动态，紧跟技术发展趋势。
前端性能优化减少页面加载时间的技巧近年来，随着互联网的快速发展，人们对网页的加载速度要求也越来越高。
对于前端工程师来说，如何优化页面性能，减少页面加载时间变得尤为重要。
本文将介绍一些有效的技巧，帮助前端开发人员实现页面加载时间的大幅度缩短。
一、文件合并和压缩将多个CSS和JavaScript文件合并为一个可以减少HTTP请求次数，从而提高页面加载速度。
此外，通过对CSS和JavaScript文件进行压缩，可以减小文件大小，进一步缩短加载时间。
二、延迟加载将网页中的非关键资源延迟加载，即在页面加载完成之后再加载这些资源，可以有效减少页面的加载时间。
图片懒加载是一种常用的延迟加载技术，只有当图片进入浏览器可视区域时才进行加载，可以避免不必要的带宽浪费，提高页面的响应速度。
三、图像优化优化图像是减少页面加载时间的关键。
可以通过压缩图片文件大小、使用合适的图片格式以及使用CSS Sprites技术来实现。
压缩图片文件可以减小文件大小，使用合适的图片格式可以使图片文件更小，而CSS Sprites技术可以将多个小图标合并为一个大图，从而减少HTTP请求的次数。
四、缓存策略合理利用浏览器缓存机制可以减少对服务器的请求，加快页面加载速度。
通过设置HTTP头中的Expires和Cache-Control属性，可以让浏览器缓存静态资源。
另外，对于经常变化的动态资源，可以使用版本号或者摘要来使浏览器重新请求最新的资源，并更新缓存。
五、异步加载将部分JavaScript代码设置为异步加载可以提高页面的并行加载能力，减少页面加载时间。
通过将脚本放在<body>标签末尾或者使用async和defer属性，可以使脚本在页面加载过程中不会阻塞其他资源的加载。
六、对DOM的操作优化在页面加载完成后，对DOM的频繁操作会导致页面性能下降。
因此，优化DOM操作是提高页面加载速度的有效方法。
可以将多个DOM操作合并为一次操作，减少DOM的重绘和回流，从而提高页面的响应速度。
前端性能优化的九个关键指标随着互联网的飞速发展，前端性能优化成为了网页设计和开发中的一个重要环节。
优化前端性能可以提高网页的加载速度，提升用户体验，并且有助于网站的搜索引擎优化。
本文将介绍前端性能优化的九个关键指标，并提供相应的优化建议。
一、页面加载时间页面加载时间是衡量网页性能的重要指标之一。
用户期望网页能够在几秒钟内加载完成，长时间的等待会让用户感到不耐烦并可能导致用户的离开。
为了优化页面加载时间，可以采取以下措施：1. 压缩和合并文件：将CSS和JavaScript文件进行压缩，并合并成一个文件，减少网络请求次数。
2. 延迟加载：将不必要的资源，如图片、音频和视频，延迟加载，仅在用户滚动到对应位置时再加载。
3. 使用浏览器缓存：通过设置缓存机制，使得用户在再次访问网页时可以从本地缓存中加载静态资源，减少服务器的请求次数。
二、响应时间网页的响应时间是用户与网站进行交互的反馈时间，即用户操作后网页给出响应的时间。
较长的响应时间会让用户感到网站不流畅，影响用户体验。
为了缩短响应时间，可以采取以下措施：1. 减少HTTP请求：通过减少CSS和JavaScript等文件的数量，减少服务器与浏览器之间的HTTP请求次数。
2. 使用CDN加速：将静态资源部署到CDN（内容分发网络）上，提高资源的分发速度和用户的访问速度。
3. 前端缓存：对一些不常变化的数据，使用前端缓存技术，减少与服务器的通信次数。
三、首次内容绘制（First Contentful Paint）首次内容绘制是指在浏览器渲染网页时，第一次将内容绘制到屏幕上的时间点。
通过优化首次内容绘制，可以提高用户感知到网页加载速度的时间。
以下是提高首次内容绘制的方法：1. 减少重定向：避免页面的重定向，优化网页的跳转链接。
2. 压缩图片：使用适当的图片压缩技术，减少图片文件的大小。
3. 资源异步加载：将JavaScript文件放在网页底部，并采用异步加载的方式，确保页面首次内容的绘制不受影响。
前端性能优化的优化与懒加载技术在前端开发中，性能优化是一个不可忽视的重要环节。
优化前端性能可以提升网站的加载速度，改善用户体验，降低服务器压力等。
其中，懒加载技术是一种有效的方式，可以提高页面的加载效率和用户的体验。
本文将围绕前端性能优化的优化与懒加载技术展开论述。
一、优化前端性能的重要性随着互联网的快速发展，人们对网站的要求越来越高，期望能够快速地获取所需信息。
而网站的性能，特别是加载速度，直接影响着用户体验和用户留存率。
因此，优化前端性能显得尤为重要。
优化前端性能可以通过多种方式实现，如减少 HTTP 请求、压缩资源文件、使用 CDN 加速、合理利用缓存等。
而懒加载技术作为其中的一种，具有很高的实用性和效果。
二、什么是懒加载技术懒加载技术（Lazy Load），又被称为延迟加载或惰性加载，是一种延迟加载内容的方法。
它的核心思想是将网页中的一些不需要立即加载的内容，在用户需要时再去加载。
懒加载技术的最主要应用场景就是图片加载。
在传统的图片加载中，浏览器会一次性加载完所有的图片资源，不管用户实际是否需要查看全部图片。
而懒加载技术就是将页面上图片的加载进行延迟，当用户滚动到图片所在位置时，再去加载该图片。
三、懒加载技术的优势和实现方式1. 提升页面加载速度：懒加载技术可以减少页面初始加载的内容数量，提高页面的响应速度。
2. 减轻服务器压力：只有用户真正需要查看的内容才会加载，减少了不必要的网络请求，降低了服务器的负载压力。
3. 提升用户体验：页面初始化速度快、流畅度高，用户体验得到改善。
实现懒加载技术的方法有多种，可以通过原生 JavaScript 实现，也可以使用插件和框架来简化开发。
下面是几种常见的实现方式：1. 基于 IntersectionObserver 的懒加载：利用 IntersectionObserver API 来监测元素是否进入视口，并在元素可见时加载图片。
2. 使用 LazyLoad 插件：一些常用的库和插件（如 zyload、lozad.js）提供了懒加载的功能，通过调用相应方法即可实现。
网站前端性能优化总结
一、服务器侧优化
1. 添加 Expires 或 Cache-Control 信息头
某些经常使用到、并且不会经常做改动的图片（banner、logo等等）、静态文件（登录首页、说明文档等）可以设置较长的有效期（expiration date），这些HTTP头向客户端表明了文档的有效性和持久性。
如果有缓存，文档就可以从缓存（除已经过期）而不是从服务器读取。
接着，客户端考察缓存中的副本，看看是否过期或者失效，以决定是否必须从服务器获得更新。
各个容器都有针对的方案,，以 Apache 为例：
ExpiresActive On
ExpiresByType image/gif "access plus 1 weeks"
表示gif文件缓存一周，配置可以根据具体的业务进行调整，具体配置可以参考：
/Apache/ApacheMenu/mod/mod_expires.html
2. 压缩内容
对于绝大多数站点，这都是必要的一步，能有效减轻网络流量压力。
<ifmodule mod_deflate.c>
DeflateCompressionLevel 9
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-httpd-php
AddOutputFilter DEFLATE html htm xml php css js
</ifmodule>
表示zlib在压缩时可以最大程度的使用内存，压缩html、文本、xml和php这几种类型的文件，指定扩展名为html、htm、xml、php、css和js的文件启用压缩。
具体配置可以参考：
/Apache/ApacheMenu/mod/mod_deflate.html
3. 设置 Etags
在使用etags之前，有必要复习一下RFC2068中规定的返回值 200 和 304 的含义：
200--OK
304--Not Modified
客户端在请求一份文件的时候，服务端会检查客户端是否存在该文件，如果客户端不存在该文件，则下载该文件并返回200；如果客户端存在该文件并且该文件在规定期限内没有被修改（Inode，MTime和Size），则服务端只返回一个304，并不返回资源内容，客户端将会使用之前的缓存文件。
而etags就是判断该文件是否被修改的记号，与服务器端的资源一一关联，所以etags对于CGI类型的页面缓存尤其有用。
下图是优化前的首页：（注意，此时没有压缩首页图片，即使使用了缓存，仍需要5s左右的时间）
化前的某页面
需要注意的是，使用etags会增加服务器端的负载，在实际应用中需要自行平衡。
二、Cookie优化
1. 减小Cookie体积
HTTP coockie可以用于权限验证和个性化身份等多种用途。
coockie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。
因此保持coockie尽可能的小以减少用户的响应时间十分重要。
l 使cookie体积尽量小；
l 在合适的子域名上设置bookie，以免影响其他子域名下的响应；
l 设置合理的过期时间，去掉不必要的cookie。
下面对比一下各个网站的cookie：
图中可以看出，6K的cookie显然是不必要的
2. 对于页面内容使用无coockie域名
当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。
因此他们只是因为某些负面因素而创建的网络传输。
所有你应该确定对于静态内容的请求是无coockie的请求。
创建一个子域名并用他来存放所有静态内容。
例如，域名是，则可以考虑可以在上存在静态内容。
但是，如果不是在上而是在顶级域名设置了coockie，那么所有对于的请求都包含coockie。
在这种情况下，可以考虑重新购买一个新的域名来存在静态内容，并且要保持这个域名是无coockie的。
例如，使用的是，使用的是，使用的是等等。
性能方面的考虑还有使用带有www的子域名并且在它上面设置coockie，因为忽略www会把cookie设置到*上去，使cookie带有一些不必要的信息。
三、JAVA SCRIPT 和 CSS优化
1. 把 CSS 放到代码页上端
这么做可以避免浏览器在解释一次之后，使用css进行第二次解释，因为用户对css裸奔日效果根本就不感兴趣。
css裸奔节效果图（来源：网络）
2. 避免 CSS 表达式
凡是只有IE能用的东西，都不是好东西。
3. 从页面中剥离 JavaScript 与 CSS
剥离后，能够有针对性的对其进行单独的处理策略，比如压缩或者缓存策略。
（css已经剥离，但js嵌入到html里面了，并且放在了html的上部，所以这货是正面+反面教材）
4. 精简 JavaScript 与 CSS
语法能简写话尽量简写。
（相同表现的类合并）
5. 使用 <link> 而不是@importChoose <link> over @import
在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部，这与第一条相违背。
6. 避免使用CSS Filter
尽量使用png格式的图片来代替滤镜效果，因为开启滤镜会加大浏览器的开销。
7. JS尽量放到页面最下端
当一个脚本在下载的时候，浏览器会卡住，无法响应其他请求。
所以，可以将功能性的JS 放到最后端去处理。
8. 页面展现尽量交给CSS完成
曾经见过一个JS+CSS写出来的下拉框，如图：
实现原理是JS获取页面的每一个select元素和其对应的属性，然后用js重新画出新的样式效果：
多出的这部分JS执行过程会降低客户端的性能,所以最终没有采用这个select样式。
四、图片优化
1. 优化图片
尽可能的使用 PNG 格式的图片，因为和GIF相比，PNG有更多的功能和更小的体积，而且未来PNG会加入动画效果：
2. 使用 CSS Sprites 对图片优化
简单的说就是"利用 CSS background 相关元素进行背景图绝对定位"，把多次HTTP 调用变为一次调用：
这些表情在鼠标没有经过的时候，都是从一张图片上绝对定位出来的，只有在鼠标放到某一张表情上时，才会从服务器上下载gif图片，这样可以减少(N-1)次HTTP请求。
使用 CSS Sprites 的不足之处是客户端将消耗更多内存，因为CSS Sprites 会打开多个图片的副本，目前的解决办法是按照使用频率不同，合并成几个级别的图片，分批次下载并在客户端
展示。
3. 不要在 HTML 中缩放图片
用ImageMagic命令（convert ）就能将图片缩放成合适的尺寸，所以尽量不要交给浏览器去执行。
4. 用更小的并且可缓存的 favicon.ico
原因是没有favicon.ico，服务器会返回一个404，与可以长时间缓存的文件相比，大量的404会增加服务器的响应数量。
（服务器上因为缺少favicon.ico而产生的404错误）
4. 压缩图片不一定是有损的
对已有图片进行压缩并不对影响用户体验，主要基于以下两点：
1. 用户未必会感觉到色彩的损失；
2. 压缩不一定会损坏图片的质量。
无损压缩图片的原理可以参考下面的链接，本文不再赘述：
/wiki/Image_compression
最初测试平台首页使用的是未压缩过的图片，下载速度明显受拖延，有时会达到将近十秒钟左右的下载时间，在经过无损压缩首页图片之后，提升效果效果很明显，基本控制在了一秒钟之内：
下图是压缩前后的大小对比：
该工具地址为：/，强烈推荐使用。
五、内容优化
1. 减少 DNS 查找
DNS lookup 是很耗费时间的步骤，网站上如果过多的使用了站外的 Widget ，DNS 查找带来的问题是不容忽视的。
2. 尽量减少重定向
并且注意一些不必要的重定向，比如对 Web 站点子目录的后面添加个 "/" ，就能有效避免一次重定向。
对于服务器来说，请求/fml与请求/fml/是有差异的。
如果是 Apache 服务器，可以通过配置mod_rewrite解决这个问题。
具体请参考：/Apache/ApacheMenu/mod/mod_rewrite.html
3. 切分组件到多个域
主要的目的是提高页面组件并行下载能力，但注意，也不要同时使用过多的域名，否则就会出现第一条DNS lookup过多的问题，一般情况下两个域名就可以了。
4. 杜绝 http 404 错误
对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪可以有效减少 404 错误，并提升用户体验。
后记：
这次总结给我带来的启发并不在于提升系统性能性能本身，提升性能只是一个很表面上的东西，网上的方法有很多，测试的方法也有很多，照着都做一遍，性能确实会有所提升，但是这种知其然而不知其所以然的性能提升是没有意义的，这便是本文的目的所在。
参考：
/performance/
/speed/page-speed/docs/rules_intro.html
/subject/4719162/
/subject/3132277/。
