性能优化

内容优化

(1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页面嵌入图像数据 ),合理设置HTTP缓存等。
(2)减少DNS查找
(3)避免重定向
(4)使用Ajax缓存
(5)延迟加载组件,预加载组件
(6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。
(7)最小化iframe的数量:iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
(8)避免404:HTTP请求时间消耗是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验而不会有一点好处。

服务器优化

(1)使用内容分发网络(CDN):把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
(2)GZIP压缩
(3)设置ETag:ETags(Entity tags,实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
(4)提前刷新缓冲区
(5)对Ajax请求使用GET方法
(6)避免空的图像src

Cookie优化

(1)减小Cookie大小
(2)针对Web组件使用域名无关的Cookie

CSS优化

(1)将CSS代码放在HTML页面的顶部
(2)避免使用CSS表达式
(3)使用<link>来代替@import
(4)避免使用Filters

javascript优化

(1)将JavaScript脚本放在页面的底部。
(2)将JavaScript和CSS作为外部文件来引用:在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)缩小JavaScript和CSS
(4)删除重复的脚本
(5)最小化DOM的访问:使用JavaScript访问DOM元素比较慢。
(6)开发智能的事件处理程序
(7)javascript代码注意:谨慎使用with,避免使用eval Function函数,减少作用域链查找。

图像优化

(1)优化图片大小
(2)通过CSS Sprites优化图片
(3)不要在HTML中使用缩放图片
(4)favicon.ico要小而且可缓存

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css3文本、盒模型阴影、倒影、自由缩放

    css3新增盒模型阴影 box-shadow:[inset] x y blur [spread] color 参数 inset:投影方式 inset:内...

    河湾欢儿
  • 移动端常用的meta总结

    声明viewport视口 viewport对于移动端设备来说非常的重要,用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=devi...

    河湾欢儿
  • 2.布局解决方案- 垂直居中<2>

    垂直布局 写出两个盒子并满足以下条件条件: 1.里面的高度盒子不固定 2.外面盒子的高度不固定

    河湾欢儿
  • 网站搭建-django-学习成绩管理-03-网页测试

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • 回归制造本质——边缘计算使能全局效率提升

    边缘计算越来越受到了来自IT和OT领域的企业的关注,本文旨在从制造本质—从源头分析如何去推进其实现。

    CloudBest
  • 大数据那些事(16):一只特立独行的伪Hadoop批发商

    谢谢大家的反馈,很多意见和建议非常的有见地,很有帮助。我想写好文章,写大家爱读的文章是最重要的。鉴于工作日渐繁忙,更新频率做不到非常的高,但是我会尽量写好每篇更...

    用户1564362
  • Callback ——从同步思维切换到异步思维

    这是一种非常常见的直线性思维,我先请求网站拿到 html,然后我再把 html 传给负责处理的函数。在整个过程中,“我“担任着调度的角色。

    青南
  • 技术阅读-《MySQL 必知必会》

    第一章 了解SQL第二章 MySQL 介绍第三章 使用 MySQL第四章 检索数据第五章 排序检索数据第六章 过滤数据第七章 数据过滤第八章 通配符过滤第九章 ...

    闻人的技术博客
  • Chrome开发者工具还有这些功能,你知道吗?

    用户1687375
  • Python基础学习_10_网页爬虫实战爬取百度百科词条(源码下载)

    下面使用Python开发一个网页爬虫,爬取百度百科词条信息,整个程序涉及到url管理器,html下载器,html解析器,html显示以及调度程序:

    码农帮派

扫码关注云+社区

领取腾讯云代金券