爱酷,忆笙,忆笙资源网,爱酷分享网,小刀娱乐网,科学刀,爱Q生活网,QQ技术网
  • 当前位置:网站首页 > 网站源码 > 正文

    你了解过网站前端怎么优化吗

    作者:忆笙 日期:2019-03-06 分类:网站源码

    还记得当初选择学web前端,是被网页的华丽效果而震撼。转眼间发现自己接触web前端也快一年了,期间自己也总结了一些web前端的优化,也参考了下别人的资料,今天就把它们分享出来给大家:
    一、html页面优化
    1.css文件放在head,js文件放在html尾部(</body>的前面即可)
    因为:下载某一个js时其他任务是暂停的,需要等这个JS下载并执行完毕后再下载其他的。
    2.尽量减少标签,不多用一个标签
    比如:clear清除浮动用:after
    3.减少dns查询
    每引用一个来自外部的文件,就会有一个dns查询,一般对首次访问网站的速度会有影响。
    4.避免出现空的src,如 src=""
    5.减少http请求 
        比如:(1)使用CSS Sprite技术(css精灵)
               (2)css和js代码,能尽量合并就合并。(外部链接)
    6.js的延迟加载,异步加载,使用defer标签 、 async="true"

    二、代码优化
    1.项目最后使用压缩工具压缩css,js
        因为这样,可以减少页面的体积加快打开速度。
    2.css的class不要太长,要有清楚的层级关系
    3.js操作样式时使用class,html里不使用内联css和js代码

    三、JS优化
    1.字符串的拼接:使用 += 是较低效的,可使用数组的 join() 方法
    2.使用循环时尤其不要使用 for(in),while比for的效率要高一点。(循环次数很大的时候)
    3.局部变量的访问速度比全局变量更快,而且要尽量避免全局变量
    4.对DOM元素的每一次操作代价都比较高,所以尽量少得操作。
    比如:for循环中有对字符串的拼接,然后使用innerHTML操作,就应该把innerHTML放在for循环外面。
    5.对某个dom节点进行操作时,将这个dom节点存在一个局部变量中。
    6.关于字符串遍历,优先使用正则表达式
    7.使用直接量  var a = [] 比var a = new Array()快
    8.创建dom节点 最好不要直接写字符串,而应该调用creatElement()方法
    四、服务器方面优化
    1.提高自己服务器质量,带宽等方面
    2.开启浏览器缓存,减少http请求
    3.开启gzip压缩
    写在最后:我认为学习就是不断的自己总结,和吸取别人的经验和教训。俗话说的好:“好记性不如烂笔头!”同理:“代码看得再多,不如敲一篇”因为这样才会体会其中的含义和语义,并能增加自己的记忆力。

    本文暂时没有评论,来添加一个吧(●'◡'●)

    欢迎 发表评论: