前端性能优化
低眉
一只勤勤恳恳的前端狗。
展开
-
前端性能优化
减少HTTP请求:比如css精灵,懒加载压缩图片和使用图片Spirit技术(图片精灵)减少对DOM的操作CDN加速(最近的节点上)(内容分发网络)(就是将一些常用的文件,比如jq类库放在速度更快的服务器上,比如百度的cdn,提高加载速度)尽量使用css3动画(css3会开启GPU加速)requestAnimationFrame,加快动画速度。尽可能重绘(如果通过设置style属性改变结点...原创 2019-09-30 15:23:46 · 86 阅读 · 0 评论 -
如果一个大型网站有很多图片加载很慢,怎么优化
如果一个大型网站有很多图片加载很慢,怎么优化1.图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。2.如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。3.如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。4.如果图...原创 2019-09-26 13:44:36 · 3477 阅读 · 0 评论 -
图片的格式
图片的格式,有什么区别一、GIF(图形交换格式) GIF格式的图片最多只能保存256中颜色,该格式支持透明色,支持动画效果。二、JPEG(联合图像专家组) JPEG格式不支持透明色及动画,颜色可达1670种。三、PNG(网络可移植格式) PNG格式支持透明色,不支持动画,颜色从几种得到1670种。无压缩:无压缩的图片格式不对图片数据进行压缩处理,能够准确的呈...原创 2019-09-26 13:46:27 · 177 阅读 · 0 评论 -
rgba和opacity有什么区别
rgba和opacity有什么区别opacity属性的值,可以被其子元素继承,给父级div设置opacity属性,那么所有子元素都会继承这个属性,并且,该元素及其继承该属性的所有子元素的所有内容透明度都会改变。rgba()设置的元素,只对该元素的背景色有改变,并且,该元素的后代不会继承该属性。...原创 2019-09-26 13:43:12 · 325 阅读 · 0 评论 -
display:none和visiblity:hidden有什么区别
display:none和visiblity:hidden有什么区别1、display:none 不占页面空间,visiblity:hidden 占据原先页面空间。这里必须说明的是,元素不占页面空间后,取该元素或其内部元素的宽高值永远是0。如果想隐藏又想取到宽高值,那就得用visiblity:hidden。2、display:none 的子元素也一定无法显示,visiblity:...原创 2019-09-26 13:42:00 · 688 阅读 · 0 评论 -
常见浏览器内核
常见的浏览器,他们的内核是什么?浏览器用的内核,一般不外乎微软的IE内核和webkit内核。所谓内核,就是常驻内存、能够快速响应的那一部分核心代码,非内核代码都是要用到时再调入内存并执行的。webkit内核更小巧快速,但兼容性不如IE内核。所以有些浏览器是用的双内核,可以在高速模式和兼容模式间切换。a、IE(IE浏览器) : trident 内核 -ms-b、Firefox(火...原创 2019-09-26 13:37:41 · 176 阅读 · 0 评论 -
doctype是什么,有什么作用
DOCTYPE是什么,有什么作用<!DOCTYPE> 声明大小写不敏感。用 W3C 的验证器来检查是否编写了有效的 HTML / XHTML 文档<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个HTML 版本进行...原创 2019-09-26 13:36:23 · 1482 阅读 · 0 评论 -
px em rem
px是固定单位em相对于父元素rem相对于html根元素rem原理:rem的本质就是等比缩放,一般是基于宽度原创 2019-09-23 14:14:57 · 155 阅读 · 0 评论 -
前端页面构成
前端页面构成?分别有哪些功能?1)结构层(html)structural layer 由HTML或者XHTML之类的标记语言负责创建,即:标签;2)表示层(css)presentation layer 解决结构层如何显示的问题。3)行为层(js)behavior layer 内容如何对事件作出反应一类的问题解决。...原创 2019-09-30 15:38:06 · 581 阅读 · 0 评论