• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 前端性能优化的方法?

前端性能优化的方法?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含优化,性能,前端等相关知识,匿名希望在学习及工作中可以帮助到您
前端性能优化的方法?

content方面

1,减少HTTP请求:合并文件、CSS精灵、inline Image

2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询

3,避免重定向:多余的中间访问

4,使Ajax可缓存

5,非必须组件延迟加载

6,未来所需组件预加载

7,减少DOM元素数量

8,将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量

9,减少iframe数量

10,不要404

Server方面

1,使用CDN

2,添加Expires或者Cache-Control响应头

3,对组件使用Gzip压缩

4,配置ETag

5,Flush Buffer Early

6,Ajax使用GET进行请求

7,避免空src的img标签

Cookie方面

1,减小cookie大小

2,引入资源的域名不要包含cookie

css方面

1,将样式表放到页面顶部

2,不使用CSS表达式

3,使用不使用@import

4,不使用IE的Filter

Javascript方面

1,将脚本放到页面底部

2,将javascript和css从外部引入

3,压缩javascript和css

4,删除不需要的脚本

5,减少DOM访问

6,合理设计事件监听器

图片方面

1,优化图片:根据实际颜色需要选择色深、压缩

2,优化css精灵

3,不要在HTML中拉伸图片

4,保证favicon.ico小并且可缓存

移动方面

1,保证组件小于25k

2,Pack Components into a Multipart Document

以上就是我总结的前端性能优化方案,有其他好的方案可以留言哦!

以上就是前端性能优化的方法?的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 移动端网站设计优化要点
  • 页面重绘及回流的优化方法
  • 前端性能优化的方法?
  • HTML5网络拓扑图性能优化的图文详解
  • 移动端HTML5性能优化
  • 利用分层优化 HTML5 画布渲染
  • html标签的语义化之搜索引擎优化

相关文章

  • 2018-12-03HTML5拖拽文件到浏览器并实现文件上传下载功能代码_html5教程技巧
  • 2018-12-03HTML5 区域(Sectioning)的重要性
  • 2017-08-06详解HTML5中ol标签的用法
  • 2018-12-03Tomcat的卸载及其过程中出现的问题汇总
  • 2018-12-03H5的LocalStorage本地存储使用详解
  • 2018-12-03前缀data-属性和dataset的使用方法
  • 2018-12-03html5弹跳球示例代码_html5教程技巧
  • 2018-12-03关于HTML5 history API 的介绍
  • 2018-12-03仿新浪部分静态页面展示
  • 2017-08-06基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何才能做出传播量10万+的HTML5传播页面?大量转发的HTML5都有哪些共同特点?
    • HTML5 Google电吉他 可用键盘弹奏的图文代码介绍
    • 移动web模拟客户端实现多方框输入密码效果【附代码】_html5教程技巧
    • HTML5中drawImage用法分析_html5教程技巧
    • html5记忆翻牌游戏实现思路及代码
    • 整理HTML5中表单的常用属性及新属性_html5教程技巧
    • 原生js 有没有 手机移动端 滑动 的事件?
    • html5使用canvas画一条线_html5教程技巧
    • SVG进阶|SVG渐变(SVG GRADIENTS)
    • canvas文字怎么换行?canvas文字换行的方法介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有