前端性能优化浅析

标签: 前端性能优化
6人阅读 评论(0) 收藏 举报

1. 主要可以从如下几方面考虑

    1). 减少请求次数:

        a). 打包脚本和样式表(webpack的应用)

        b). 用css样式实现图标,或css sprites来合并小图标

        c). 拆分初始化负载。

            将页面加载时执行的函数单独拆分出来,其余放到window.onload函数中加载(与$(function() {}))区分开来。onload是

            同时加载完脚本与样式表执行。$(funciton() {})在DOM渲染完成即执行。这样可以极大的缩减初始化时的下载量。

            注意:有时代码中可能引用了低优先级的函数,这时候可以通过设置桩函数(空函数,当真函数加载完成后覆盖)或者

            延迟监听相关事件并赋予友好提示的方式解决。

    2). 减少体积:

        a). 压缩脚本,样式表

        b). 服务器开启gzip

    3). 利用缓存

        a). 使用CDN,添加Expires头(HTTP1.1改为添加max-age属性),减少DNS查找(一个网站建议两个域,不大于4个域提供资源)

    4). 页面结构

        a). 将样式表放在顶部,脚本放在底部。

    5). 其它

        a). 避免css表达式,避免重定向。

至此。

查看评论

前端性能优化方法总结

前端性能优化(一) 前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,...
  • w2326ice
  • w2326ice
  • 2017-03-20 10:25:37
  • 5167

移动h5前端性能优化指南

  • 2017年01月09日 08:27
  • 73KB
  • 下载

前端性能优化-雅虎军规35条

1、尽量减少HTTP请求个数——须权衡 合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。 2、使用CDN(内容分发网络)...
  • shjavadown
  • shjavadown
  • 2016-04-14 22:44:08
  • 1549

Web 前端性能优化思路与学习方法

  • 2017年11月06日 16:30
  • 7.9MB
  • 下载

移动H5前端性能优化指南(网上整理)

PC优化手段在手机端同样适用,在手机端提出3秒钟渲染完成首屏指标,首屏加载3秒完成或使用Loading,基于联通3G网络平均338KB(2.71Mb/s),所以首屏资源不应该超过1014KB;手机端因...
  • css_styles
  • css_styles
  • 2016-05-24 10:46:12
  • 505

前端常见的性能优化手段

在前端,HTML创造结构,CSS表现样式,JS控制行为,三者一起形成了用户可见可操作的web页面。但是不同网站页面的加载速度、用户请求的执行速度却大相径庭。页面初始加载的HTML资源、CSS资源、JS...
  • aa3214567
  • aa3214567
  • 2017-09-01 12:13:42
  • 383

web前端性能优化经验

web前端性能优化经验 一,从浏览器加载速度和顺序来看CSS和JavaScript的布局 1,浏览器一般是在加载完所有的CSS样式以后,对整个页面进行渲染,所以把引入的外部CSS样式文件放在页面...
  • reggergdsg
  • reggergdsg
  • 2016-06-18 13:18:31
  • 1188

进行前端性能优化几种常用的方法。

代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。 缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等...
  • hyMiss
  • hyMiss
  • 2017-09-22 17:06:47
  • 247

前端性能优化归纳总结篇!!!

周五,一周最后一天,应该是归纳总结、冥想思考、节奏放缓的一天。程序员的每个工作日都仿佛是在进行着战斗,看不见的硝烟弥漫在键盘和显示器之间,也有可能弥漫在手机和手指之间。作为一个前端开发工程师,性能优化...
  • grandPang
  • grandPang
  • 2016-05-11 17:56:31
  • 11279

Web应用前端性能优化浅析

  • 2012年03月12日 13:00
  • 36KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 668
    积分: 200
    排名: 35万+
    文章分类
    文章存档