zoukankan      html  css  js  c++  java
  • 常见的前端优化技巧有哪些

    大体 减少服务器请求数 1. 将多个JS/CSS文件进行合并
    2. 图片不需要经常改动时,可使用CSS sprite
    3. 如果仅单个页面使用某JS/CSS文件,可以直接将文件内容放于html页面中(若多个页面共用相同的JS/CSS文件,则不应要这么做,而应利用好浏览器的缓存功能)
    加快资源访问速度 1. CDN
    减小文件大小 1. 将图片适当压缩(e.g. TinyPNG)
    2. 压缩JS/CSS文件
    提高代码执行效率  
    JS 需要多次使用对象(比如需要遍历的对象的.length),应该先将其存为一个变量,然后调用该变量以减少JS查询的时间
    于页面底部引入脚本,先将页面内容呈现给用户
    提高代码复用率,减少代码冗余
    CSS 于页面头部引入样式,避免用户看到布局错乱的内容
    不要使用CSS表达式(已经很少有人用了,我也没用过。。。只是有听说过)
    HTML 主要是SEO方面的优化,添加name为keyword何description的meta标签,减少外链,外链加上rel=”nofollow”,标签尽量符合语义
    其他 预解析 比如首页添加<link rel="prerender" href="/about.html">
    利用缓存 比如可以使用百度静态资源公共库(http://cdn.code.baidu.com/),若用户以前访问过其他引用了相同资源地址的文件的话,缓存的优势就出来了
    总结:像压缩图片这种方法对提高网页加载速度的效果是很明显的,但是有些优化方法对于访问量小的小型网站而言并没有什么必要,比如:如果某JS文件本来就只有100来行,压缩后减少的文件大小对页面访问速度的提高等于没有,对服务器压力的减少也近乎没有
           
  • 相关阅读:
    程序、进程、线程区别与联系
    SQL常用知识与必须掌握的面试常问SQL语句
    快速搭建一个基于react的项目
    原生js判断设备类型
    在vue项目中设置BASE_URL
    纯前端实现数据导出excel文件
    原生js实现拖拽功能
    使用Echarts实现折线图的一点总结
    在vue项目中显示实时时间(年月日时分秒)
    在vue项目中使用MD5.js
  • 原文地址:https://www.cnblogs.com/hubl/p/5748656.html
Copyright © 2011-2022 走看看