`
zhangyaochun
  • 浏览: 2650170 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

【高性能HTML5】读书后感

阅读更多

 

   前言

 

       6月份活动又来啦,必须必地参加。这本确实是一本专业方面,仔细地读下来感觉有一些收获。

 

   正文

 

       这本书带来了:

 

  • 理解浏览器的代码执行机制
  • 如何使用h5的新特性
  • 介绍一些模式和技巧
  • 介绍一些服务器端的技术

 

      什么是高性能?

 

  • 页面加载时间:重要的性能指标
  • 浏览器性能:js引擎和css动画处理的优化和加速
  • 网络性能:节省带宽
  • 开发效率:解决命名冲突、代码复用等

 

     开发原则

 

  • 编写符合当代浏览器性能的代码

       减少html中元素的数量、减少重绘:

 

  1. 要改动的元素在DOM数种的深度,越深则改动就越独立,对其他节点影响越少
  2. 要对DOM有多次操作,尽量合并到一次

 

  • 用css布局

       浏览器渲染页面其实就是渲染一系列的“盒子”,而盒子里面有很多“盒子”。

 

       盒子套盒子:把一个或一大组元素都包在一个盒子里。

 

 

  • 渐进式增强的方法

      首先有一个基本的设计是可以兼容所有浏览器的。再为较新的或者更新的浏览器做加强的显示或者功能。

 

       介绍了两个不错的网站和工具:

 

       http://css3please.com/   和 http://css-tricks.com/autoprefixer/

 

       关于Modernize其实对于前端专业的同学应该一点也不陌生,它就是一个不错的检测js功能十分可以的工具。

    

 

  • 各司其职
  1. html是内容之源
  2. css是展现大师
  3. 动态数据之王,交互

  

 

  性能准则

 

  • 减少http请求:合并资源文件、使用雪碧图
  • 使用CDN
  • 避免空的src或者href
  •  增加过期头
  • 启用GZIP:Accept-Encoding: gzip, deflate
  • css放头部
  • 减少重绘:规定图片的高和宽、定义字符集、不要重组DOM
  • 。。。

 

    其实总体上还是那个32条

 

 

  总结

   

     其实以前很多前端关注的是js的性能,还有服务相关的,但是h5上面其实也是有很多可以优化的地方,值得注意

 

 

分享到:
评论

相关推荐

    mysql高性能索引读书笔记

    《高性能Mysql》第五章的读书笔记,记录的都是要点,以思维导图的方式呈现。

    读书笔记:高性能Mysql 读书笔记.zip

    读书笔记:高性能Mysql 读书笔记

    高性能MySQL.pdf

    《高性能MySQL》是一本深入探讨MySQL数据库系统优化与管理的经典著作。这本书涵盖了MySQL的架构、历史、性能调优以及基准测试等多个重要主题,对于数据库管理员、开发人员以及对数据库性能有高要求的技术人员来说,...

    读书笔记:ESRedisSentryKafka 高性能MySQL LVS.zip

    读书笔记:ESRedisSentryKafka 高性能MySQL LVS

    高性能MySQL pdf 免费-part1

    《高性能MySQL》汇聚了著名MySQL 专家在实践中构建大型系统的多年宝贵经验,指导你如何使用MySQLTF发出快速可靠的系统。的第二版着眼于健壮性、安全性及数据完整性,涵盖了 MySQL性能的细微之处。  《高性能MYSQL》...

    mui高性能框架介绍

    浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一...

    读书笔记:使用RedisMySQL实现高性能注册,登录功能 .zip

    读书笔记:使用RedisMySQL实现高性能注册,登录功能

    GPU高性能运算之CUDA源代码

    《GPU高性能计算之CUDA》书中实例源代码,经调试正常。GPU高性能计算系列丛书的第一本《GPU高性能计算之CUDA》已经出版,由张舒,褚艳利,赵开勇,张钰勃所编写。GPU高性能运算之CUDA---源代码

    高性能变频调速及其典型控制系统.pdf

    高性能变频器通常具备良好的动态响应性能、高精度控制能力和宽范围调速特性。 典型控制系统包括开环控制、闭环控制和矢量控制等。开环控制系统比较简单,主要用于对精度要求不高的场合;闭环控制系统则通过反馈环节...

    交流传动系统高性能控制及MATLAB SIMULINK建模[海瑟姆·阿布鲁2019.1]高清+书签

    高性能传动使电机具有快速、准确的动态响应,且提供良好的稳态性能。本书首先给出了交流电机的基本模型(包括异步电机、永磁同步电机、双馈异步电机),详细阐述了电压型逆变器的脉宽调制技术,然后针对交流电机的高...

    读书笔记:Spring Boot+MySQL+Redis+RabbitMQ的高性能高并发商品秒杀系统设计与优化.zip

    读书笔记:Spring Boot+MySQL+Redis+RabbitMQ的高性能高并发商品秒杀系统设计与优化

    读书笔记:高性能、高可靠的数据库跨云中间件完全兼容MySQL技术体系由极数云舟出品开源.zip

    读书笔记:高性能、高可靠的数据库跨云中间件完全兼容MySQL技术体系由极数云舟出品开源

    c# socket 高性能传送大文件

    本文将深入探讨如何利用C# Socket实现高性能的大文件传输。 标题"**C# Socket 高性能传送大文件**"涉及的关键技术点包括: 1. **C# Socket基础**:Socket是网络通信的基础,它基于TCP/IP协议,提供低级别的网络...

    HTML5学习笔记(总结提炼版)——001

    HTML5是现代网页开发的核心,它是超文本标记语言HTML的第五个主要版本,自2014年正式发布以来,已经成为了构建响应式、交互性强的网页应用的标准。本学习笔记将聚焦于HTML5的基础知识,包括其新特性、元素和最佳实践...

    非常全面的高性能高并发服务器架构解决方案

    高性能高并发服务器架构解决方案 高性能高并发服务器架构是指一种能够处理大量用户请求和高并发访问的服务器架构解决方案。在当前的互联网时代,高性能高并发服务器架构已经成为网站运营商和开发者的必备技术之一。...

    html5实现股票行情源码

    HTML5的Canvas API可以用于绘制这样的动态图表,提供高性能的图形渲染。 3. **funds-index.htm**: 这个文件可能是基金指数的展示页面,基金指数通常用于衡量基金的整体表现,可能包含HTML5的表格、图表或者其他交互...

    wpf高性能画图示例

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)中实现高性能的画图功能。WPF作为.NET Framework的一部分,提供了丰富的图形渲染和UI设计能力,但默认情况下,其绘图性能可能并不理想,特别...

    WPF下,高性能绘图,写WriteableBitmap,多线程,双缓存

    在WPF(Windows Presentation Foundation)框架中,高性能绘图是一个重要的技术挑战,特别是在处理大量数据可视化或者实时渲染的场景下。本项目通过使用WriteableBitmap和多线程技术,结合双缓存策略,实现了高效的...

    Windows高性能并发IOCP之DELPHI实现

    《Windows高性能并发IOCP之DELPHI实现》 在Windows操作系统中,IO Completion Ports (IOCP) 是一种高效处理大量并发I/O操作的技术。本文将深入探讨如何利用DELPHI编程语言来实现基于IOCP的高性能并发应用。DELPHI,...

Global site tag (gtag.js) - Google Analytics