浅谈web前端性能优化
前端性能优化:
一、尽可能减少前端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前端性能优化的更多相关文章
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
- [原创]浅谈H5页面性能优化方法
[原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程08:配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- Web前端性能优化教程03:添加Expires头
本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...
- Web前端性能优化教程04:压缩组件
本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...
随机推荐
- DRP——Dom4j使用
dom4j是一个Java的XMLAPI,类似于jdom.用来读写XML文件的.dom4j是一个很很优秀的JavaXMLAPI.具有性能优异.功能强大和极端易用使用的特点.Dom4j是一个易用的.开源的 ...
- Design Pattern 设计模式1 - Strategy 1
实现 : Defferent Heros attack Defferently. - 不同的英雄使用不用的招数 Strategy设计的思路: 基类A.更加小的基类B,新的继承类C: 1 从基类A中抽出 ...
- Codeforces 8VC Venture Cup 2016 - Elimination Round F. Group Projects 差分DP*****
F. Group Projects There are n students in a class working on group projects. The students will div ...
- 初学unity 3D 遇到的一个问题--预制体选项没有找到。
没有找到预制体这个选项. 我的工程如下:
- java随记2
1.Arrays java8里新添加了parallelSort等parallel开头的方法,表示利用cpu并行的能力 2.面向对象 如果继承树里的某个类要被初始化时,系统将会同时初始化该类的所有父类 ...
- HDU1241 Oil Deposits —— DFS求连通块
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1241 Oil Deposits Time Limit: 2000/1000 MS (Java/Othe ...
- Redis实现中间件(订阅)
什么是消息中间件 发布订阅 点对点 消息中间件本身是异步的通讯 案例:使用redis实现发布订阅功能 Redis发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub) ...
- 【Selenium】显示、隐式等待
显示等待 WebDriverWait 超时抛出TimeOutException,默认500毫秒 public class WaitToReturnElement { /* * 设置超时时间为5秒,返回 ...
- ios 图片拉伸方法
前提:要注意图片的size和展示的图片view的size的大小. 假如图片高度50,展示图片view的高度30,拉伸会变成剪切. 如果图片尺寸不对,可以用mac自带的图片编辑器修改大小: 双击打开图 ...
- Power Crisis
传送门 这道题被严重恶意评分了,实际应该是绿题. 因为其实我们只需要模拟即可.这里我们引入一种新的东西:约瑟夫环. 它能直接告诉你约瑟夫问题中最后一个存活下来的人是谁.(不过下标是从0开始的,实际使用 ...