全方位分析web前端如何进行性能优化
2018-06-24 02:24:59来源:未知 阅读 ()
前言:
最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教。
1、整体资源
(1)js、css源码压缩
(2)css文件放到文档顶部,js 文件放到文档底部
因为浏览器渲染网页是自上而下的,用户第一眼见到的是页面,先加载页面相关的提高页面加载速度,另外避免js在页面没有完全加载完成操作DOM带来错误
(3)进行CDN托管(具体可参看https://div.io/topic/930)
(4)data缓存
2、css
(1)避免使用css expression (css 表达式)
微软在IE5时支持,IE8就不支持了,过老的内核,这个基本没有人会使用
(2)使用CSS Sprites(图片精灵)
将图片合到一张大图,并且控制图片大小(在满足显示的情况下,过大图片可以进行质量压缩),目的减小体积,减小http访问次数
(3)js中动态改变元素样式时,使用类名修改,而不是直接在DOM中更改css 属性,避免页面进行重构
3、image
(1)大型web应用中,可以搭建图片服务器,存放图片以及视频资源(具体实施请自行百度)
(2)在 对于有图片画廊及图片占大比重的网站中,采取图片预加载的方式,提升用户体验
(可参考https://blog.csdn.net/sunshine940326/article/details/53536535?locationNum=3&fps=1)
4、js
(1)模块化编程,养成封装方法的习惯,提高代码的重复利用率
(2)减少闭包的使用频率,减少内存占用
目前想到的是以上,欢迎补充和指教!
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:移动优先的响应式布局
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- HTML基础教程_1 2020-06-09
- 转行WEB前端 感觉很迷茫 该怎么做? 2020-06-09
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 2020年Web前端开发工程师市场怎么样?学会什么技术才能拿到 2020-06-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash