专栏首页front-end technology前端如何更好的进行网站性能优化

前端如何更好的进行网站性能优化

前端方面:

  • 减少HTTP请求:合并文件、CSS精灵、inline Image
  • 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询
  • 避免重定向:多余的中间访问
  • 使Ajax可缓存
  • 非必须组件延迟加载
  • 未来所需组件预加载
  • 减少DOM元素数量
  • 将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量
  • 减少iframe数量
  • 不要404

Server方面

  • 使用CDN
  • 添加Expires或者Cache-Control响应头
  • 对组件使用Gzip压缩
  • 配置ETag
  • Flush Buffer Early
  • Ajax使用GET进行请求
  • 避免空src的img标签

Cookie方面

  • 减小cookie大小
  • 引入资源的域名不要包含cookie
  • css方面
  • 将样式表放到页面顶部
  • 不使用CSS表达式
  • 使用不使用@import
  • 不使用IE的Filter

Javascript方面

  • 将脚本放到页面底部
  • 将javascript和css从外部引入
  • 压缩javascript和css
  • 删除不需要的脚本
  • 减少DOM访问
  • 合理设计事件监听器

图片方面

  • 优化图片:根据实际颜色需要选择色深、压缩
  • 优化css精灵
  • 不要在HTML中拉伸图片
  • 保证favicon.ico小并且可缓存

移动方面

  • 保证组件小于25k
  • Pack Components into a Multipart Document

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ​轻松掌握vuex,让你对状态管理有一个更深的理解

    Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

    前端老鸟
  • ES6中也要使用好严格的代码规范,助力你写出优雅的代码

    必需开启eslint检测, 且使用 standard规范检测,这样大家写出来的代码风格就可以保持一致

    前端老鸟
  • 每个阶段的程序员都是需要提高自己的技能

    仅能完成简单模块和项目的开发工作难以胜任复杂模块的开发。通常是入行不久 1 年及以下工作经验的同学。

    前端老鸟
  • 快速学习-Spring(通过注解配置bean)

    相对于XML方式而言,通过注解的方式配置bean更加简洁和优雅,而且和MVC组件化开发的理念十分契合,是开发中常用的使用方式。

    cwl_java
  • 包学会之浅入浅出Vue.js:结业篇

    本篇我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。

    蔡述雄
  • 腾讯企鹅辅导线下体验中心陆续落地多城,打造用户零距离产品体验

    9月12日,腾讯企鹅辅导线下体验中心在佛山首次揭幕,其后26日,河南洛阳、重庆永川店也相继开业,截至目前,腾讯企鹅辅导已在粤、豫、渝三个区域不同城市展开多节点...

    鹅老师
  • scrapy执行流程

    人生不如戏
  • Python面向对象总结及类与正则表达式

    和其它编程语言相比,Python 在尽可能不增加新的语法和语义的情况下加入了类机制。

    py3study
  • 视频直播与虚拟现实的渲染 - OpenGL ES

    这是一篇OpenGL ES的学习笔记,介绍图像绘制里面用到的概念,学习OpenGL ES的基础知识备忘录。 教程 OpenGLES入门教程1-Tutorial0...

    落影
  • 当影响范围内Nginx默认配置文件中开启缓存

    当影响范围内Nginx默认配置文件中开启缓存功能时,攻击者可以通过发送包含恶意构造 range 域的 header 请求,来获取响应中的缓存文件头部信息。在某些...

    用户1130695

扫码关注云+社区

领取腾讯云代金券