美文网首页
前端如何进行页面优化

前端如何进行页面优化

作者: xiao_333 | 来源:发表于2017-08-14 17:11 被阅读0次

html

  • 语义化
  • 加载顺序:css放head里面(用户看到顺畅页面),js放尾部(会阻塞dom渲染,且dom树没搭建好时,js里面的dom操作会有问题)
  • 减少页面请求:合并img,合并css,避免使用@import方式引入css文件
  • 减少文件大小(1.主要减少img文件大小,选用合适的格式并且用工具进行压缩(ImageOptim,ImageAlpha,JPEGmini),2.删除不必要的标签)

css

  • 选择器:越简单越短越好,同样的样式进行选择器合并
  • css值缩写:margin等,值为0的省略单位,
  • 减少文件大小:YUI Compressor,cssmin
  • 少用耗性能的属性:expresion,border-radius,filter,box-shadow,gradients等
  • 图片设置宽高,不要缩放,减少浏览器的回流和重绘。
  • 所有表现用css实现
  • 模块化
  • 命名规范、语义化
  • 尽量减少hack

javascript

  • 页面懒加载
  • 少用dom操作

相关文章

  • 前端如何进行页面优化

    html 语义化 加载顺序:css放head里面(用户看到顺畅页面),js放尾部(会阻塞dom渲染,且dom树没搭...

  • 三、页面性能优化

    《指尖上行——移动前端开发进阶之路》学习笔记 第三章:介绍页面性能的优化原理,如如何进行资源优化、加载优化及脚本优...

  • 撩课-Web大前端每天5道面试题-Day25

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

  • 撩课-Web大前端每天5道面试题-Day22

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

  • 性能、打包题目

    前端性能优化 页面DOM节点太多,会出现什么问题?如何优化? DOM太多会造成页面加载卡顿, 操作DOM节点 在外...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化?

    前端性能优化主要是为了提高页面的加载速度,优化用户的访问体验。我认为可以从这些方面来进行优化。第一个方面是页面的内...

  • App页面性能优化 -- Core Animation篇

    写在前面 什么时候需要考虑页面性能问题 如何进行页面性能评估 如何具体实施性能优化 PS: 任何提前优化都是魔鬼 ...

  • 从雅虎军规看前端性能优化

    从雅虎军规看前端性能优化 本文大部分内容翻译自雅虎前端的性能优化,如何让页面加载更快,雅虎给出了多个规则,原文地址...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

网友评论

      本文标题:前端如何进行页面优化

      本文链接:https://www.haomeiwen.com/subject/ejnurxtx.html