前端的性能优化主要分为三部分:

HTML优化

避免 HTML 中书写 CSS 代码,因为这样难以维护。

使用Viewport加速页面的渲染。

使用语义化标签,减少 CSS 代码,增加可读性和 SEO。

减少标签的使用,DOM解析是一个大量遍历的过程,减少不必要的标签,能降低遍历的次数。

避免 src、href等的值为空,因为即时它们为空,浏览器也会发起 HTTP 请求。

减少 DNS 查询的次数。

CSS优化

优化选择器路径:使用 .c {} 而不是 .a .b .c {}。

选择器合并:共同的属性内容提起出来,压缩空间和资源开销。

精准样式:使用padding-left: 10px 而不是 padding: 0 0 0 10px。

雪碧图:将小的图标合并到一张图中,这样所有的图片只需要请求一次。

避免通配符:.a .b * {} 这样的选择器,根据从右到左的解析顺序在解析过程中遇到通配符 * {} 会遍历整个DOM,性能大大损耗。

少用 float:float 在渲染时计算量比较大,可以使用 flex布局。

为 0 值去单位:增加兼容性。

压缩文件大小,减少资源下载负担。

JavaScript优化

尽可能把 <script> 标签放在 body 之后,避免JS 的执行卡住 DOM 的渲染,最大程度保证页面尽快地展示出来。

尽可能合并 JS代码:提取公共方法,进行面向对象设计等……

CSS 能做的事情,尽量不用JS 来做,毕竟 JS 的解析执行比较粗暴,而CSS 效率更高。

尽可能逐条操作 DOM,并预定好 CSS 样式,从而减少 reflow 或者 repaint的次数。

尽可能少地创建 DOM,而是在HTML 和 CSS中使用 display: none 来隐藏,按需显示。

压缩文件大小,减少资源下载负担。

web前端如何优化自己的代码的更多相关文章

  1. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  2. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  3. Web前端性能优化教程07:精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

  4. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  5. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  6. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

  7. Java Web 前端高性能优化(二)

    一.上文回顾 上回我们主要从图片的合并.压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)) 本次我们主要从图像BASE64 编码.GZIP压缩.懒加载与预加载以及 OneAP ...

  8. 阿里巴巴 web前端性能优化进阶路

    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...

  9. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

随机推荐

  1. Vue路由编程式导航以及hash模式

    import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...

  2. logrotate机制&原理

    logrotate机制&原理 centos系统中默认安装logrotate,logrotate主配置文件:/etc/logrotate.conf,其中定义了系统默认的logrotate规则,当 ...

  3. consul_nginx_uprsync动态负载均衡

    consul_nginx_uprsync动态负载均衡 环境准备: 原理描述: 将Nginx的负载均衡后端服务器配置信息写入consul的接口中,upsync插件通过读取consul的配置,然后持久化到 ...

  4. Python3基础 内置函数 hash

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  5. properties配置文件参数获取

    package com.opslab.util; import org.apache.log4j.Logger; import java.io.File;import java.io.IOExcept ...

  6. Qt编写气体安全管理系统16-云端同步

    一.前言 云端同步功能是为了后期的拓展做准备的,他的目的就是将本地的数据库中的记录,比如实时采集到的数据以及存储的运行记录等,同步到云端数据库上,默认采用阿里云的mysql数据库,阿里云速度还是挺快的 ...

  7. 如何在Windows Server 2008 R2中更改桌面图标

    如何在Windows Server 2008 R2中更改桌面图标 Windows Server 2008 R2 已经在 MSDN 和 TechNet Plus 订阅上公布,gOxiA 在第一时间下载并 ...

  8. CSS3 column 分栏

     column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...

  9. CRC校验的问题(c语言实现CRC校验和)

    1. 前面的数 7A 01 00,计算的结果是0X4920 2. 那么把数据CRC加上 3. 测试代码,计算出来的结果对不上,什么情况?可是我把参考模型的全部都选了一遍,也对不上其中一个!!! 4.  ...

  10. Python - 在CentOS7.5系统中安装Python3

    注意:以下内容均使用root用户执行操作. 1-确认信息 # uname -a Linux localhost.localdomain 3.10.0-957.el7.x86_64 #1 SMP Thu ...