web前端排版基础优化

一、强调字体字体的设计与强调在网页当中相当重要，合适的排版和适当的字体强调，不仅可以让用户快速的抓住网站中的重点，同样可以增强网站对用户的吸引力二、单页面设计随着互联网的发展，用户的习惯更倾向于鼠标滚轮。在用户的体验和习惯方面来讲，与其在多个页面中来回点击查看，不如直接滚轮来的方便。三、网页色块设计随着互联网的发展和H5的出现，网站网页的排版方式越来越倾向于简洁大方，这最根本的原因在于：用户的视觉和心理。不同的色块放在一起形成强烈的对比，要么以纯文字形式，要么以方形照片配上文字形式，这两者在一定程度上刺激了用户的视觉兴趣，进而使用户继续探索。四、背景网页以什么样的方式作为背景呢?纯色?渐变?图片?这三种都是可以的，但以商业化为目的展示，用照片作为网站网页的背景，不仅可以达到展示的目的，而且还可以达到强烈的视觉表达效果。这种设计方式在时尚、品牌和旅游等行业最为常见。五、图片简约、设计时尚、颜色对比突出，表达清楚、突出目的的大图，是很多网站开发者所追捧的。同样与枯燥的文字相比，用户也更愿意继续观赏这样的网站。六、响应式设计随着手机和移动端设备广泛的被人们使用，响应式设计成为目前网站开发比不可少的内容。不仅能节省开发者的成本和时间，更能方便用户在不同尺寸的设备上畅通无阻的浏览你的网站。七、视差滚动让多层背景以不同的速度移动，形成运动视差的3D效果，这样的效果以后很可能会在H5的网站中更加常见和流行。

减少 HTTP 请求使用 HTTP使用服务端渲染静态资源使用 CDN将 CSS 放在文件头部，JavaScript 文件放 使用字体图标 iconfont 代替图片图标善用缓存，不重复加载相同的资源压缩文件图片优化(1)图片延迟加载(2) 响应式图片(3) 调整图片大小(4) 降低图片质量(5) 尽可能利用 CSS3 效果代替图片(6) 使用 webp 格式的图片 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码 减少重绘重排 使用事件委托 注意程序的局部性 if-else 对比 查找表 避免页面卡顿 使用 requestAnimationFrame 来实现视觉变化 使用 Web W 使用位操作 不要覆盖原生方法 降低 CSS 选择器的复杂性(1) 浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。(2) CSS 选择器优先级 使用 flexbox 而不是较早的布局模型 使用 transform 和 opacity 属性更改来实现动画 合理使用规则，避免过度优化    性能优化主要分为两类：加载时优化运行时优化