`
yanghuidang
  • 浏览: 950674 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Web 前端优化最佳实践之 Server 篇

阅读更多

Web 前端优化最佳实践第二部分面向 Server 。目前共计有 6 条实践规则。【注,这最多算技术笔记,查看最原始内容,还请访问:Exceptional Performance : Best Practices for Speeding Up Your Web Site

1. 使用 CDN (Use a Content Delivery Network)

国内 CDN 的普及还不够。不过我们有独特的电信、网通之间的问题,如果针对这个作优化,基本上也算能收到 CDN 或类似的效果吧(假装如此)。【Tin 说国内 CDN 用的挺多,看看 CDN 厂商的市场就知道了,还没走入寻常百姓家】

2. 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)

各个浏览器都有针对的方案, Apache 例子【注意:下面的说明例子还不够精细,具体的环境上还要加一些调整】:
ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks"

Lighttpd 启用 mod_expire 模块 后:

$HTTP["url"] =~ "\.(jpg|gif|png)$" {
     expire.url = ( "" => "access 1 years" )
}

Nginx 例子参考:

location ~* \.(jpg|gif|png)$ {
  if (-f $request_filename) {
        expires      max;
    break; 
  }        
}


3. 压缩内容 (Gzip Components)

对于绝大多数站点,这都是必要的一步,能有效减轻网络流量压力。或许有人担心对 CPU 压缩对于 CPU 的影响,放心大胆的整吧,没事儿。Nginx 例子:

gzip            on;
gzip_types      text/plain text/html text/css ext/javascript;

另外参见:

4. 设置 Etags (Configure ETags)

对于 Etag,可能是多数网站维护者都会忽略的地方。在这一系列优化规则出现之前,可能互联网上绝大多数站点都对这个问题忽略了。当然,Etag 对多数站点性能的影响并不是很大。除非是面向 RSS 的网站。【看到有朋友批评说写的简略,并且说 IE 不支持 ETag。明确说一下:IE 支持 ETag,倒是使用 IIS 要注意相关 Etag Bug。】

补充:我的意思是"很多网站在不注意的情况下都是打开 Etag 的,而没有网站关心如何用,消耗资源而不知。并不是说 Etag 不好,合理利用 Etag ,绝对能取得很好的收益.

5. 尽早刷新 Buffer (Flush the Buffer Early)

对这一条,琢磨了半天,貌似还是异步的思路。能更好的提升用户体验?

6. 对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)

XMLHttpRequest POST 要两步,而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理的 URL 长度是 2K。

前一篇:

下一篇分析一下 Cookie 。

分享到:
评论

相关推荐

    高性能网站建设进阶指南:WEB开发者性能优化最佳PDF

    5. **前端优化**: - 前端性能优化包括代码分割、懒加载、预渲染、最小化HTTP请求、利用Service Worker等技术,以提高用户首次加载体验和后续交互速度。 6. **响应式设计**: - 为了适应各种设备和屏幕尺寸,高...

    前端开源库-electrode-server

    它支持静态资源服务、按需加载、代码分割等前端最佳实践,有助于减少页面加载时间,提升用户体验。 4. **跨平台兼容**: 由于Electrode Server是用Node.js编写的,因此它可以运行在各种操作系统上,包括Windows、...

    JavaScript构建Web和ArcGIS Server应用实战书籍配套代码

    JavaScript构建Web和ArcGIS Server应用实战书籍配套代码涵盖了利用JavaScript这一强大的前端脚本语言与ArcGIS Server进行交互,创建高效、交互性强的地理信息系统(GIS)应用的核心技术。本资源包含了一系列示例代码...

    Web GIS开发-ArcGIS Server与.NET 源代(刘光 唐大仕 )

    通过阅读《Web GIS开发-ArcGIS Server与.NET 源代》,读者不仅能掌握ArcGIS Server和.NET结合开发Web GIS的基本技术,还能了解到Web GIS的最新发展趋势和最佳实践,从而提升开发能力,解决实际工作中的问题。...

    Java Web开发实践教程ppt课件

    本教程通过12个章节的深入讲解,旨在让学习者全面了解并掌握Java Web开发的相关技术和最佳实践,为实际项目开发打下坚实的基础。每个章节都应包含丰富的实例和练习,以帮助学习者巩固理论知识,并提升实际操作能力。

    网站前端网页源码模板 (1080).zip

    10. **SEO优化**:前端源码还需要遵循SEO最佳实践,包括元标签的正确使用、页面速度优化、语义化HTML等,以提高搜索引擎的可见性和排名。 了解以上知识点,无论是新手还是经验丰富的前端开发者,都可以有效地利用这...

    Iceberg现代前端Web项目的样板

    10. **最佳实践**:遵循业界最佳实践,例如使用Git工作流、代码审查和持续集成/持续部署(CI/CD)。 文件名称“KevinPy-Iceberg-4758379”可能是这个样板项目的特定版本或者是由KevinPy创建的一个定制版。在实际使用...

    前端开源库-feather2-server-node

    Feather2-server-node是专为前端开发者设计的一个开源库,主要目标是提供一个基于Node.js的后端服务,用于支持前端应用的高效...在使用前,建议详细阅读官方文档,了解其具体使用方法和最佳实践,以便充分发挥其潜力。

    PWA在企业级项目中最佳性能优化实践.pdf

    梁伟盛,腾讯高级前端工程师,拥有丰富的Web开发经验和对新技术的深刻理解,他在业界分享了PWA在企业级项目中的最佳性能优化实践。通过他分享的内容,我们可以提炼出以下关键知识点: 一、PWA缓存策略 1. Cache-...

    基于Webpy+Apache HTTP Server的微信小程序架构搭建研究.zip

    5. **最佳实践与优化** - **性能优化**:合理使用缓存技术,如Redis,减少数据库查询负担;对API接口进行负载均衡和反向代理,提高系统并发能力。 - **安全考虑**:数据加密,防止SQL注入和XSS攻击,设置合理的...

    FrontendIntegratedSolution前端集成解决方案

    五、最佳实践 在实际应用中,前端集成解决方案应根据项目需求进行定制。比如,对于小项目,可以使用简单的工具链;对于大型复杂项目,则需要更全面的集成方案。同时,持续集成和持续部署(CI/CD)也是现代前端开发不...

    ArcGIS平台三维数据与服务最佳实践.pdf

    本文档《ArcGIS平台三维数据与服务最佳实践.pdf》详细介绍了在ArcGIS平台中实施三维数据与服务的最佳实践方法,覆盖了从Web场景与场景图层的创建、传统手工模型处理、BIM数据与GIS的融合,到倾斜模型导入ArcGIS平台...

    Mysql转Sqlserver.rar

    同时,务必遵循Web开发的最佳实践,确保代码的可维护性和性能。 总结,"Mysql转Sqlserver.rar"不仅提供了数据库迁移的技术指导,还包含了一套实用且美观的前端模板,对于那些寻求从MySQL过渡到SQL Server的开发者,...

    SpringBoot整合Vue最佳实践

    ### SpringBoot整合Vue最佳实践详解 #### 一、开发环境准备与项目搭建 ##### 开发环境 - **IDE**: IntelliJ IDEA 2018.5 - **Node.js**: 版本建议为 v6.4.x 或更高版本,推荐使用 LTS 版本以确保稳定性。 - **Vue ...

    web相关书籍1

    但可以理解为强调这个压缩包包含了多本深入探讨Web技术的书籍,这些书籍可能具有详尽的教程、案例研究和最佳实践,旨在帮助读者全面了解和提升在Web领域的技能。 【标签】:“Java”标签表明此压缩包中至少有一本...

    前后端分离(MVVM架构),C#、Sqlserver、Vue。web端采用ElementUI,手机端采用VantUI.zip

    这个项目结合了C#、Sqlserver、Vue.js、ElementUI和VantUI,构建了一个完整的前后端分离的Web应用,涵盖了后台服务开发、数据库管理、前端用户界面设计和移动端适配等多个方面,体现了现代Web开发的主流技术和最佳...

Global site tag (gtag.js) - Google Analytics