web高效编程与优化实践

HTML/CSS优化

1. 能用HTML/CSS解决的问题就不要用JS

(1). 导航高亮 使用hover选择器
(2). 鼠标悬浮时显示 使用hover选择器以及相邻选择器
(3). 自定义radio/checkbox的样式
(4). 需要根据个数显示不同样式 使用:nth-of-type,nth-first-child,nth-last-child等等
(5). 巧用CSS3伪类 如:foucus,::before,::after等等

2.优化HTML标签

(1). 使用合适的标签
如:文字使用p标签;表单使用form;文字加速用b/strong;表格用table等等
(2). 使用HTML5语义化标签
在大部分开发中用的多的是div,它只是作为一个普通的容器使用,而在HTML5中除了语义化的特点,更重要的是页面组织发生了根本变化,HTML5的页面大纲不再只是根据h1、h2等标签进行划分,更多的是根据页面的章节，如section:作为一个普通的章节;article:适用于独立性较强的内容,比如网页文章的主体;nav:适用于导航内容;aside:可用于和页面主题相关的容器,像侧边栏、评论等辅助的元素

3.尽可能地使用伪元素

伪元素一般用于画图,特别是那种无关紧要的分割线、点之类的小元素

页面优化

1. 避免页面卡顿

(1). 拆分代码块
(2). 简化DOM模块
当DOM结构越复杂时,需要重绘的元素也就越多,尤其是那些需要做动画的,使用flex布局做动画会比float更加流畅

2. 加快页面打开速度

页面的打开速度对网站的优化有极大的意义,那么,如何评价一个页面打开得快不快,可以用两个指标描述,一个是ready的时间,另一个是load的时间

1.避免head标签JS堵塞
   所有放在head标签里的CSS和JS都会堵塞渲染,如果这些CSS和JS需要加载和解析很久的话,那么页面就空白了。
   解决方法一:把script放在body后面
   解决方法二:给script加defer属性,defer是HTML5新增的属性,会让资源加载优先级将会降为最低
2.减少head标签里的CSS资源
   由于CSS必须放在head标签里面,会堵塞页面渲染,若要加载很久,页面就会保持空白状态。所以要尽可能地减少CSS的代码量
   方案一:不要放太多base64放在CSS里面
   方案二:把CSS写成内联的,如果你的CSS只有10K或者20K,写成内联也未尝不可
3.优化图片
   方案一:使用响应式图片
   <img src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px" />
   方案二:延迟加载图片
4.压缩和缓存
5.DNS预读取
   <link rel="dns-prefecth" href="https://www.google,com">
6.HTML优化
   如把注释去掉,把行前缩进删掉
7.代码优化
   对自己写的代码做优化,提高运行速度

3. 增强用户体验

1.加Loading效果
  在一些加载可能比较久的地方做一个loading,这样可以缓和等待的焦急心情
2.加过渡动画效果
  例如:轮播的过渡效果;导航显示;弹框显示等等,需要注意的是动画效果不能做的太炫,除非页面是纯动画显示
3.单击和输入
  用户点击提交的时候,可以给按钮做一个效果,让人感觉按钮有被按下去;
  使用HTML5的input标签的时候,如果type="tel"时,弹出数字键盘,方便用户输入;

4. HTML5优化实践

1.使用图标替代雪碧图
  使用雪碧图的唯一有点就是可以减少浏览器的请求次数,但是它有缺点:高清屏会模糊、无法动态变化如hover时候变色。而使用图标字体可以完美解决上述问题,同时具备兼容性好、生成的文件小等优点
2.理解和使用CSS3动画
  性能不应该成为CSS动画的瓶颈,当浏览器的动画算法变的越来越好的时候,写CSS动画会越来越流畅
  在做动画时更多的使用transform结合animation,其实也可以使用clip-path结合transition。
	   例如: <img src="img" alt="">
		img{
			clip-path:circle(40% at 50% 50%);
			transition:clip-path 400ms ease
		}
		img:hover{
			clip-path:circle(75% at 50% 50%)
		}