改善网站页面打开速度的十个要点
网站页面打开速度多重要毋庸置疑,影响用户体验度,会很大程度减少网站访问量,降低网站转化率,如果网站做SEO的话,对网站排名也十分不利。所以啦,在座的各位前端们,做网页的时候不要光顾着好看,加特效,网站打开速度也是非常重要的,改善网站页面打开速度的十个要点由学码思Web前端培训老师给大家带来,一起看一下。
01使用非常佳实践所建议的布局效果
虽然已经是 2015 了,但我还是要说不要使用行内联样式和 table 布局。
02精简CSS样式:样式越少,回流越快。
03精简DOM层级:尽量剔除无意义的包裹类标签和层级。
04细粒度操作DOM树:尽可能细化,减弱局部 DOM 变化给整体带来的影响。
05从文档流中移除复杂的动画效果:使用 position:absolute 和 position: fixed 属性脱离文档流的元素会被浏览器创建一个新层来存放。
06巧用隐藏方式:使用 display: none; 隐藏的元素不会触发页面的重绘和回流事件,所以可以在这些元素隐藏期间配置样式,配置完成后再转换为可见状态。
07批量更新元素:单词更新所有 DOM 元素的性能要优于多次更新。
08约束元素变化的影响:尽量避免某个元素的变化引起大范围的变化。
09权衡流畅度和性能:一次移动像素多了,流畅但占性能。一次移动像素少了,性能少但是画面差。
10使用开发者工工具分析页面重绘:目前主流浏览器都在开发者工具中提供了监控页面重绘的功能。
改善网站页面打开速度的十个要点就为大家带来到这里,每个浏览器不同,开发工具、兼容性、打开速度也会有细微差别。大多数新手前端喜欢用Chrome来调试页面布局,确实很好用,但是用户不一定是这样的,还是强调那一点,用户始终是UI和前端的非常终出发点,你要吧所有主流浏览器的兼容性调调好,确保每个浏览器打开快速顺利,就好了。