前端如何进行页面优化

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操作
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 6,392评论 0 31
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,863评论 24 450
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,583评论 1 19
  • 很少有讨厌的事物 温雅、缓慢, 像冉升的朝阳 很少有欢喜的时刻 涌动、轻快, 像倾泻的月光 很少有闲逸的心境 舒爽...
    郭青年阅读 174评论 6 2