关于web前端性能优化总结

1、从DOM结构和标签上来优化

·使用语义化的标签，代码清晰简洁；

·减少Dom节点，增加渲染速度；

·使用W3C标准书写闭合小写的标签；

·给图片和table指定宽高，避免缩放；

·防止src和href值为空，当为空时，浏览器会把当前页面当做属性值重新加载；

·css在头部位置，js在body底部位置；

2、从CSS样式上来优化

·使用link加载样式而不是@import（是css2提供的一种方式，不兼容，只能加载css，而且页面所有组件被加载完后才会被加载，完成前会导致‘闪烁’，link属于XHTML标签，没有兼容问题）；

·避免使用css表达式；

·避免使用css filter滤镜；

·使用css 缩写如#fff，减少代码量；

·删除重复的css，css简化；

·使用CSS Sprite把同类图片合成一张，减少图片http请求；

·减少css查询层级，如.header .log 要好于.header .top .log；

·减少css查询范围，如header>div获取直系子元素要好于heade div；

·避免TAG标签与CLASS或ID并存：如a.top、button#submit；

3、从js上来优化

·js尽量少用全局变量；

·多个js变量声明合并；

·不使用eval函数，不安全，性能消耗严重

·使用事件代理绑定事件，如将事件绑定到body上进行代理（利用冒泡原理将事件加到父级上，能够给动态增加的元素进行数据绑定）；

·避免频繁的操作DOM节点，使用innerHTML代替

·减少对象查找，如a.data.box1.name的查找方式非常耗性能，尽可能的将它定义在变量里；

·类型转换，把数字转字符串使用var str=‘’+1；浮点数转成整形使用Math.floor()或者Math.round();

·js对字符串进行循环操作，譬如替换、查找应该使用正则表达式；

·删除重复的js

·使用setTimeout来避免页面失去响应

·使用hash-table来优化查找

4、其他方面进行优化

·尽量合并js和css，对js和css进行压缩，可以缩短文件传输时间；

·使用CDN加速

· 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

·为文件头指定Expirs,使内容具有缓存性；

·减少DNS查询，权衡；

·避免在html标签中写style属性

关于web前端性能优化总结相关推荐

大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
WEB前端性能优化小结
1. 请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
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代码优化数据访问字符 ...
【JavaWeb】Web前端性能优化
本文目录一. 浏览器访问优化 1.1 减少http请求 1.2 使用浏览器缓存 1.3 启用压缩 1.4 CSS放在页面最上面. JavaScript 放在页面最下面 1.5 减少Cookie传输 ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...

关于web前端性能优化总结

关于web前端性能优化总结相关推荐

最新文章

热门文章