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

读《 高性能html5 》有感

    博客分类:
  • web
 
阅读更多

说起html5的高性能首先想到的基本都是浏览器的性能,很少想到服务器端和网络性能,开发效率就更想不到了,

浏览器的性能给我们最直观的感觉就是页面加载的时间,影响页面加载的时间因素包括(html元素多少,http请求次数)
现在网页结构越来越复杂,也就是html元素越来越多,元素越多,页面加载越慢,所以不要滥用HTMl,页要用最少的元素解决最多的问题。比如清除浮动,一般的做法是引入一个元素(div或p),加上样式clear:both。其实万全可以用:after伪元素解决。

合并资源文件和使用图片精灵是减少http请求最显著的方法

合理的布局html元素不但可能加快浏览器渲染效率,最主要的是能够减少浏览器重绘次数。重绘就是我们在改变一个元素的样式的时候是否会影响别的元素的渲染效果,如果影响的元素越多,重绘的工作量就越大,最明显的感觉就是页面卡顿。在DOM树中越深层的元素越独立,对其他的元素影响越小,重绘的工作量越小。


渐进式增强是一种开发方法,是指首先我们要有一个基本的设计框架,特殊的问题我们再对其加强功能模块。

各司其职就如字面意义,HTML、CSS、Javascript这三者都有各自擅长的方面,比如一个动画效果CSS和Javascript都可能实现,但html5中我们就尽量用CSS来实现,效率明显会比Javascript来实现的简单,页且代码量又少。


资源文件位置问题
Javascript要放在文件尾部,因为执行脚本会阻塞页面的渲染,也就是说执行脚本任务和渲染任务是一个单进程,只能同时做一件事,所以一旦把Javascript文件头部,浏览页面时用户只会看到一个空白的页面。只有当脚本全部执行完成才会显示出页面内容。


符合当代浏览器性能的代码 用css来布局 使用渐进式增强的方法 各司其职 这几项是高性能的基础。


分享到:
评论

