`
leiwuluan
  • 浏览: 694166 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

web前端优化机制

阅读更多

1)内容上的优化:
     尽量减少 HTTP 请求,有几种常见的方法能切实减少 HTTP 请求:
      1) 合并文件,比如把多个 CSS 文件合成一个; 
      2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位;
      3) 图像地图 
      4) 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据.
      2)减少 DNS 查找
      3)避免重定向 
       有差异 的。如果是 Apache 服务器,通过配置 Alias  或mod_rewrite 或是 DirectorySlash 能消除
      4)使得 Ajax 可缓存
      响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段 就是Cache 。其它的一     些优化规则对这一条也是有效的。 
      5)延迟载入组件 (Post-load Components)
      6)预载入组件 (Preload Components)
      7)减少 DOM 元素数量 (Reduce the Number of DOM Elements)
      8)切分组件到多个域 (Split Components Across Domains)
       主要的目的是提高页面组件并行下载能力。但不要跨太多域名,否则就和第二条有些冲突了。
      9)最小化 iframe 的数量 (Minimize the Number of iframes)
       http 404 错误
2)面向Server端:
      1)使用 CDN (Use a Content Delivery Network)
      2) 添加 Expires 或 Cache-Control 信息头
      3)压缩内容 (Gzip Components)
      4)设置 Etags (Configure ETags)
      5)尽早刷新 Buffer (Flush the Buffer Early)
      6)对 AJAX 请求使用 GET 方法 (Use GET for AJAX Requests)
      XMLHttpRequest POST 要两步,而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能处理 的 URL长度是 2K。
3)面向cookie
      1)缩小 Cookie (Reduce Cookie Size)
      根据 RFC 2109 的描述,每个客户端最多保持 300 个 Cookie,针对每个域名最多 20 个Cookie  (实 际上多数浏     览器现在都比这个多,比如 Firefox 是 50 个) ,每个 Cookie 最多 4K,注 意这里的 4K 根据不同的浏览器可能     不是严格的 4096 。别扯远了,对于 Cookie 最重要的就 是,尽量控制 Cookie 的大小,不要塞入一些无用的信息。
      2)针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)
 这个话题在此前针对 Web 图片服务器的讨论中曾经提及。这里说的 Web 组件(Component),多 指静态文件,比如图片 CSS 等,Yahoo! 的静态文件都在 yimg.com 上,客户端请求静态文件 的时候,减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。

分享到:
评论

相关推荐

    2023年前端面试必备最新八股文(基础+进阶内容+持续更新)

    包括了css,javascript,vue,webpack,vite,html5新特性等等,包括了面试中比较常见的BFC,v8垃圾回收机制,vite和webpack的区别,vue中遇到的问到,防抖节流,深拷贝,浅拷贝,盒子模型,作用域,闭包,浏览器...

    2022前端企业高频问答题

    JavaScript是Web前端之本,也是进阶全栈的基石。它的知识点非常繁杂,是前端开发知识体系中比较难的区域。 对JavaScript理解的深度决定了未来的发展前景。 在企业中,这也决定了你是否能够有很高的工资!赶紧下载刷题...

    web性能权威指南

    涵盖Web开发者技术体系中应该掌握的所有网络及性能优化知识。... 《Web性能权威指南》适合所有Web应用及站点开发人员阅读,包括但不限于前端、后端、运维、大数据分析、UI/UX、存储、视频、实时消息,以及性能工程师。

    前端最全汇总面试题及答案.docx

    前端面试题以及答案 HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、...

    front-end-notes:前端笔记

    ReactHybrid总结md-4:CSS 必备知识介绍HTML 基础CSS 基础CSS 布局CSS 效果CSS 动画CSS 预处理器BootstrapCSS 工程化框架中的 CSS总结md-5:Web 前端性能优化web 前端性能优化资源的合并与压缩图片相关的优化css 和 ...

    web性能优化之javascript性能调优

    JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用。随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且...

    深入分析Java Web技术内幕 修订版.pdf

    首先介绍前端知识,即在JavaWeb 开发中涉及的一些基本知识,包括Web 请求过程、HTTP、DNS 技术和CDN 技术。其次深入介绍了Java 技术,包括I/O 技术、中文编码问题、Javac 编译原理、class 文件结构解析、ClassLoader...

    深入分析Java Web技术内幕 修订版

    首先介绍前端知识,即在JavaWeb 开发中涉及的一些基本知识,包括Web 请求过程、HTTP、DNS 技术和CDN 技术。其次深入介绍了Java 技术,包括I/O 技术、中文编码问题、Javac 编译原理、class 文件结构解析、ClassLoader...

    leetcode算法题主函数如何写-interview-question:Web前端开发者面试

    谈谈你对前端工程化的理解?(网易、字节) 从url输入到页面展示发生了什么? 手写代码 有些公司会有手写代码的环节:滴滴、快手、有赞 手写简易版Promise源码 手写继承 手写bind 手写Promise.all 手写EventEmitter...

    springmvc demo

    Spring Web MVC也是服务到工作者模式的实现,但进行可优化。前端控制器是DispatcherServlet;应用控制器其实拆为处理器映射器(Handler Mapping)进行处理器管理和视图解析器(View Resolver)进行视图管理;页面控制器/...

    javaweb模板源码下载-jello:J2EEVelocity前端集成解决方案

    为优化前端开发而生,提供前后端开发分离、自动性能优化、模块化开发机制等功能。 本项目基于 fis2, 基于 fis3 的版本请移步至: 目录 [jello 命令](#jello 命令) 前后端分离 基于 velocity 模板引擎实现前后端分离...

    Web-interview:《前端面试小册》从面试前简历的准备到知识点的总结,全面复盘大前端面试知识点(实时更新,实时补充):writing_hand::writing_hand::writing_hand:

    2020/1/14对面试准备内容做一次整体的优化。 2020年1月15日开始写JavaScript基础知识部分。 2020/1/16写数据类型中的七大模块部分。 2020/1/17写这篇,闭包等重点部分。 2020/1/30写消息循环机制的原理 2020/02...

    bookjs-eazy:网页打印并使pdf文件变得如此轻松,HTML自动分页插件。用于生成PDF,前端WEB打印生成PDF或生成wkhtmltopdf,chrome无头生成

    bug:苹果手机预览会出线分页和字体大小问题,在于插件依赖js动态计算高度,似乎是因为苹果为了优化,渲染不同步所带来的 使用方式: 渲染机制: 程序会检查全局变量window.bookConfig.start 的值。 直到此值为true...

    跟我学SpringMVC

    Spring Web MVC也是服务到工作者模式的实现,但进行可优化。前端控制器是DispatcherServlet;应用控制器其 实拆为处理器映射器(Handler Mapping)进行处理器管理和视图解析器(View Resolver)进行视图管理;页面控制...

    最新ssm项目基于Java web的高校学生课堂考勤系统的设计与实现+vue.zip

    7. **界面友好性**:前端使用Vue.js构建,提供了适合教育行业的清晰、直观且响应式的用户界面,同时优化了用户体验。 8. **技术文档**:项目提供完善的技术文档,包括系统架构、代码结构、API接口说明等,方便开发者...

    C#进阶系列--WebApi

    C#进阶系列——WebApi 路由机制剖析:你准备好了吗? ................................................................................................... 3 一、MVC和WebApi路由机制比较 .......................

    python项目深度学习的web端多格式纠错系统.zip

    深度学习的Web端多格式纠错系统是一个使用Python开发的项目,旨在通过深度学习算法提供Web端的...此外,系统还可能通过增加更多的用户互动元素,如社区论坛或用户反馈机制,来进一步提高系统的智能化水平和用户体验。

    learn-notes:学习笔记

    learn notes 移动端汇总 前端性能 前端安全 css vue-style BFC ...移动端浏览器前端优化策略 浏览器渲染 网站字优化阅读体验,网站预设字体CSS最佳写法 调取后台接口,如果有中文,utf-8,要转码 微前

    百度编辑器UEditor JSP版 v1.3.5.rar

    Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和...

Global site tag (gtag.js) - Google Analytics