合理提升WEB前端性能
前端的优化包括四个部分:HTML结构优化、CSS样式优化、JS行为优化、服务器的优化。合理的前端优化不仅能够提升网站加载速度,而且能够更好的提升用户体验和团队开发效率。所以前端性能优化的重要性是不言而喻的。
HTML部分
- 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发;
- 减少DOM节点:加速页面渲染;
- 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放;
- 防止src属性和link的href属性为空:当值为空时,浏览器很可能会把当前页面当成其属性值加载;
- 正确的闭合标签:如避免使用<div/>,浏览器会多一个将它解析成<div\></div\>的过程;
- 链接为目录或首页的地址后面加”/”,如http://www.asheep.cn/;
- 用LINK而不用@import方式导入样式;
- 样式放在页头,JS放在页尾;
- 缩小favicon.ico并缓存;
CSS部分
- 避免使用 CSS Expressions(CSS表达式):如
- 避免使用 CSS Filter(CSS滤镜);
- 使用CSS缩写,减少代码量;
- 通过CSSSprites把同类图片合成一张,减少图片请求;
- 减少查询层级:如.header .logo要好过.header .top .logo;
- 减少查询范围:如.header>li要好过.header li;
- 避免TAG标签与CLASS或ID并存:如a.top、button#submit;
- 删除重复的CSS;
Javscript部分
- 尽量少用全局变量;
- 使用事件代理绑定事件,如将事件绑定在body上进行代理;
- 避免频繁操作DOM节点;
- 不使用EVAL;
- 减少对象查找,如a.b.c.d这种查找方式非常耗性能,尽可能把它定义在变量里;
- 类型转换:把数字转换成字符串使用”” + 1,浮点数转换成整型使用Math.floor()或者Math.round();
- 对字符串进行循环操作,譬如替换、查找,应使用正则表达式;
- 删除重复的JS;
服务器部分
- 尽量合并CSS、JS文件,或将其直接写在页面上,减少HTTP请求;
- 压缩CSS、JS文件,缩短文件传输时间;
- 避免404错误:特别要避免给404指定一个停摆页面,否则所有404错误都将会加载一次页面;
- 一般要求减少DNS查询次数,如同一个页面的请求资源尽量少的使用不同的主机名,这可以减少网站并行下载的数量,但很多网站为了加速下载资源其实是特意用了多个主机名,这里要做一个权衡;
- 使用CDN加速,使用户从离自己最近的服务器下载文件;
- 减少Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少 Cookie 的反复传输对主域名的影响;
- 为文件头指定Expires,使内容具有缓存性;
- 使用gzip压缩内容;
这些看似基础的前端优化技巧,其实也是最重要的,在我们平时开发工作中,能够运用这些前端优化那么你的项目会有质的提升。
转载于:https://www.cnblogs.com/huangxiaowen/p/4316399.html
合理提升WEB前端性能相关推荐
- 列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
- Web前端性能优化思路
本文旨在整理常见Web前端性能优化的思路,可供前端开发参考.因为力求精简,限于篇幅,所以并未详述具体实施方案. 基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的inde ...
- Web 前端性能优化
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- (2020.12.7)初次web前端性能优化记录
(转载公司内部论坛本人文章2020.12.7) 导语: 作为客户端开发,由于项目的需要,最近一年陆续做了很多web前端的需求开发.但过去做的大部分都是单页面的运营H5,上线时间短,一般保证能稳定运行就 ...
- web前端性能优化与SEO
web前端性能优化与SEO 网站优化的必要性 浏览器的页面优化 使用浏览器缓存 css Sprites 压缩 css与js文件的位置 减少cookie运输 javascript代码优化 数据访问 字符 ...
- web前端性能(一)
浏览器的加载速度和性能 关于性能,我们要先理解整个页面从准备加载新页面,到load事件结束这个过程的细节是什么,怎么完成的,浏览器是怎么加载的,怎么解析的,以及相关的很多细节问题,这些将构成我们性能优 ...
- 大型网站技术架构(3):WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类 这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
- WEB前端性能优化小结
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- web前端性能分析--实践篇
当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff ...
最新文章
- 撸了今年阿里、网易和美团的面试,我有一个重要发现.......
- 小师妹学JavaIO之:NIO中那些奇怪的Buffer
- 【免费毕设】PHP教材管理系统(源代码+论文)
- 漫游飞行_除了防打扰,手机飞行模式还有这些作用
- 动画交互原型设计:Principle for Mac
- 其他进制转化为十进制 详解
- Linux之socket网络编程(全)
- iTerm2使用zmodem协议上传下载文件
- 2021年小目标检测最新研究综述
- bat批处理的注释语句
- 华为2019年8月校招秋招笔试机考题解答C++实现
- 【kafka思考】最小成本的扩缩容副本设计方案
- 从fastq生成vcf文件
- Python获取金山词霸每日一句
- 《python初级爬虫》(一)
- 福利,架构师之路定制T恤
- MT6261芯片处理器性能特点资料介绍
- 深度:阿里云分布式关系型数据库DRDS解析
- 内网工具viper的介绍与配置简介
- 一种在程序中将十六进制转换为十进制的简单方法
热门文章
- mongoose多个连接_连接(connections)
- 常用API-3(System类、Math类、Arrays类、正则表达式)
- android java和c混合编程_C/C++在Java、Android和Objective-C三大平台下实现混合编程
- 回溯法遵循深度优先吗_闲来刷下「回溯算法」
- win10任务管理器快捷键_你都知道吗?Win10任务管理器到底藏了多少秘密
- linux / pkg-config 原理及用法
- OS / Linux / 文件描述符以及 file 结构体
- C51 特殊功能寄存器
- 启明云端分享|SSD20X 如何使用SD卡根文件系统
- 九九乘法表c语言编程伪代码,py_11分支和循环