浅谈web前端性能优化

不打扰是莪最后的温柔 提交于 2020-03-17 19:53:18

前端性能优化:

一、尽可能减少前端http请求。

  1、合并优化脚本文件和css文件。

  2、同种类型的背景图片尽量放在一起,用css控制显示。

二、使用浏览器缓存。

  如果能强制浏览器缓存在本地,将会降低页面产生的流量。

三、页面压缩。

  压缩gzip,html,js,css,图片等。

四、html代码结构优化*

  1、正确布置页面脚本。

    1>、尽可能使用外部脚本和配置文件。

    2>、js文件放到文档末尾。

    3>、脚本放在文档前面,文档内容可能会被阻塞。放在末尾会出现就是未加载完用户就会触发行为。

  2、减少dom结构的层级。

  3、减少cookie的大小。

  4、尽量用div取代table。

    table会影响页面展示速度,应为只有table完全加载才会展示在页面上。

五、组件分为多个域,提高页面组件并行下载能力。

六、图片,脚本,数据预加载。

 

移动端的性能优化:

属于前端性能优化范畴,但移动性能优化在PC端同样适用。

  1、使用css动画。应为css加载速度优于js。

  2、适当使用touch事件代替click事件。

  3、合理使用css3样式,减少使用css3渐变阴影等效果。

  4、用transform开启硬件加速。

  5、不滥用float,web字体。

 ------------------华丽的分割线------------------------------

最近看了些性能优化的知识,补充在上面

前端性能测试里的二八原则,即前端优化占八成,后端优化占两成。

客户端响应时间:

10%-20%:发送http请求,从服务端获取html文档。

90%-80%:下载页面相关文件。

 

 

    

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!