相关推荐

    品牌拓展黑色html模板是一款以黑色为主色调的html网页模板下载。.zip

    在这个黑色模板中,CSS可能会使用深色背景、高对比度的文字和图标,以保证视觉冲击力和易读性。 HTML5是HTML的最新版本,引入了许多新特性,如语义化标签(如、、等)、离线存储、媒体元素(、)等。这些特性使得...

    app触屏模板

    这种模板通常采用HTML5技术,确保在不同尺寸和操作系统的屏幕上都能提供良好的用户体验,同时响应式设计能根据用户设备的屏幕大小自动调整布局,保证内容的清晰可读和操作的便捷性。 在描述中提到的"模仿GoMoblie...

    NewFangledSareeStore-Source-Code:这是一个简单的电子商务项目。该项目是使用PHP Code-Igniter作为框架,HTML 3,CSS 3,Ajax,Json和MySQL作为数据库来完成的。-css source code

    MySQL以其高性能、稳定性及广泛的社区支持,成为了中小型企业级应用的首选数据库系统。在NewFangledSareeStore中,开发者可能利用了MySQL的关系型数据库特性,通过精心设计的数据模型,实现了高效的数据管理和检索。...

    TM-0364_企业网站网页源码欧美前端模板.zip

    此外,字体的选择也会影响整体视觉感受,欧美设计通常偏好简洁、易读的无衬线字体。 6. SEO优化:企业网站源码需要考虑搜索引擎优化,确保代码结构清晰,关键词适当地融入HTML元素中,同时合理使用Meta标签,以提高...

    全屏背景大气科技公司产品展示网页模板5725.zip

    这种设计方式能够突出品牌形象,让访问者一进入网站就能感受到公司的氛围和定位。在科技公司产品展示的场景下,全屏背景可能展示科技感十足的图像,如未来感的设备、创新的实验室或者高科技产品的特写,以此来强调...

    简洁企业html网站模板下载

    这个模板集以其简洁的设计风格,不仅能满足基本的展示需求,还能在视觉上给予用户舒适的感受,提升企业的专业形象。 简洁的设计理念在网页设计中至关重要,因为它可以帮助访客快速找到所需信息,避免过多的装饰元素...

    MarkText + 0.10.21

    总的来说,MarkText 0.10.21凭借其高性能、易用性和丰富的功能,成为Markdown爱好者和专业写作者的理想选择。无论是日常记事、项目管理还是专业文档编写,都能感受到它带来的高效与便捷。如果你尚未尝试过Markdown...

    网页设计实验8-3-1.zip

    5. **交互设计**:交互设计关注用户与网页的互动,包括按钮、链接、表单等元素的行为。好的交互设计应直观、反馈及时,提供清晰的导航路径。 6. **用户体验(UX)**:UX设计关注用户在整个使用过程中的感受。设计师...

    react-native介绍ppt.pptx(共23页)

    - **React Native**:由Facebook开发,基于JavaScript,能够利用原生组件来构建高性能的移动应用。 - **Ionic**:基于AngularJS,主要用于构建混合应用。 - **Flutter**:由Google推出,使用Dart语言,提供了一套...

    易优cms模板E002843响应式茶叶批发公司网站模板.zip

    5. **SEO优化**:对于茶叶批发公司的网站,SEO(搜索引擎优化)至关重要,以便在搜索结果中获得更高的排名。模板可能已经考虑了SEO最佳实践,如关键词优化、元标签设置和友好的URL结构。 6. **交互元素**:模板可能...

    reading-notes:201读书笔记

    此外,他还可能学习了微服务架构、容器化技术(Docker)、云平台(AWS或Azure)的使用,以及如何进行性能优化和安全编码。在这个阶段,项目管理和团队协作的技巧也会是重要的学习内容。 这些笔记不仅记录了Allee的...

    网页设计(蕾设计)

    2. **用户体验(UX)设计**:UX设计关注用户的感受和需求,确保用户在浏览网站时能够轻松找到信息,享受顺畅的浏览体验。这包括网站的导航结构、响应速度、可用性和可访问性。 3. **响应式设计**:随着移动设备的...

    QQ数字提示的粘连效果

    这种效果使得数字提示在显示时有一种仿佛数字字符之间互相粘连的视觉感受,提高了用户界面的美观性和易读性。实现这种效果通常需要结合前端开发技术,如HTML、CSS以及JavaScript等。 首先,我们需要理解“粘连效果...

    网页设计作业

    网页设计需选用易读的字体,并考虑行间距、字间距、字号等排版要素,以确保文本的清晰度和可读性。 4. **响应式设计**:随着移动设备的普及,响应式设计成为必须。它使网页能适应不同尺寸的屏幕,保持良好的显示...

    Discuz! 黑色风格

    2. 易读性:在适当的高对比度下,黑色背景有助于减轻用户长时间阅读屏幕内容的疲劳,提高阅读舒适度。 3. 界面统一:黑色主题可以统一整个论坛的视觉元素,使每个页面、每个模块都具有连贯性,提升整体用户体验。 ...

    NotePadPlus 文本编辑工具

    其中,NotePadPlus是一款备受推崇的开源文本编辑器,它以其丰富的功能、高效的性能以及对多种文件格式的支持,赢得了广大用户的喜爱。 NotePadPlus并非普通的记事本替代品,它超越了基本的文本编辑功能,为用户提供...

    web网页设计报告.zip

    3. **用户界面(UI)与用户体验(UX)设计**:UI关注的是网页的外观和交互元素,而UX则关注用户与网页的交互过程和感受。优秀的网页设计应兼顾两者,以提供简单易用且吸引人的界面。 4. **交互设计**:通过按钮、...

    收获,不止SQL优化 PDF 带书签 第三部分

    编辑推荐 方法意识巧妙融入,脑图表格清晰展现; 海量案例完美结合,线上...读完全书,来,合上书本,闭上眼睛,深呼吸,用心来感受SQL优化的世界。 一个字:“爽”! 京东购买连接:https://item.jd.com/12191576.html

    网页设计.zip

    5. **用户体验(UX)**:UX是衡量用户与产品互动时的感受。设计师需关注用户需求,优化导航、加载速度、交互元素等,以提高用户满意度。 6. **用户界面(UI)**:UI关注的是界面的外观和交互性。良好的UI设计应该...

Global site tag (gtag.js) - Google Analytics