`
OrangeHolic
  • 浏览: 260744 次
  • 来自: 北京
社区版块
存档分类
最新评论

前端优化的一些地方(JS/CSS/图片)

 
阅读更多
最近翻了翻,总结一下

一.督促你的客户选用更快的浏览器,这样才能体验到更快的加载速度!
具体什么的就不说了,上一张图,下图为Gomez收集了200个网站的18.6亿个别值,时间范围为1个月,得出的真实上网环境中的数据。图中蓝色代表网页加载速度,绿色代表渲染时间。




二.Javascript的优化
1.用Firebug查找执行消耗时间最长的Javascript函数。
可通过Firebug控制台中的概括叶卡,查看函数的调用时间及花费的时间。如果某个函数花费异常高的时间,你就应该和JS开发人员好好谈谈了。





2.将JavaScript做成外部文件并进行精简。
这样不仅利于代码的维护,将其做成外部文件则浏览器未对其进行缓存,避免代码的多次请求。JavaScript的精简就不用说了,jquery精简以后从252KB到32KB极大减少了数据请求量。精简主要包括移除文件中的空白空间和注释、缩写变量及删除无用代码等。在此推荐两个JS精简的工具,一个是yahoo的YUI Compressor ,另一个是Google的Closure Compiler,两者皆需Java环境执行。

3.如果可以,将JavaScript放置于HTML文件底部。
第一个原因是浏览器遇到<script>标签时,会中断当前页面的进一步显示而进行JavaScript的解释,第二个原因JavaScript的下载是独占,堵塞浏览器的并行下载。

4.Ajax用GET方式而不用POST方式。
因为POST请求分两个步骤请求数据,第一发送头,第二发送数据,而GET则只用一次进行。

三.CSS的优化
1.将CSS样式放在HTML文档头部。
因为CSS样式后面的会覆盖前面的,有些浏览器在css完全输出之前不会去渲染任何东西.........

2.精简CSS文件
这个和JS的精简一样,在此举个例子
#header { 
   margin-top:10px; 
   margin-right:15px; 
   margin-bottom:10px; 
   margin-left:15px; 
   backgroung-color:#333333; 
   background-images:url(Images/header.jpg); 
 } 

可以精简成下面的形式:
#header{margin:10px 15px;background:#333 url(Images/header.jpg);} 


四.图像的优化
1.使用所要求的图像大小,而不是在HTML中使用宽度和高度属性重新调整图像尺寸.

2.正确使用图像格式
一般使用GIF做页面的徽标、小图标,用JPEG呈现照片和高品质的图像,其他的一切图像均使用PNG格式

3.图像压缩
在此介绍一下yahoo的Smush.it,网址http://www.smushit.com/ysmush.it/,Smush.it可以大幅压缩(例子是减少了0.40%.............)图片,并且它还是一个无损的压缩工具,它通过移除图片中的无用信息来达到无损压缩图片的目的,既减少了图片的体积,又不会对图片质量造成影响。












  • 大小: 37.1 KB
  • 大小: 37 KB
  • 大小: 38 KB
分享到:
评论

相关推荐

    2024新年烟花特效纯前端文件 html/css/js原生

    这个名为“2024新年烟花特效纯前端文件 html/css/js原生”的资源,显然是一个用于庆祝新年的互动特效,完全基于前端技术实现。下面将详细探讨这个项目中涉及的HTML、CSS和JavaScript知识点。 首先,HTML(HyperText...

    Js/Css/Images 一键压缩功能 node.js

    总结来说,通过Node.js和其丰富的生态系统,我们可以方便地实现Js/Css/Images的批量压缩,这对于前端性能优化至关重要。在实际开发中,还可以结合构建工具如Gulp、Webpack等自动化处理这些任务,提高开发效率。

    Javascript/CSS 多文件代码合并、安全压缩、优化(PHP版)

    现在大量网站为了追求用户体验,使用了大量使用CSS和JS文件。...如果英文阅读不是很流畅,请查看翻译版本: 《Yahoo工程师的前端优化建议-- 中文翻译版》 《Yahoo工程师的前端优化建议-- 中文翻译版》

    前端面试题汇总(html/css/js/vue/ts/uniapp/git等)

    网页速度优化旨在通过压缩图片、合并和缩小CSS和JavaScript文件等技术手段提升网站加载速度,从而提供更好的用户体验。响应式设计的目的是让网站能够适应各种设备和屏幕尺寸,以提供更好的用户体验,并为移动设备的...

    Three.js前端3D开发:使用CSS3DRenderer渲染全景图

    在前端开发领域,Three.js 是一个非常流行的 JavaScript 库,用于创建和展示3D图形。在本主题中,我们将深入探讨如何使用 Three.js 的 CSS3DRenderer 来渲染全景图,这是一种将3D对象与CSS3变换相结合的技术,能够...

    javascript/css压缩工具

    【JavaScript/CSS压缩工具】是一种高效实用的软件,主要用于优化前端资源,特别是JavaScript和CSS文件。这款工具的主要目的是减小文件大小,提高网页加载速度,从而提升用户体验。它通过删除空格、换行符和不必要的...

    js/css/html进行格式化

    总的来说,“js/css/html进行格式化”这个话题涵盖了前端开发中的基础实践,强调了代码整洁的重要性。通过使用合适的工具和自动化流程,开发者可以提升工作效率,同时提高代码质量和团队协作的效率。

    web+笔试+面试汇总+前端优化总结+js+css

    "web+笔试+面试汇总+前端优化总结+js+css"的主题涵盖了前端开发中的关键领域,包括ECMAScript语法、HTML表格与表单处理、浏览器对象模型(BOM)、事件处理以及前端优化策略。 ECMAScript是JavaScript的标准化规范,...

    Nightingale-V6版本部署 前端: https://github.com/n9e/fe

    在Nightingale V6的前端部署过程中,可能会涉及到的主题包括React.js(用于构建用户界面)、Webpack(模块打包工具)、ES6+语法(现代JavaScript特性)、CSS预处理器(如Sass或Less)以及状态管理库(如Redux或MobX...

    js/css批量加解密/格式化工具

    在前端开发中,JavaScript(JS)和Cascading Style Sheets(CSS)是构建网页交互和视觉样式的重要语言。为了保护源代码的安全,防止他人轻易查看和复制,开发者有时会将JS和CSS文件进行加密。同时,为了提高代码的...

    JavaScript / html / CSS 在线:美化、优化、加密、解密、压缩、解压

    前端开发有时候复制别人的代码没有格式化,阅读起来很困难,自己格式化需要一点点的调,很浪费时间。本软件本地打开可以格式化、压缩、解压JavaScript/html/CSS代码,很方便,大大提高了开发效率。

    bootstream配置(包含js/css/images)

    Bootstream是一款快速构建响应式网页的工具,它整合了Bootstrap框架和前端开发的常用资源,如CSS样式、JavaScript脚本以及图片等元素。通过Bootstream,开发者可以更高效地搭建符合现代网页设计标准的页面,减少了...

    bootstrap-table 表内行拖放所需js/css及实例

    2. Bootstrap JS:包含了Bootstrap的一些交互组件,如模态框、下拉菜单等。 3. Bootstrap Table CSS和JS:这是Bootstrap Table的核心,提供了表格的各种功能。 4. jQuery:Bootstrap Table依赖jQuery来处理DOM操作和...

    前端常用文档资源(css/js/html)

    在前端开发领域,CSS、JavaScript和HTML是构建网页和交互式用户体验的基础。这些技术相互协作,为用户提供美观且功能丰富的网站。以下是对这些关键知识点的详细介绍: **HTML(HyperText Markup Language)** HTML...

    bootstrap.min.css.map

    在前端开发中,Bootstrap是一个非常流行的开源框架,它提供了丰富的CSS样式、JavaScript组件以及字体图标,使得网页设计和开发变得更加高效。"bootstrap.min.css.map"是与Bootstrap相关的文件,尤其在错误排查和调试...

    JS、CSS合并压缩工具说明

    JS、CSS 合并压缩工具是用于优化前端资源加载效率的重要工具,它们能够将多个 JavaScript 和 CSS 文件合并为一个文件,并进行压缩,减少网络请求次数,从而提高网页加载速度。本篇将详细介绍名为 TomsTools 的一套 ...

    写个一个简单的web项目,把前端技术:html、css、JavaScript、jQuery,ajax,bootstrop等都放在这个web项目上了。

    在本项目中,我们主要关注的是前端技术的运用,涵盖了HTML、CSS、JavaScript、jQuery、Ajax以及Bootstrap等关键组件。这些技术是构建现代Web应用程序的基础,让我们逐一详细探讨。 首先,HTML(HyperText Markup ...

    前端项目-flag-icon-css.zip

    【前端项目-flag-icon-css.zip】是一个专为前端开发者设计的资源包,主要包含了一套用于显示世界各国国旗的SVG图标,并提供了CSS样式以便于在Web项目中轻松集成和使用。这个项目对于那些需要在网站上展示多国信息...

    前端 web素材 中级进阶 JavaScript 优化 css优化

    在前端开发领域,JavaScript 和 CSS 优化是提升网站性能、用户体验和搜索引擎排名的关键技术。中级进阶阶段,开发者需要深入理解这些技术的优化策略,以实现更高效、更流畅的网页应用。 首先,我们来探讨JavaScript...

    前端学习笔记整理:HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源.zip

    前端学习笔记整理:HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源 前端学习笔记整理:HTML, CSS, JavaScript, Web 性能优化, 工具, 框架, 资源 前端学习笔记整理:HTML, CSS, JavaScript, Web 性能优化, ...

Global site tag (gtag.js) - Google Analytics