前端性能优化浅析

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表达式,避免重定向。

至此。

阅读更多
文章标签: 前端性能优化
上一篇CSS3过渡属性的使用
下一篇CSS3实现文字凹凸效果体验
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