【高性能HTML5】读书后感

本文探讨了网页设计与优化的关键要素,包括理解浏览器代码执行机制、利用HTML5新特性、运用模式与技巧、掌握服务器端技术等内容。文章还强调了减少DOM元素数量、合并DOM操作、采用CSS布局等开发原则,并提出了一系列性能准则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

   前言

 

       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上面其实也是有很多可以优化的地方,值得注意

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值