Code Monkey home page Code Monkey logo

front-end-performance-optimization's Introduction

Web前端性能优化

1 页面级优化

1.1 减少http请求

1.2 加快DNS解析

1.3 设置http缓存

1.4 资源合并(JS,CSS)

1.5 资源前端压缩

1.6 图片精灵(sprite)

1.7 data: URL scheme

1.8 服务端压缩gzip

1.9 图片懒加载

1.10 css头部加载

1.11 JS异步加载

1.12 JS按需加载

1.13 减少http重定向

1.14 优化DOM结构

1.15 图片不失真压缩

1.16 接口合并

2 部署优化

2.1 多域名资源服务器

2.2 CDN

2.3 静态资源缓存服务器

3 代码级优化

3.1 减少Dom节点查找(缓存DOM选择器)

3.1.1 Html Collection

3.1.2 减少Reflow(重排)

3.1.3 减少Repaint(重绘)

3.2 避免使用eval和Function

3.3 慎用with

3.4 减少作用域链查找

3.5 数据访问,利用局部变量

3.6 字符串拼接用数组join

3.7 事件绑定多用委托

3.8 css选择符(从右往左)

3.9 resize使用计时器绑定时间间隔

3.10 内存使用与释放控制

3.11 scroll和resize等事件触发采用函数节流(setTimeout)

3.12 巧用缓存

4 JQuery优化

4.1 总是从ID选择器开始继承

4.2 在class前使用tag

4.3 将jquery对象缓存起来

4.4 掌握强大的链式操作

4.5 使用子查询

4.6 对直接的DOM操作进行限制

4.7 冒泡

4.8 消除无效查询

4.9 推迟到 $(window).load

front-end-performance-optimization's People

Contributors

sukunwei avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.