如何进行页面优化？

cjie 发布于2019-08-30 13:03 / 2225人阅读

摘要：所有表现用实现模块化命名规范语义化尽量减少页面懒加载少用操作加注释

为什么要进行页面优化？

更快：页面加载更快，客户感知更快;

更易于阅读：易于搜索引擎抓页面重点，易于盲人阅读;

更易于维护：易于自己和同事后期读懂、定位、修改和扩展代码.

如何进行页面优化 html

语义化

加载顺序:css放head里面(用户看到顺畅页面)，js放尾部（会阻塞dom渲染，且dom树没搭建好时，js里面的dom操作会有问题）

减少页面请求：合并img,合并css，避免使用@import方式引入css文件

减少文件大小：

主要减少img文件大小，选用合适的格式并且用工具进行压缩(ImageOptim,ImageAlpha,JPEGmini)

删除不必要的标签

css

选择器：越简单越短越好,同样的样式进行选择器合并

css值缩写：margin等，值为0的省略单位,

减少文件大小:YUI Compressor,cssmin

少用耗性能的属性:expresion,border-radius,filter,box-shadow,gradients等

图片设置宽高，不要缩放，减少浏览器的回流和重绘。

所有表现用css实现

模块化

命名规范、语义化

尽量减少hack

javascript

页面懒加载

少用dom操作

加注释

私有云超融合服务器 wordpress怎么进行页面布局啊页面优化优化页面页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115267.html

当面试官问你如何进行性能优化时，你该这么回答(一)

摘要：背景在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。在对这些环节进行优化之前，我们需要知道如何监控这些环节花费了多少时间。为了优化链接的环节，前端这里还需要对资源使用，雪碧图，代码合并等手段。背景在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。所以面试时，面试官总会问你一个问题，如何进行性能优化呢？如...

elisa.yang 2019-08-22 15:47 评论0 收藏0
前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
小白也能看的懂的页面性能优化来一波

摘要：或许我们忙于业务，但是有时候我们还是要停下来评估性能，不能把性能优化一直说在嘴上。前言当你觉得页面很卡的时候，你有可能需要更换手机，当然也可以让对应的同学进行性能优化了。本文适用给技术小白 & 部分前端同学。当然了，笔者在写文本之前也针对了部门内部和公司内部的部分H5页面的性能进行粗略的评估，结果当然是非常不令人满意的。或许我们忙于业务，但是有时候我们还是要停下来评估性能，不能把...

Pikachu 2019-08-05 12:45 评论0 收藏0
如何进行页面优化？

摘要：所有表现用实现模块化命名规范语义化尽量减少页面懒加载少用操作加注释为什么要进行页面优化？更快：页面加载更快，客户感知更快; 更易于阅读：易于搜索引擎抓页面重点，易于盲人阅读; 更易于维护：易于自己和同事后期读懂、定位、修改和扩展代码. 如何进行页面优化 html 语义化加载顺序:css放head里面(用户看到顺畅页面)，js放尾部（会阻塞dom渲染，且dom树没搭建好时，j...

DC_er 2019-08-02 15:54 评论0 收藏0
如何进行页面优化？

摘要：所有表现用实现模块化命名规范语义化尽量减少页面懒加载少用操作加注释为什么要进行页面优化？更快：页面加载更快，客户感知更快; 更易于阅读：易于搜索引擎抓页面重点，易于盲人阅读; 更易于维护：易于自己和同事后期读懂、定位、修改和扩展代码. 如何进行页面优化 html 语义化加载顺序:css放head里面(用户看到顺畅页面)，js放尾部（会阻塞dom渲染，且dom树没搭建好时，j...

LiuZh 2019-08-19 18:22 评论0 收藏0