前端性能优化:

一、尽可能减少前端http请求。

  1、合并优化脚本文件和css文件。

  2、同种类型的背景图片尽量放在一起,用css控制显示。

二、使用浏览器缓存。

  如果能强制浏览器缓存在本地,将会降低页面产生的流量。

三、页面压缩。

  压缩gzip,html,js,css,图片等。

四、html代码结构优化*

  1、正确布置页面脚本。

    1>、尽可能使用外部脚本和配置文件。

    2>、js文件放到文档末尾。

    3>、脚本放在文档前面,文档内容可能会被阻塞。放在末尾会出现就是未加载完用户就会触发行为。

  2、减少dom结构的层级。

  3、减少cookie的大小。

  4、尽量用div取代table。

    table会影响页面展示速度,应为只有table完全加载才会展示在页面上。

五、组件分为多个域,提高页面组件并行下载能力。

六、图片,脚本,数据预加载。

移动端的性能优化:

属于前端性能优化范畴,但移动性能优化在PC端同样适用。

  1、使用css动画。应为css加载速度优于js。

  2、适当使用touch事件代替click事件。

  3、合理使用css3样式,减少使用css3渐变阴影等效果。

  4、用transform开启硬件加速。

  5、不滥用float,web字体。

------------------华丽的分割线------------------------------

最近看了些性能优化的知识,补充在上面

前端性能测试里的二八原则,即前端优化占八成,后端优化占两成。

客户端响应时间:

10%-20%:发送http请求,从服务端获取html文档。

90%-80%:下载页面相关文件。

    

浅谈web前端性能优化的更多相关文章

  1. Web前端性能优化进阶——完结篇

    前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...

  2. [原创]浅谈H5页面性能优化方法

    [原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...

  3. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  4. Web前端性能优化教程09:图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

  5. Web前端性能优化教程06:减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  6. Web前端性能优化教程08:配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  7. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  8. Web前端性能优化教程03:添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  9. Web前端性能优化教程04:压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

随机推荐

  1. IE浏览器部分版本不支持background-size属性问题

    background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像 ...

  2. Yarn调度器负载模拟器——Yarn Scheduler Load Simulator (SLS)

    一.概述: Yarn调度器有很多实现,如Fifo, Capacity和Fair schedulers等.与其同一时候,正在进行一些优化措施来提高调度器在不同负载和工作场景下的性能.每一个调度器都有自己 ...

  3. Django 之ORM操作

    1.什么是ORM? 全称关系对象映射Object Relational Mapping(简称ORM),是通过描述面向对象与数据库之间的对应的元数据,将对象持久化的更新到数据库中. 有了ORM,就不需要 ...

  4. poj 2228 Naptime(DP的后效性处理)

    \(Naptime\) \(solution:\) 这道题不做多讲,它和很多区间DP的套路一致,但是这一道题它不允许断环成链,会超时.但是我们发现如果这只奶牛跨夜休息那么它在不跨夜的二十四个小时里一定 ...

  5. 新产品为了效果,做的比較炫,用了非常多的图片和JS,所曾经端的性能是非常大的问题,分篇记录前端性能优化的一些小经验。

    第一篇:HTTPserver 因tomcat处理静态资源的速度比較慢,所以首先想到的就是把全部静态资源(JS,CSS,image,swf) 提到单独的server,用更加高速的HTTPserver,这 ...

  6. 图解 servlet 与jsp的关系

    Servlet是Java提供的用于开发Web服务器应用程序的一个组件,运行在服务器端,由Servlet容器所管理,用于生成动态的内容.Servlet是平台独立的Java类,编写一个Servlet,实际 ...

  7. setTimeout 传递的方法

    function waitExe(param){ if(time < 20){ time ++; $("#content").html(time); var self=thi ...

  8. 更改scroll样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 2px; height: 80%; background: #fff; } /*定 ...

  9. linunx 下载文件到本地

    1.检查并安装相应的包:yum install lrzsz 2.使用 sz 文件名 现在相应的文件到本地磁盘. 3.上传使用rz 选择相应文件即可.

  10. MYSQL初级学习笔记四:查询数据的操作DQL(SELECT基本形式)(26-35)

    知识点六:查询数据的操作DQL(SELECT基本形式)(26-35) CREATE DATABASE IF NOT EXISTS cms DEFAULT CHARACTER SET utf8; USE ...