内容方面:

1.减少 HTTP 请求 (Make Fewer HTTP Requests)

2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS:

1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4.避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript :

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4. 移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image):

1.优化图片

2 不要在 HTML 中使用缩放图片

3 使用恰当的图片格式

4 使用 CSS Sprites 技巧对图片优化

web前端开发,如何提高页面性能优化?的更多相关文章

  1. Web前端开发JavaScript提高

    JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...

  2. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  3. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  4. web页面性能优化

    web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问 ...

  5. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  6. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  7. Web页面性能优化(YSlow)

    YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...

  8. 【转载】WEB前端开发规范文档

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

  9. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

随机推荐

  1. SharePoint Online 创建网站集

    前言 本文介绍如何在Office 365中创建SharePoint网站集. 正文 通过登录地址登录到Office 365环境中,我们可以在左上角的按钮中点开,进入管理员,也可以直接在页面中点击管理: ...

  2. 毒枭第一季/全集Narcos迅雷下载

    英文全名Narcos,第1季(2015)Netflix.本季看点:<缉毒特警>该剧再现了上世纪八十年代末期警方与臭名昭著的大毒枭激烈交战的真实故事.律师.法官.政客.警察.军队甚至平民全都 ...

  3. ExtJS 4.2 教程-07:Ext.Direct

    转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-7-Ext-Direct ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程 ...

  4. 让Java和JavaScript进行交互

    本篇博文参考自:http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/ 我们在使 ...

  5. Winform窗体传值

    1:委托: 父窗体; private void button1_Click(object sender, EventArgs e) { Form2 frm = new Form2(); //frm.f ...

  6. vue elementui switch开关控件的使用

    <el-switch @change="test" on-value="1" off-value="0" v-model=" ...

  7. C# ApartmentState 枚举,指定线程单元状态

    1.ApartmentState 指定的单元状态 Thread. 命名空间:   System.Threading程序集:  mscorlib(位于 mscorlib.dll) 成员       成员 ...

  8. 安装chrome

    安装chrome 在suse12中安装chrome时,提示 lsb >= 4.0 is needed by google-chrome-stable 到http://rpm.pbone.net当 ...

  9. iOS:UICollectionView的扩展应用

    一.介绍 CollectionView是iOS中一个非常重要的控件,它可以实现很多的炫酷的效果,例如轮播图.瀑布流.相册浏览等.其实它和TableView很相似,都是对cell进行复用,提高系统性能. ...

  10. impala 导出CSV 或excel

    1.介绍 impala-shell导入导出 参数说明: • -q query (--query=query) 从命令行执行查询,不进入impala-shell • -d default_db (--d ...