博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web前端页面优化——个人见解
阅读量:4945 次
发布时间:2019-06-11

本文共 901 字,大约阅读时间需要 3 分钟。

web前端页面优化,我们从JavaScript、css、html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨。

一、  有关javascript方面 优化见解。

 1. 首先举个例子:下载1个 100KB 的js文件,要比4个 25KB的js文件快。 

     因此,我们得出了一个结论:

    ”那就是减少http 请求js的数量“,

   但是问题来了,我们又不能把所有的js放在一起,因为当加载一个巨形的js文件,会导致我们的页面卡停(没有加载完引入的js时,页面不会再次执行

   所以,我们引入了 Requirejs

   Requirejs的优点: 1. 实现js文件的异步加载,避免网页失去响应; 2. 管理模块之间的依赖性,便于代码的编写和维护。(有关requirejs的案例网上很多,在此就不说使用方法了)

 2.   合并请求js的http链接

   例如当我请求2个存放位置在同意目录下的js。

   (1). 

   (2).

    我们可这样写: 

      

 

 3.  使用” lazyload” (懒加载),网上有很多这样的教程。

  我在此只说明”懒加载”的使用情况时,当你的页面有很多图片的时候,但是每次展示一两张,只有在下拉 或 点击时,才显示后面的图片。 就用懒加载

   

二、 在css 方面,优化见解。

  1. 我们还可以通过把采用“精灵图“(sprites)技术,把页面常用的图片如logo,icon等图片合成在一张图片上,到时候再使用css绝对定位。这样可以减少图片的http请求。
  2. 通用法则:”减少http请求“,合理规划css样式文件的数量和大小。达到加载性能最优。

三、 在html 方面,优化见解

  1. 把<script>标签放在紧靠body 的闭合标签的</body>标签的上面。 因为,代码是自上而下执行的。把js的引用放在下面,这是页面会展示已经加载的元素(比起浏览器展示空白页面,这样要强一些)

四、 静态资源路径使用CDN资源路径。

 

转载于:https://www.cnblogs.com/tlsmile/p/8631790.html

你可能感兴趣的文章
Git学习笔记4
查看>>
【Android】用Cubism 2制作自己的Live2D——官方App样例源码学习(2)!
查看>>
利用锚点制作简单索引效果
查看>>
Photoshop
查看>>
webstorm使用说明
查看>>
项目练习计划
查看>>
Xshell远程登录
查看>>
@RequestParam与@PathVariable的区别
查看>>
C语言之break和continue
查看>>
jquery.form.js使用
查看>>
LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”。
查看>>
回顾2012,展望2013
查看>>
Spring中的ApplicationContextAware使用
查看>>
HDU-2067-小兔的棋盘
查看>>
监听手机录音
查看>>
客户化程序完成标准成本成批更新
查看>>
大数据平台组件布置 与 进程查看
查看>>
Hadoop3集群搭建之——hive添加自定义函数UDTF (一行输入,多行输出)
查看>>
JS - Math对象
查看>>
MUI开发指南(二) webview对象
查看>>