扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
作为一个前端工作人员,我们不可避免要进行web的性能优化。那么有哪些优化的方法呢?
创新互联服务项目包括新邱网站建设、新邱网站制作、新邱网页制作以及新邱网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,新邱网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到新邱省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!A、常规项
1 、减少HTTP请求,在网页中图片、css、javascript、flash等等,都会增加我们的HTTP请求,减少请求数能提高WEB的页面响应时间;
2、导入的css和js文件的位置,css放在head部分,js放在body的尾部;
3、js/css/html代码的压缩;
4、使用外部的 js/css,内联的css和js其实比外部文件反应更快,那为什么要用外部呢?因为使用外部的css和技术可以让浏览器缓存它,这样不仅HTML文档大小减少,而且不会增加HTTP请求数量。另外,外部的 js/css可以提高代码的重用性;
5、资源的延迟加载(懒加载);
$("img").lazyload
6、预加载;
7、缓存处理,使用localStorage。
B、CSS项
1、避免使用css表达式,因为它被重新极端的次数相当多;
2、避免使用@import ;
3、避免使用IE Filter;
4、避免使用后代选择器 ul>li ;
5、利用css继承机制;
6、避免使用通配符选择器;
7、使用多重选择器;
8、CSS Sprites技术
C、JavaScript项
1、使用临时变量(或数组)存放dom节点;
2、批量操作时,使用字符串拼接,用innerHTML开销更小,速度更快,同时内存也更安全;
3、减少dom访问,可以缓存已经访问过的元素,删除dom节点中不必要的节点(remove炽热的())和对象;
4、创建dom节点,在执行完 createElement 代码后,应该马上添加(append)到dom树中;
5、监听dom事件,监听父节点(事件冒泡)。
D、HTML项
1、避免使用iframe,因为它会导致页面的重绘;
2、减少节点数量;
3、避免重绘和回流,布局变化引起重绘,元素变化(内容、样式)导致回流;
E、资源项
1、图片
1-1、减少图片数量(CSS Sprites);
1-2、降低图片质量(减小图片大小);
1-3、选择适当的图片样式(jpg主要是摄影级照相类图像,gif主要是动画图片,png杜宇透明无损耗的小文件是不错的选择);
1-4、图片的转码Base64(src="data:image/jpg;base64,...");
2、避免使用flash,尽量用css3代替。
F、压缩工具
1、jsmin压缩代码,不会验证代码语法;
2、YUIcompressor 压缩时会验证语法,代码优化。
G、CDN(内容分发网络)
CDN的好处在于
1、不用担心自己网站访客,在任何时间、任何地点、任何网络运营商,都能快速打开网站;
2、各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少;
3、给网站直接带来的好处:流量、咨询量、客户量、成单量。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流