• Web平台开发流程以及规范


    1.js和css的放的位置顺序与加载速度分析

    为了让客户先看到效果,必须要先加CSS
    如果在先head加载CSS,如果CSS大,会先下载CSS,再渲染HTML标签
    如果CSS放在head中,当显示出HTML时,会正常的显示出前台效果
    CSS不要放在body中,这样会显示效果是,会有问题,一显示页面是乱码,这样会让客户误以为当前网页有问题
     
    JS存放问题
    如果在head中放入js,会先加载JS,再渲染HTML,这样在速度上会大大降底,
    必须要在第一时间向客户展现前台效果,再加载其它特效
     
    所以最好JS是放在</body>之前,不在放在head中,
     
    外部JS与内部JS,内部JS一定要放在外部JS前面。
    -------------------------------------------------------

    CSS文件后面的会覆盖前面的:如global.css会覆盖之前的样式表

    JS文件后面的会引用前面的,如将global.js放在最开始,则会报一个找不到jQuery的错误,因此jQuery这种类库级的文件应该放到最开头。

    -------------------------------------------------------

    顺序一般是:

    1. 个别特殊JS,比如用于调试的基础脚本(部署时未必有)、性能日志之类,必须放在尽量最前的位置。

    2. 外部样式表(link[rel=stylesheet])

    3. 本页样式(style)

    4. 基础库,比如loader,各种shim/polyfill,jQuery之类的

    注意,有些网站制作开发者从性能优化的角度倾向于加defer或者放到页面的最底部。不过不是所有的脚本都能这样做。比如html5-shim脚本必须在body之前加载。再如history api的兼容实现等都不应defer,因为你不能确保用户在页面ready之前没有back/forward动作。再如jQuery,defer是可以,但也意味着你所有依赖jQuery的功能都需要defer,考虑到这些静态文件通常都是有缓存的,所以不defer也未必不是一个可以接受的折衷。

    5. 少量本页script

    --------------------------------------------------------

    可以看出嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。

    --------------------------------------------------------

    高性能web开发 - 如何加载JS,JS应该放在什么位置?

  • 相关阅读:
    HTML浏览器标题栏如何设置
    阿里团队常用的布局——双飞翼布局
    浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
    css选择器:基本选择器
    编程十年
    解决WX-IOS打开公众号网页出现的底部导航条
    Angular6路由复用与延迟加载的冲突解决——看看有备无患
    Ionic2 + Angular4 + JSSDK开发中的若干问题汇总
    [Linq Expression]练习自己写绑定
    [Linq To Sql]解决join时的Collation冲突
  • 原文地址:https://www.cnblogs.com/sunrunzhi/p/5089168.html
Copyright © 2020-2023  润新知