高端企业网站制作-一站式解决方案-河北乐客网站建设公司

网站定制

页面设计

网站设计制作一条龙

域名 + 空间 + 设计 + PC + 移动 + H5

网站模板下载

500+网站模板供您选择
价值千元模板不收取任何费用,免费下载.

我们的服务

公司以诚信服务对待每一位客户的售前售中售后.一言九鼎的态度。以科技创新的方法,认真务实的精神制造出每一个网站.

最新模板

  • square多功能商业公司wordpress主题
    207 免费模板
    Square是一个灵活的响应式多功能主题,兼容所有浏览器和设备,完全移动友好,具有许多功能。这是一个基于WordPress定制器的最小主题,允许您使用实时预览进行自定义。该主题可用于商业,企业,数字代理,个人,投资组合,摄影,视差,博客和杂志。Square是电子商务(WooCommerce)兼容,Polylang兼容,WPML,RTL,Retina Ready,SEO友好和支持bbPress和BuddyPress。更重要的是它是一个完整的主题。
    发布时间:2019-09-17 09:53:50
  • ENVO免费多用途WordPress主题
    189 免费模板
    Envo Multipurpose 是一个快速,干净,现代外观响应多用途,与有 WooCommerce 支持的 WordPress 主题。主题完全被加宽,因此用户可以通过使用易于使用的小工具来管理内容。主题与任何拖拽页面生成器,如 Elementor,KingComposer,Beaver Builder,SiteOrigin,Divi,Brizy,Visual Composer 等,并兼容所有的主要插件,如 WooCommerce,Yoast,Contact Form 7 等。
    发布时间:2019-09-17 09:17:50
  • Orfeo多用途响应式wordpress主题
    170 免费模板
    Orfeo 是一个具有多用途设计的响应 WordPress 主题。它很适合小型企业和公司业务,因为它可以通过现场定制器进行高度定制。您可以使用 Orfeo 创造餐馆、初创公司、自由职业者简历、创意机构、作品集、WooCommerce 或利基像体育、医疗、博客、时尚、律师等站点。它有一页 设计,Sendinblue 通讯整合,小工具化页脚和干净的外观。主题是兼容 Elementor Page Builder,Photo Gallery,Flat Parallax Slider,Travel Map;该主题是移动友好与之有良好的搜索引擎优化。
    发布时间:2019-09-16 17:34:13
  • Futurio免费多用途wordpress响应式主题
    273 免费模板
    Futurio 是一款轻量级,快速且可定制的免费多用途和 WooCommerce WordPress 主题,适用于商业,作品集,创意和摄影站点,电子商务商店,登陆页面,博客或 WooCommerce 店面。 Futurio 与所有页面构建器完美配合,如 Elementor,Beaver Builder,King Composer,Brizy,Visual Composer,SiteOrigin,Divi 或 Gutenberg,并支持大多数免费和优质 WordPress 插件,如WooCommerce,Jetpack,Contact Form 7,Yoast SEO 和更多。
    发布时间:2019-09-12 16:13:19
  • Zakra多用途wordpress响应式主题
    183 免费模板
    Zakra适用于个人博客,作品集,WooCommerce商店,商业站点和其他站点(如咖啡厅,水疗中心,慈善机构,瑜伽,婚礼,牙医,教育等)。与Elementor以及其他主要页面构建器一起使用,以便您可以创建所需的任何布局。主题是响应,Gutenberg兼容,SEO友好和主要的WordPress插件兼容。
    发布时间:2019-09-12 15:44:26
  • Hestia现代化企业创意wordpress主题
    157 免费模板
    Hestia是一个现代化 WordPress 主题。 该主题适合创意业务,小型企业(餐馆,婚礼策划人员,运动/医疗店),创业公司,企业业务,在线代理与公司,电子商务(WooCommerce)和自由职业者。 该主题具有多用途单页设计,页脚里使用小工具功能,博客/新闻页面和干净的外观,和各种插件兼容:Flat Parallax Slider, Photo Gallery, Travel Map and Elementor Page Builder。 主题拥有了响应式设计,兼容 WPML 与 Retina,SEO优化,并使用 Material Kit 进行设计。
    发布时间:2019-09-12 15:05:03

客户案例

专业的网站设计制作团队,坚持原创,尊重设计.

您不是第一个找我们做全网营销的客户,我们已经得到了很多客户的认可!

乐客网站制作案例-上海国柔电缆
乐客网站制作案例-上海国柔电缆

乐客网站制作案例-上海国柔电缆

河北乐客互联
  •  14

乐客网站制作案例-上海国柔电缆

乐客网站制作案例:国柔电缆集产品研发、生产、销售于一体、拥有优良的生产设备和完善的检测手段,健全的管理体系、严格的作业流程、严谨的品质态度与优良的服务管理,确保优质高效的服务于客户。得到了国内外客户广泛认可与厚爱,确保了产品的优良品质。

  • 客户名称:上海国柔电缆
  • 更新日期:2020-09-16 11:08:01

项目介绍

国柔电缆集产品研发、生产、销售于一体、拥有优良的生产设备和完善的检测手段,健全的管理体系、严格的作业流程、严谨的品质态度与优良的服务管理,确保优质高效的服务于客户。得到了国内外客户广泛认可与厚爱,确保了产品的优良品质。

颜色选择

#28a745

#00c9a7

#377dff

#677788

项目预览

乐客网站制作案例:上海国柔电缆

乐客网站制作案例:上海国柔电缆

乐客网站建设案例-名雕装饰品牌网站
乐客网站建设案例-名雕装饰品牌网站

乐客网站建设案例-名雕装饰品牌网站

河北乐客互联
  •  14

乐客网站建设案例-名雕装饰品牌网站

乐客网站制作案例:名雕装饰股份有限公司始建于1999年,经过十余年的稳健发展,名雕已成为集家居设计服务、工程施工服务、公共装饰设计服务、材料物流配送、家私生产、售后服务、专业教育培训于一体的全国知名家居装饰企业。

  • 客户名称:名雕装饰
  • 更新日期:2020-09-16 10:03:28

项目介绍

名雕装饰股份有限公司始建于1999年,经过十余年的稳健发展,名雕已成为集家居设计服务、工程施工服务、公共装饰设计服务、材料物流配送、家私生产、售后服务、专业教育培训于一体的全国知名家居装饰企业。公司主营业务是为中大户型住宅客户提供专业、高品质的一体化装饰服务,是国内知名的以设计为特色的“一体化家居解决方案”服务商。旗下共拥有名雕装饰、名雕丹迪、名雕盛邦、名启生态家居产业园、美家世邦建材体验馆、名雕职业技能培训六大品牌服务机构。

总部设在深圳,并在深圳、东莞、中山、江门、佛山、广州、重庆、长沙、惠州等地设有40多家直营装饰设计服务机构。多年来名雕坚持“规范化、专业化、集团化”的发展道路,信守“忠诚、务实、沟通、稳健”的经营之道,恪守“原创设计为先”和“客户利益至上”原则,深受广大客户、政府主管部门、行业协会、媒体等社会各界的高度认可与信赖,先后荣获国家工程设计与施工壹级资质、全国装饰优秀标兵企业、中国建筑装饰行业质量与服务诚信企业、广东省著名商标企业等众多殊荣。在装饰设计行业领先全国的深圳特区,更被誉为装饰行业知名品牌。

项目预览

乐客网站建设案例-美莱全屋顶
乐客网站建设案例-美莱全屋顶

乐客网站建设案例-美莱全屋顶

河北乐客互联
  •  2

乐客网站建设案例-美莱全屋顶

乐客网站建设案例-美莱全屋顶项目介绍:从1986年建厂至今,MIDAS美莱一直致力于“让更多人实现美好家居生活梦想”的使命而不懈努力。现已成为集研发、设计、制造、营销、服务于一体的全屋定制领导品牌。MIDAS美莱专于精研,坚持原创,以用户的生活梦想为中心,以人为本的设计理念,为每一个家庭提供个性、高雅、多元化的家居定制解决方案。

  • 客户名称:美莱全屋顶
  • 更新日期:2020-07-21 09:54:44

项目介绍

从1986年建厂至今,MIDAS美莱一直致力于“让更多人实现美好家居生活梦想”的使命而不懈努力。现已成为集研发、设计、制造、营销、服务于一体的全屋定制领导品牌。MIDAS美莱专于精研,坚持原创,以用户的生活梦想为中心,以人为本的设计理念,为每一个家庭提供个性、高雅、多元化的家居定制解决方案。

整体风格

整体版面的风格主要以简约大气为主,网站的整体色调主要以灰色为主,版面的排版主要采用简洁的分块化形式展示,通过简约的深灰色灰和白色背景色块相互间隔区分内容模块,增强页面的层次感。

整体布局

在页面设计中使用新鲜的区域划分功能展示设计可以方便呈现不同的信息,方便用户进行快速选择和视觉聚焦,丰富的交互设计,层次分明、逻辑清晰,增加企业和用户之间的交流,有效提升用户体验,并凸出企业实力。

项目预览

乐客网站建设案例-美莱全屋顶

乐客网站建设案例-美莱全屋顶

乐客网站建设案例-名杰装饰
乐客网站建设案例-名杰装饰

乐客网站建设案例-名杰装饰

河北乐客互联
  •  0

乐客网站建设案例-名杰装饰

乐客网站建设案例-名杰装饰:作为家居的行业的领航人,名杰装饰一直给人诚恳舒适给人眼前一亮的感觉,所以这次网站保持原有的品牌的调性进行设计,让整个画面充满温馨的感觉让人更加亲切的体验。

  • 客户名称:名杰装饰
  • 更新日期:2020-06-23 17:22:47

项目介绍

作为家居的行业的领航人,名杰装饰一直给人诚恳舒适给人眼前一亮的感觉,所以这次网站保持原有的品牌的调性进行设计,让整个画面充满温馨的感觉让人更加亲切的体验。

每个模块均放代表名杰文化的宣传语,丰富的案例展示凸显公司实力,贴近用户体验的点缀与宣传语结合突出了名杰注重细节的发展理念,另外整个页面全方位展示了公司的各方面优势,进一步彰显企业的真正实力。网站整体风格结合VI设计,以专业、大气为主,红色为主色调,融入logo元素作为点缀,带给用户不一样的视觉体验,能很好的带领用户了解企业,并体现出企业的专业形象。

网站内容上主要以案例展示、工地展示、获取报价、设计团队为主要的展示内容,让浏览者能够全面的了解名杰品牌风格和公司实力。

项目预览

乐客网站建设案例-名杰装饰

乐客网站建设案例-名杰装饰


乐客网站建设案例-自然优品网站建设
乐客网站建设案例-自然优品网站建设

乐客网站建设案例-自然优品网站建设

河北乐客互联
  •  0

乐客网站建设案例-自然优品网站建设

乐客网站建设案例:自然优品NATURE HOME是大自然家居集团(香港股票代码2083)旗下公司,主要经营:家居软装、地板辅助产品、木质产品油漆和修复工具等业务。

  • 客户名称:名杰装饰
  • 更新日期:2020-05-28 15:09:18

项目介绍

自然优品NATURE HOME是大自然家居集团(香港股票代码2083)旗下公司,主要经营:家居软装、地板辅助产品、木质产品油漆和修复工具等业务。聚焦北欧风格家居,致力于为消费者打造自然、简约、精致的生活方式。旗下品牌门店有nordic gallery,nestnordic,fynd,经营品类涵盖了北欧原创设计家具、灯具灯饰、家居配饰、窗帘布艺、沙发布艺、收纳整理用品、软装搭配设计、智能家居产品等海量产品资源,自然优品NATURE HOME旨在成为国内北欧风格家居第一品牌。优网科技再一次与大自然集团达成愉快的合作,双方在沟通和协调合作上都十分顺利。

网页设计整体运用灰棕等莫兰迪色系,以及产品配图的衬托,营造出浓浓的北欧式温馨感。版面布局整齐,有序,整体浏览舒畅。广州网站建设中将页面动态效果与设计完美结合,产品模块可指向切换产品图展示,交互效果流畅。

项目预览

乐客网站建设案例-自然优品网站建设

乐客网站建设案例-自然优品网站建设

乐客网站建设案例-蟹行天下
乐客网站建设案例-蟹行天下

乐客网站建设案例-蟹行天下

河北乐客互联
  •  0

乐客网站建设案例-蟹行天下

乐客网站建设案例:蟹行天下作为中央电视台的合作伙伴,实力和口碑在业内也是非常不错,网站整站设计使用黑色及辅助色金色使网站更大气高端,随着手机和平板的增多,人们跟喜好在手机和平板上访问网站,技术上使用HTML5+css3,响应式网站设计的架构让网站能在平板、手机,和电脑上访问。​

  • 客户名称:蟹行天下
  • 更新日期:2020-05-21 15:29:44

项目介绍

蟹行天下大闸蟹企业官网制作是红旗网络打造的又一大型知名的企业官网,蟹行天下作为中央电视台的合作伙伴,实力和口碑在业内也是非常不错,网站整站设计使用黑色及辅助色金色使网站更大气高端,随着手机和平板的增多,人们跟喜好在手机和平板上访问网站,技术上使用HTML5+css3,响应式网站设计的架构让网站能在平板、手机,和电脑上访问。

项目预览

乐客网站建设案例-蟹行天下

乐客网站建设案例-蟹行天下

乐客网站建设案例-广州骏企驿站
乐客网站建设案例-广州骏企驿站

乐客网站建设案例-广州骏企驿站

河北乐客互联
  •  5

乐客网站建设案例-广州骏企驿站

乐客网站建设案例:广州骏企驿站简介-骏企驿站强调服务的专业性,在财税服务上,聘请注册会计师、注册税务师、高级会计师、中级会计师作为服务人员,以此解决创业者对于中介代理服务公司的信任问题。 骏企驿站凭借着不断开拓创新、与时俱进的精神,努力服务好每一个客户的宗旨,迅速地发展壮大,目前、已成立六家子公司。

  • 客户名称:广州骏企驿站
  • 更新日期:2020-05-19 14:59:01

项目介绍

骏企驿站强调服务的专业性,在财税服务上,聘请注册会计师、注册税务师、高级会计师、中级会计师作为服务人员,以此解决创业者对于中介代理服务公司的信任问题。 骏企驿站凭借着不断开拓创新、与时俱进的精神,努力服务好每一个客户的宗旨,迅速地发展壮大,目前、已成立六家子公司。

项目预览

乐客网站建设案例-广州骏企驿站

乐客网站建设案例-广州骏企驿站

乐客网站建设案例-上海室内设计网站建设
乐客网站建设案例-上海室内设计网站建设

乐客网站建设案例-上海室内设计网站建设

河北乐客互联
  •  7

乐客网站建设案例-上海室内设计网站建设

乐客网站建设案例:建司至今在酒店、餐饮、商业地产、休闲娱乐、博物馆、 展览中心等业态空间与公共空间设计经典案例屡现,在旧建筑改造、样板房设计、街区业态规划、文化主题空间和城市综合体概念策划等诸多领域佳绩斐然,卓越的设计创新能力与专业的商业空间整合解决能力令公司品牌效应享誉业界。

  • 客户名称:上海室内设计网站建设
  • 更新日期:2020-05-15 15:39:08

项目介绍

建司至今在酒店、餐饮、商业地产、休闲娱乐、博物馆、 展览中心等业态空间与公共空间设计经典案例屡现,在旧建筑改造、样板房设计、街区业态规划、文化主题空间和城市综合体概念策划等诸多领域佳绩斐然,卓越的设计创新能力与专业的商业空间整合解决能力令公司品牌效应享誉业界。

项目预览

乐客网站建设案例-上海室内设计网站建设

乐客网站建设案例-上海室内设计网站建设

乐客网站建设案例-上海兰石医疗
乐客网站建设案例-上海兰石医疗

乐客网站建设案例-上海兰石医疗

河北乐客互联
  •  6

乐客网站建设案例-上海兰石医疗

一路时尚形象设计学院,为《一带一路国际时尚周》指定合作单位,积极响应国家在职业技能人才培养方面的号召,成立一路时尚国际形象设计学院。总部面积近10000㎡(含3000㎡健身场地,500㎡露天花园,咖啡厅),可容纳5000名学生,是目前国内规模较大的形象设计学院。

  • 客户名称:上海兰石医疗
  • 更新日期:2020-05-11 17:14:42

项目介绍

一路时尚形象设计学院,为《一带一路国际时尚周》指定合作单位,积极响应国家在职业技能人才培养方面的号召,成立一路时尚国际形象设计学院。总部面积近10000㎡(含3000㎡健身场地,500㎡露天花园,咖啡厅),可容纳5000名学生,是目前国内规模较大的形象设计学院。

项目预览

乐客网站建设案例-上海兰石医疗

乐客网站建设案例-上海兰石医疗

years in business
59
team members
Clients Stats Icon
650+

关键词数量
Project Stats Icon
24 hour

工作时间
User Stories Stats Icon
220+

操作数量
Commits Stats Icon
1000+

用户咨询
我们的愿景【让客户的客户觉得满意】
河北乐客互联网络科技有限公司创立于2019年3月,是一家专注SEO、网站优化、网站建设、网站制作的互联网公司,虽然是才成立半年的新公司,但是每一位成员实际入行都已经4-5年的时间

乐客互联
by 乐客互联

我们的愿景【让客户的客户觉得满意】

河北乐客互联
  •  200

我们的愿景【让客户的客户觉得满意】

发布时间:2019-07-18 17:04:10



河北乐客互联网络科技有限公司创立于2019年3月,是一家专注SEO、网站优化、网站建设、网站制作的互联网公司,虽然是才成立半年的新公司,但是每一位成员实际入行都已经4-5年的时间;

我们是希望在这互联网的大潮当中做那个忠于自己和用户的企业,并非只为盈利而去服务,而是用户需要我们,我们帮用户解决了他们真正的问题;

处在行业内其实看到过很多很多利益驱使前行的公司,而我们更想以客户的满意度作为驱使我们前行的动力,乐客互联网络成员都深信一个道理,让用户满意,赚钱只是水到渠成的一件事,所以我们把中心都放在了用户服务上;

那么本网站的服务主体是围绕着网站建设、网站制作、高端网站设计,我们的优势在于本身精通SEO优化,了解什么样子的网站可以更好的满足搜索引擎优化的需求,企业只做一个网站意义是不大的,能在搜索引擎上有一定的排名才会让网站有更大的价值,才可以提升企业品牌的知名度,定位不同,所以价格各不相同,就像有的建站公司可以500元建站一样,您时不时需要面对网站挂马,被镜像等原因,并且问题多了,建站公司是不想在为用户服务的,因为利润太低。

乐客互联所用的服务器都是阿里云的服务器,即便是不能备案的网站同样是用的阿里云香港的服务器,十分的安全,如果您想建站,但是不知道选择哪家建站公司的话不如和我们合作,相信我们的服务会让您满意!

河北乐客互联LOGO


使用媒体查询优化 CSS 背景图像
许多站点请求大量资源(如图像)未针对某些屏幕进行优化,并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是向不同屏幕提供定制样式表和资产的一种流行技术,以减少传输给用户的数据量并提高页面加载性能。

乐客互联
by 乐客互联

使用媒体查询优化 CSS 背景图像

河北乐客互联
  •  6

使用媒体查询优化 CSS 背景图像

发布时间:2020-11-27 09:53:03


许多站点请求大量资源(如图像)未针对某些屏幕进行优化,并发送包含某些设备永远不会使用的样式的大型 CSS 文件。使用媒体查询是向不同屏幕提供定制样式表和资产的一种流行技术,以减少传输给用户的数据量并提高页面加载性能。

本文将演示如何使用媒体查询发送仅与所需的图像一样大的图像,这种技术通常称为响应式图像

先决条件

本指南假定你熟悉 Chrome 开发工具。如果你愿意,可以使用其他浏览器的 DevTools 代替。你只需将本指南中的 Chrome DevTools 屏幕截图映射到你选择的浏览器中的相关功能。

了解响应式背景图像

首先,分析未优化网络流量的演示:

  1. 在新的 Chrome 选项卡中打开未优化的演示。
  2. Control+Shift+J(或 Mac上 的Command+Option+J)打开 DevTools。
  3. 单击“网络”选项卡。
  4. 重新加载页面。

你会看到唯一请求的图像是background-desktop.jpg,它的大小为 1006KB:

没有进行优化的 CSS 文件

调整浏览器窗口的大小,并注意到网络日志没有显示页面正在发出的任何新请求。这意味着对所有屏幕大小使用相同的图像背景。

你可以在 style.css 中看到控制背景图像的样式:

body { 
  background-position: center center; 
  background-attachment: fixed; 
  background-repeat: no-repeat; background-size: cover; 
  background-image: url(images/background-desktop.jpg); 
} 

以下是每个使用的属性的含义:

  • background-position: center center:垂直和水平居中图像。
  • background-repeat: no-repeat:仅显示一次图像。
  • background-attachment: fixed:避免滚动背景图像。
  • background-size: cover:调整图像大小以覆盖整个容器。
  • background-image: url(images/background-desktop.jpg):图像的 URL。

合并后,这些样式会告诉浏览器将背景图像调整到不同的屏幕高度和宽度。这是实现反应迅速背景的第一步。

对于所有屏幕大小使用单个背景图像都有一些限制:

  • 发送的字节量相同,无论屏幕大小如何,即使对于某些设备(如手机),更小、更轻量级的图像背景看起来同样好。通常,你希望发送在用户屏幕上仍然看起来良好的尽可能小的图像,以提高性能并保存用户数据。
  • 在较小的设备中,图像将被拉伸或剪切以覆盖整个屏幕,从而可能将背景的相关部分隐藏给用户。

下一节将学习如何根据用户的设备应用优化来加载不同的背景图像。

使用媒体查询

使用媒体查询是声明仅适用于特定媒体或设备类型的样式表的常见技术。它们是通过使用@media规则实现的,该规则允许你定义一组断点,其中定义了特定的样式。当满足@media规则定义的条件(例如,特定的屏幕宽度)时,将应用在断点内定义的一组样式。

以下步骤可用于将媒体查询应用到站点,以便根据请求页面的设备的最大宽度使用不同的图像。

  • style.css中删除包含背景图像 URL 的行:

    body { 
      background-position: center center; 
      background-attachment: fixed; 
      background-repeat: no-repeat; background-size: cover; 
      background-image: url(images/background-desktop.jpg); 
    } 
  • 接下来,根据移动屏幕、平板电脑和桌面屏幕通常具有的像素的通用尺寸,为每个屏幕宽度创建一个断点:

    对于移动端:

    @media (max-width: 480px) {
        body {
            background-image: url(images/background-mobile.jpg);
        }
    } 

    对于平板电脑:

    @media (min-width: 481px) and (max-width: 1024px) {
        body {
            background-image: url(images/background-tablet.jpg);
        }
    } 

    对于桌面设备:

    @media (min-width: 1025px) {
        body {
    	    background-image: url(images/background-desktop.jpg);
       }
    } 

测试不同的设备

接下来在不同的屏幕尺寸上和模拟移动设备测试:

  • 在一个新的 Chrome 标签页中打开优化后的站点。
  • 缩小窗口(小于 480px)。
  • Control+Shift+J(或 Mac 上的Command+Option+J)打开 DevTools。
  • 单击 Network 选项卡。
  • 重新加载页面。请注意background-mobile.jpg图像是如何被请求的。
  • 让你的窗口更宽。当宽度超过 480px 时,请注意background-tablet.jpg是如何被请求的。当宽度超过 1025px 时,请注意background-desktop.jpg是如何被请求的。

更改浏览器屏幕的宽度时,将请求新图像。

特别是当宽度低于移动断点中定义的值(480px)时,你会看到以下网络日志:

新的移动背景的大小比桌面背景小 67%

总结

在本指南中,你学习了如何应用媒体查询来请求背景图像,这些背景图像是根据特定的屏幕大小定制的,并在移动电话等较小的设备上访问站点时节省字节。你使用了@media规则来实现一个响应式背景。所有浏览器都广泛支持这项技术。一个新的 CSS 特性:image-set(),可以使用更少的代码行来实现同样的目的。在撰写本文时,并不是所有浏览器都支持该特性,但是你可能希望关注采用该特性的发展过程,因为它可能是该技术的一种有趣的替代方法。

将现代代码提供给现代浏览器以加快页面加载速度
建立在所有主要浏览器上都能正常运行的网站是开放式网络生态系统的核心宗旨。但是,这意味着要进行额外的工作,以确保计划要定位的每个浏览器都支持你编写的所有代码。如果要使用新的 JavaScript 语言功能,则需要为尚不支持这些功能的浏览器将这些功能转换为向后兼容格式。

乐客互联
by 乐客互联

将现代代码提供给现代浏览器以加快页面加载速度

河北乐客互联
  •  11

将现代代码提供给现代浏览器以加快页面加载速度

发布时间:2020-11-18 17:11:13


建立在所有主要浏览器上都能正常运行的网站是开放式网络生态系统的核心宗旨。但是,这意味着要进行额外的工作,以确保计划要定位的每个浏览器都支持你编写的所有代码。如果要使用新的 JavaScript 语言功能,则需要为尚不支持这些功能的浏览器将这些功能转换为向后兼容格式。

Babel 是使用最广泛的工具,用于将包含较新语法的代码编译为不同的浏览器和环境(例如 Node)可以理解的代码。本指南假定你正在使用 Babel,因此如果你尚未使用 Babel,则需要按照设置说明将其包含在应用程序中。选择webpackBuild Systems,如果你正在使用的 WebPack 为你的应用程序模块捆绑。

有趣的事实:Lebab 是一个独立的库,其功能与 Babel 相反。它将较旧的代码转换为较新的语法。

要使用 Babel 仅转换用户所需的内容,你需要:

  1. 确定要定位的浏览器。
  2. 使用@babel/preset-env适当的浏览器目标。
  3. 使用<script type="module">停止发送 transpiled 代码不需要它的浏览器。

确定要定位的浏览器

在开始修改应用程序中代码的编译方式之前,你需要确定哪些浏览器可以访问你的应用程序。分析你的用户当前正在使用哪些浏览器,以及你打算针对哪些浏览器做出明智的决定。

使用 @ babel /preset-env

编译代码通常会导致文件大于原始文件,而文件大小大于原始文件的大小。通过最大程度地减少编译量,可以减少捆绑软件的大小,从而提高网页的性能。

Babel 提供了许多将插件捆绑在一起的预设,而不是包括特定的插件来选择性地编译你正在使用的某些语言功能。使用 @ babel / preset-env 仅包含你计划定位的浏览器所需的转换和 polyfill。

@babel/preset-envpresets阵列中包含 Babel 配置文件.babelrc

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "targets": ">0.25%"
     }
   ]
 ]
} 

使用该targets字段可通过向该字段添加适当的查询来指定要包括的浏览器版本browsers@babel/preset-env 与浏览器列表集成,这是一个在不同工具之间共享的开源配置,用于定位浏览器。兼容查询的完整列表在 browserslist 文档中。另一个选择是使用.browserslistrc文件列出你希望定位的环境。

">0.25%"值告诉 Babel 仅包含支持占全球使用量的 0.25%以上的浏览器所需的转换。这样可确保你的软件包中不包含用于极少数用户使用的浏览器的不必要的代码转换。

在大多数情况下,这是比使用以下配置更好的方法:

"targets": "last 2 versions" 

"last 2 versions"值将为每个浏览器的后两个版本转换代码 ,这意味着将为已停止使用的浏览器(例如 Internet Explorer)提供支持。如果你不希望使用这些浏览器来访问应用程序,则可能会不必要地增加捆绑软件的大小。

最终,你应该选择适当的查询组合,以仅定位满足你需求的浏览器。

启用现代的错误修复

@babel/preset-env将多个 JavaScript 语法功能分组到集合中,并根据指定的目标浏览器启用 / 禁用它们。尽管这很好用,但是当目标浏览器仅包含一个功能的错误时,将转换整个语法功能的集合。这通常会导致转换后的代码多于必要。

最初作为一个单独的预设中, 错误修正选项中@babel/preset-env 解决这个问题,通过将现代语法,在某些浏览器坏到最接近的等效语法未在这些浏览器打破。结果是几乎相同的现代代码,并进行了一些小的语法调整,以保证在所有目标浏览器中的兼容性。要使用此优化,请确保已@babel/preset-env安装 7.10 或更高版本,然后将该 bugfixes属性设置 为true

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "bugfixes": true
     }
   ]
 ]
} 

在 Babel 8 中,bugfixes默认情况下将启用该选项。

使用<script type="module">

JavaScript 模块或 ES 模块是所有主要浏览器都支持的相对较新的功能 。你可以使用模块来创建可以从其他模块导入和导出的脚本,但是也可以将它们与@babel/preset-env仅用于支持它们的目标浏览器一起使用。

与其查询特定的浏览器版本或市场份额,不如"esmodules" : true.babelrc文件targets字段内指定。

{
   "presets":[
      [
         "@babel/preset-env",
         {
            "targets":{
               "esmodules": true
            }
         }
      ]
   ]
} 

在支持 JavaScript 模块的环境中,已经支持使用 Babel 编译的许多更新的 ECMAScript 功能。因此,通过这样做,你可以简化确保仅将转码的代码用于实际需要的浏览器的过程。

支持模块的浏览器将忽略具有nomodule属性的脚本。相反,不支持模块的浏览器会使用忽略脚本元素 type="module"。这意味着你可以包括一个模块以及一个编译后备。

理想情况下,应包含应用程序的两个版本脚本,如下所示:

 <script type="module" src="main.mjs"></script>
  <script nomodule src="compiled.js" defer></script> 

支持模块的浏览器将获取,执行main.mjs和忽略compiled.js。不支持模块的浏览器则相反。

默认情况下推迟模块脚本。该 defer 属性已添加到 nomodule 脚本中以实现相同的行为。

如果使用 webpack,则可以在配置中为应用程序的两个不同版本设置不同的目标:

  • 仅适用于支持模块的浏览器的版本。
  • 包含可在任何旧版浏览器中运行的已编译脚本的版本。由于转译需要支持更广泛的浏览器,因此文件大小更大。

尽管此 HTML 方法可以提供性能优势,但已发现某些浏览器在同时指定模块脚本和无模块脚本时会进行双重提取。杰森・米勒(Jason Miller)的《现代脚本加载》(Modern Script Loading)更详细地说明了这一点,并介绍了一些可用于规避此问题的选项。

使用延迟加载来提高网站加载速度
网站中的图像和视频部分可能很重要。如果图像和视频资源过于臃肿时,会对访问者造成很大的困扰。幸运的是,延迟加载是一种可以减少初始页面有效负载和加载时间,而且不会损失访问者的时间。

乐客互联
by 乐客互联

使用延迟加载来提高网站加载速度

河北乐客互联
  •  9

使用延迟加载来提高网站加载速度

发布时间:2020-11-17 16:11:38


网站中的图像和视频部分可能很重要。如果图像和视频资源过于臃肿时,会对访问者造成很大的困扰。幸运的是,延迟加载是一种可以减少初始页面有效负载和加载时间,而且不会损失访问者的时间。

什么是延迟加载?

延迟加载是一种在页面加载时推迟非关键资源加载的技术。而是在需要时加载这些非关键资源。在涉及图像的地方,“非关键” 通常与 “屏幕外” 同义。如果你使用了 Lighthouse 并研究了一些改进的机会,那么你可能已经以 Defer offscreen images audit 的形式看到了该领域的一些指导 :

Lighthouse 的性能审核之一是识别屏幕外图像,这些图像适合延迟加载
Lighthouse 的性能审核之一是识别屏幕外图像,这些图像适合延迟加载

你可能已经看到了延迟加载的实际效果,它看起来像这样:

  • 访问页面,并在阅读内容时开始滚动。
  • 在某个时候,将占位符图像滚动到视口中。
  • 占位符图像突然被最终图像替换。

可以在流行的发布平台 Medium 上找到图像延迟加载的示例,该平台 在页面加载时加载轻量级的占位符图像,并在滚动到视口时将它们替换为延迟加载的图像。

图像延迟加载的示例。占位符图像在页面加载时(左)加载,当滚动到视口时,最终图像在需要时加载
图像延迟加载的示例。占位符图像在页面加载时(左)加载,当滚动到视口时,最终图像在需要时加载

如果你不熟悉延迟加载,你可能会想知道该技术的实用性以及它的好处。请仔细阅读本文,找出答案!

为什么要延迟加载图像或视频而不是仅加载它们?

因为你可能正在加载用户可能永远看不到的内容。这是有问题的,原因如下:

  • 浪费数据。在不限流量的连接上,这并不是最糟糕的事情(尽管你可能会使用宝贵的带宽来下载其他用户确实会看到的资源)。但是,在有限的数据计划中,加载用户从未见过的东西实际上可能是在浪费他们的钱。
  • 浪费处理时间,电池和其他系统资源。下载媒体资源后,浏览器必须对其进行解码并在视口中呈现其内容。

延迟加载图像和视频可减少初始页面加载时间,初始页面权重和系统资源使用率,所有这些都会对性能产生积极影响。

实施延迟加载

有多种方法可以实现延迟加载。你选择的解决方案必须考虑到你所支持的浏览器以及你要延迟加载的内容。

现代浏览器实现了内置的延迟加载功能,可以使用 img 和 iframe 上的 loading 属性启用该功能。为了提供与旧版浏览器的兼容性或在没有内置延迟加载的情况下对元素执行延迟加载,你可以使用自己的 JavaScript 实现解决方案。还有许多现有的库可以帮助你完成此任务。有关所有这些方法的完整详细信息,请参见本网站上的文章:

结论

请谨慎使用延迟加载,延迟加载图像和视频会有效地降低站点的初始加载时间和页面有效负载。用户不会产生不必要的网络活动和他们可能从未见过的媒体资源的处理成本,但是如果愿意,他们仍然可以查看这些资源。

为视频设置延迟加载
与图像元素一样,你也可以延迟加载视频。视频通常会加载 video 元素(尽管出现了一种实现方式有限的替代方法 )。但是,如何延迟加载 video 取决于用例。让我们讨论一些需要不同解决方案的场景。

乐客互联
by 乐客互联

为视频设置延迟加载

河北乐客互联
  •  7

为视频设置延迟加载

发布时间:2020-11-16 10:55:25


与图像元素一样,你也可以延迟加载视频。视频通常会加载 <video> 元素(尽管出现了一种实现方式有限的替代方法 )。但是,如何延迟加载 <video> 取决于用例。让我们讨论一些需要不同解决方案的场景。

禁止视频自动播放

对于由用户启动播放的视频(即不 自动播放的视频),可能需要在 <video> 元素上指定 preload 属性:

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video> 

上面的示例使用preload值为的属性none来防止浏览器预加载任何视频数据。该poster 属性为<video>元素提供一个占位符,该占位符将在视频加载时占用空间。这样做的原因是,加载视频的默认行为可能因浏览器而异:

  • 在 Chrome 中,默认preload值为auto,但从 Chrome 64 开始,现在默认为metadata。即便如此,在桌面版 Chrome 上,也可以使用Content-Range标题预加载一部分视频。Firefox,Edge 和 Internet Explorer 11 的行为类似。
  • 与台式机上的 Chrome 一样,Safari 的 11.0 台式机版本将预加载一系列视频。从版本 11.2 开始,仅视频元数据被预加载。在 iOS 上的 Safari 中,不会预加载视频。
  • 当数据保护模式被激活,preload 默认为 none

因为关于浏览器的默认行为preload不是一成不变的,所以明确是你最好的选择。在这种情况下,当用户启动播放时,使用preload="none"是在所有平台上推迟视频加载的最简单方法。该preload属性不是推迟加载视频内容的唯一方法。

通过视频预加载进行快速播放可能会给你一些思路和见解,以帮助你使用 JavaScript 进行视频播放。

不幸的是,当你要使用视频代替 GIF 动画时,它没有用,这将在后面介绍。

用 GIF 动画代替视频

尽管动画 GIF 广泛使用,但它们在许多方面均不如视频等效,尤其是在文件大小方面。动画 GIF 可以扩展到几兆字节的数据范围。具有类似视觉质量的视频往往要小得多。

使用<video>元素代替动画 GIF 并不像<img>元素那样简单。动画 GIF 具有三个特征:

  1. 它们在加载时会自动播放。
  2. 它们不断循环。
  3. 他们没有音轨。

使用<video>元素实现此目标看起来像这样:

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video> 

但是如何进行延迟加载呢?Chrome 会为你延迟加载视频,但你不能指望所有浏览器都能提供这种优化的行为。根据你的听众和应用程序要求,你可能需要自己处理问题。首先,相应地修改你的 <video> 标记:

<video autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video> 

你会注意到添加了 poster 属性,该属性使你可以指定占位符以占据 <video> 元素的空间,直到视频被延迟加载为止。与 <img> 延迟加载示例一样,将视频 URL 存储 data-src 在每个 <source> 元素的属性中。从那里开始,使用 JavaScript 代码类似于基于 Intersection Observer 的图像延迟加载示例:

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
}); 

延迟加载<video>元素时,需要遍历所有子 <source>元素并将其data-src属性翻转为src属性。完成此操作后,你需要通过调用元素的load方法来触发视频的加载,然后媒体将根据该autoplay属性自动开始播放。

使用此方法,你可以得到一个模拟动画 GIF 行为的视频解决方案,但是不会像动画 GIF 那样产生大量的数据使用量,因此你可以延迟加载该内容。

延迟加载库

以下库可以帮助你延迟加载视频:

  • lozad.js 是仅使用 “IntersectionObserver” 的超轻量级选项。因此,它具有很高的性能,但需要先进行填充,然后才能在较旧的浏览器上使用它。
  • yall.js 是一个使用 Intersection Observer 并回退到事件处理程序的库。与 IE11 和主要浏览器兼容。
  • 如果你需要特定于 React 的延迟加载库,可以考虑 react-lazyload。尽管它不使用 Intersection Observer,但确实为习惯于使用 React 开发应用程序的用户提供了一种熟悉的延迟加载图像的方法。

这些延迟加载库中的每一个都有充分的文档记录,并为你的各种延迟加载工作提供了大量标记模式。

为图片使用延迟加载(懒加载)
由于 HTML 作为 img 标签或 CSS 背景图像内联在 HTML 中,因此图像可以出现在网页上。在本文中,你将发现如何延迟加载两种类型的图像。

乐客互联
by 乐客互联

为图片使用延迟加载(懒加载)

河北乐客互联
  •  10

为图片使用延迟加载(懒加载)

发布时间:2020-11-13 17:51:30


由于 HTML 作为<img>元素或 CSS 背景图像内联在 HTML 中,因此图像可以出现在网页上。在本文中,你将发现如何延迟加载两种类型的图像。

图像懒加载

最常见的延迟加载候选是<img>元素中使用的图像。对于嵌入式图像,我们提供了三种用于延迟加载的选项,可以将它们组合使用,以实现跨浏览器的最佳兼容性:

  • 使用浏览器级别的延迟加载
  • 使用路口观察器
  • 使用滚动和调整大小事件处理程序

使用浏览器级别的延迟加载

Chrome 和 Firefox 都支持带有该loading属性的延迟加载。此属性可以添加到<img>元素,也可以添加到<iframe>元素。值lazy告诉浏览器立即将图像加载到视口中,并在用户在其附近滚动时获取其他图像。

注意<iframe loading="lazy">当前是非标准的。虽然已在 Chromium 中实施,但尚无规范,一旦使用,将来可能会进行更改。我们建议你不要使用loading属性来延迟加载 iframe,直到该属性成为规范的一部分。

有关浏览 器支持的详细信息,请参见 loading MDN 的浏览器兼容性表的字段 。如果浏览器不支持延迟加载,则该属性将被忽略,并且图像将照常加载。

对于大多数网站,将此属性添加到嵌入式图像中将提高性能,并节省用户加载他们可能永远不会滚动到的图像。如果你有大量图像,并且想要确保不支持延迟加载的浏览器用户受益,则需要将其与下面介绍的一种方法结合使用。

使用视图检查

为了填充<img>元素的延迟加载,我们使用 JavaScript 来检查元素是否在视口中。如果是这样,则会使用指向所需图像内容的 URL 填充其src(有时是srcset)属性。

如果你之前编写过延迟加载代码,则可能已通过使用事件处理程序(例如scroll或)完成了任务resize。尽管这种方法在所有浏览器之间都是最兼容的,但是现代浏览器提供了一种更高效,更高效的方法来通过 Intersection Observer API 来检查元素可见性。

并非所有浏览器都支持 Intersection Observer,特别是 IE11 和更低版本。如果跨浏览器的兼容性至关重要,请确保阅读下一部分,该部分向你展示如何使用性能较低(但兼容性更高!)的滚动和调整事件处理程序大小来延迟加载图像。

与依赖各种事件处理程序的代码相比,Intersection Observer 更易于使用和阅读,因为你只需要注册一个观察者即可观察元素,而不必编写繁琐的元素可见性检测代码。剩下要做的就是决定当元素可见时该怎么做。让我们为延迟加载的<img>元素假定以下基本标记模式:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!"> 

你应该关注此标记的三个相关部分:

  1. class属性,它是什么,你会在 JavaScript 中选择元素。
  2. src属性引用一个占位符图像,该图像将在页面首次加载时出现。
  3. data-srcdata-srcset属性,这是包含一旦元素中视,你会加载图像的 URL 占位符属性。

现在,让我们看看如何使用 JavaScript 的 Intersection Observer 通过这种标记模式来延迟加载图像:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
}); 

在文档DOMContentLoaded事件中,此脚本在 DOM 中查询所有 <img>带有类别的元素lazy。如果 Intersection Observer 可用,请创建一个新的观察器,当img.lazy元素进入视口时运行该观察器。

所有现代浏览器均支持 Intersection Observer。因此,将其用作 polyfillloading="lazy"将确保大多数游客可以使用延迟加载。它在 Internet Explorer 中不可用。如果 Internet Explorer 支持至关重要,请继续阅读。

使用事件处理程序获得 Internet Explorer 支持

虽然应该使用 Intersection Observer 进行延迟加载,但是你的应用程序要求可能对浏览器兼容性至关重要。你可以 填充工具路口观察的支持(这是最简单的),但你也可以使用回落到代码 scrollresize以及可能的 orientationchange 事件处理程序在音乐会 getBoundingClientRect 以确定元素是否在检视。

假设以前的标记模式相同,此 Glitch 示例将getBoundingClientRectscroll事件处理程序中使用以检查img.lazy视口中是否有任何元素。甲setTimeout调用用于延迟处理,和一个active变量包含其用于节流函数调用的处理的状态。由于图像是延迟加载的,因此它们已从 elements 数组中删除。当 elements 数组达到的length0,滚动事件处理程序代码将被删除。

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
}); 

尽管此代码几乎可以在任何浏览器中使用,但它仍然存在潜在的性能问题,即使重复setTimeout调用可能很浪费,但重复调用却很浪费。在此示例中,无论视口中是否有图像,都会每 200 毫秒检查一次文档滚动或调整窗口大小。此外,开发人员还需要乏味的工作来跟踪剩下多少元素以进行延迟加载并取消绑定滚动事件处理程序。

简而言之:在可能的情况下,将浏览器级别的延迟加载与后备 Intersection Observer 实现一起使用,并且只有在最大可能的兼容性是关键的应用程序要求时才使用事件处理程序。

背景图片

尽管<img>标记是在网页上使用图像的最常见方式,但是也可以通过 CSSbackground-image 属性(和其他属性)来调用图像 。浏览器级别的延迟加载不适用于 CSS 背景图像,因此,如果要延迟加载背景图像,则需要考虑其他方法。

与不<img>考虑可见性而加载的元素不同,CSS 中的图像加载行为是通过更多的猜测来完成的。当文件和 CSS 对象模型 和渲染树 是建立,浏览器探讨如何 CSS 请求外部资源之前应用于文档。如果浏览器确定涉及外部资源的 CSS 规则不适用于当前构造的文档,则浏览器不会请求该文档。

通过使用 JavaScript 确定元素何时在视口中,然后将一个类应用于该元素,以应用样式调用背景图像,可以将这种推测性行为用于推迟 CSS 中图像的加载。这将导致在需要时而不是在初始加载时下载图像。例如,让我们以包含背景图像的元素为例:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div> 

div.lazy-background元素通常包含一些 CSS 调用的英雄背景图像。但是,在此延迟加载示例中,你可以通过 在视口中添加到元素的类来隔离div.lazy-background元素的background-image属性visible

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
} 

从这里开始,使用 JavaScript 检查该元素是否在视口中(使用 Intersection Observer!),然后在visiblediv.lazy-background元素上添加类 ,从而加载图像:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
}); 

如前所述,如果你需要 Internet Explorer 支持延迟加载背景图像,则由于该浏览器缺乏支持,因此需要填充 Intersection Observer 代码。

延迟加载库

以下库可用于延迟加载图像。

  • lazysizes 是功能齐全的延迟加载库,可延迟加载图像和 iframe。它使用的模式与此处显示的代码示例非常相似,因为它会自动绑定到元素上的 lazyload<img>,并且需要你在data-src和 / 或data-srcset属性中指定图像 URL ,它们的内容分别交换到src和 / 或srcset属性中。它使用 Intersection Observer(可以填充),并且可以使用许多插件进行扩展以执行诸如延迟加载视频之类的操作。
  • lozad.js 是仅使用 “路口观察器” 的超轻量级选项。因此,它具有很高的性能,但需要先进行填充,然后才能在较旧的浏览器上使用它。
  • yall.js 是一个使用 Intersection Observer 并回退到事件处理程序的库。与 IE11 和主要浏览器兼容。
  • 如果你需要一个特定于 React 的延迟加载库,请考虑 react-lazyload。尽管它不使用 Intersection Observer,但它确实为习惯于使用 React 开发应用程序的用户提供了一种熟悉的延迟加载图像的方法。
如何为网页中的图像设置正确的压缩级别?
图像通常在网页中占用很大的文件大小,并且经常占用大量的视觉空间。因此,优化图像通常可以为你的网站带来一些最大的字节节省和性能改进:浏览器下载的字节越少,客户端带宽的竞争越少,浏览器下载和在屏幕上呈现有用内容的速度越快。

乐客互联
by 乐客互联

如何为网页中的图像设置正确的压缩级别?

河北乐客互联
  •  11

如何为网页中的图像设置正确的压缩级别?

发布时间:2020-11-12 14:30:27


图像通常在网页中占用很大的文件大小,并且经常占用大量的视觉空间。因此,优化图像通常可以为你的网站带来一些最大的字节节省和性能改进:浏览器下载的字节越少,客户端带宽的竞争越少,浏览器下载和在屏幕上呈现有用内容的速度越快。

图像优化既是一门艺术,也是一门科学:一门艺术,因为没有一个确切的答案来最好地压缩单个图像,而科学是因为有许多发达的技术和算法可以显著减小图像的大小。要找到图像的最佳设置,需要仔细分析许多维度:格式功能、编码数据的内容、质量、像素尺寸等。

优化矢量图像

所有现代浏览器都支持可扩展矢量图形 (SVG),这是基于 XML 的图像格式,用于二维图形。你可以直接在页面上或作为外部资源嵌入 SVG 标记。大多数基于矢量的绘图软件可以创建 SVG 文件,也可以直接在喜爱的文本编辑器中手动写入这些文件。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg> 

上面的示例呈现下面的简单圆圈形状,具有黑色轮廓和红色背景,并且从 Adobe Illustrator 导出。

以上代码包含大量元数据,如图层信息、注释和 XML 命名空间,这些命名空间通常没有必要在浏览器中呈现资产。因此,通过运行 SVGO 等工具来美化 SVG 文件总是一个好主意。

例如,SVGO 将 Illustrator 生成的上述 SVG 文件的大小减少了 58%,从 470 字节减小到 199 字节。

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg> 

由于 SVG 是基于 XML 的格式,因此你也可以应用 GZIP 压缩来减小其传输大小 - 确保服务器配置为压缩 SVG 资源!

栅格图像只是单个 "像素" 的二维网格,例如,100x100 像素图像是 10,000 像素序列。反过来,每个像素存储 "RGBA" 值:(R)红色通道、(G)绿色通道、(B)蓝色通道和(A)alpha(透明度)通道。

在内部,浏览器为每个通道分配 256 个值(阴影),这转换为每个通道 8 位(2 + 8 = 256),每个像素分配 4 个字节(4 个通道 x 8 位 = 32 位 = 4 个字节)。因此,如果我们知道网格的尺寸,我们可以轻松地计算文件化:

  • 100x100 像素图像由 10,000 像素组成
  • 10,000 像素 x 4 字节 = 40,000 字节
  • 40,000 字节 / 1024 = 39 KB

顺便说一下,无论用于将数据从服务器传输到客户端的图像格式如何,当图像被浏览器解码时,每个像素始终占用 4 字节的内存。对于没有大量可用内存的大型图像和设备(例如,低端移动设备),这可能是一个重要限制因素。

尺寸 像素 文件大小
100 x 100 10,000 39 KB
200 x 200 40,000 156 KB
300 x 300 90,000 351 KB
500 x 500 250,000 977 KB
800 x 800 640,000 2500 KB

39 KB 的 100x100 像素图像可能看起来没什么大不了的,但文件化快速爆炸为较大的图像,使图像资产下载速度慢且成本高昂。这篇文章到目前为止只关注 "未压缩" 的图像格式。值得庆幸的是,可以做很多工作来减小图像文件的大小。

一个简单的策略是将图像的 "位深度" 从每个通道 8 位减小到较小的调色板:每个通道 8 位,每个通道提供 256 个值,总共提供 16,777,216 (256 + 3) 颜色。如果将调色板减为 256 种颜色,会怎么样?然后,你只需要 RGB 通道总共 8 位,并立即节省两个字节 / 像素 - 这是 50% 的压缩节省比原来的 4 字节 / 像素格式!

从左到右 (PNG):32 位(16M 颜色)、7 位(128 种颜色)、5 位(32 种颜色)。

具有渐变颜色过渡(例如,渐变或天空)的复杂场景需要较大的调色板来避免视觉伪影,如 5 位资产中的像素化天空。另一方面,如果图像只使用几种颜色,那么一个大调色板只是浪费宝贵的位!

接下来,一旦优化了存储在单个像素中的数据,你就可以更加聪明地查看附近的像素:事实证明,许多图像,尤其是照片,都有许多颜色相似的附近像素,例如天空、重复纹理等。利用此信息,压缩机可以应用增量编码,其中可以存储附近像素之间的差值,而不是存储附近的像素之间的差值:如果相邻像素相同,则增量为 "零",你只需要存储单个位!

人眼对不同颜色的敏感度不同:你可以通过减少或增加这些颜色的调色板来优化颜色编码以考虑这一点。"邻近" 像素形成二维网格。这意味着每个像素都有多个邻居:你可以使用此事实进一步改进增量编码。你可以查看附近像素的较大块,并使用不同的设置对不同的块进行编码,而不是只查看每个像素的近邻。

正如你所想的,图像优化变得复杂迅速(或有趣,这取决于你的观点),是学术和商业研究的积极领域。图像占用大量的字节,有很多的价值,在开发更好的图像压缩技术!如果你好奇地想了解更多信息,请前往维基百科页面,或者查看 WebP 压缩技术白皮书,了解一个动手示例。

这一切都很棒,但也非常学术性:它如何帮助你优化你网站上的图像?嗯,了解问题的形状很重要:RGBA 像素、位深度和各种优化技术。在深入探讨各种栅格图像格式的讨论之前,所有这些概念对于理解和记住这些概念都至关重要。

无损图像压缩与有损图像压缩

对于某些类型的数据(如页面的源代码或可执行文件),压缩器不更改或丢失任何原始信息至关重要:单个缺失或错误的数据位可能会完全更改文件内容的含义,或者更糟的是,完全中断该文件的内容。对于某些其他类型的数据(如图像、音频和视频),提供原始数据的 "近似" 表示形式是完全可以接受的。

事实上,由于眼睛的工作原理,我们通常可以摆脱丢弃一些有关每个像素的信息,以减少图像的档案化,例如,我们的眼睛对不同颜色有不同的灵敏度,这意味着我们可以使用更少的位来编码某些颜色。因此,典型的图像优化管道由两个高级步骤组成:

  1. 图像使用有损过滤器处理,该过滤器消除了某些像素数据。
  2. 图像使用压缩像素数据的无损滤镜进行处理。

第一步是可选的,确切的算法将取决于特定的图像格式,但重要的是要了解,任何图像可以经历有损压缩步骤,以减少其大小。事实上,各种图像格式(如 GIF、PNG、JPEG 和其他格式)之间的区别在于,在应用有损和无损步骤时,它们使用(或省略)的特定算法的组合。

那么,什么是亏损和无损优化的 "最佳" 配置呢?答案取决于图像内容和你自己的条件,例如文件化和有损压缩引入的工件之间的权衡:在某些情况下,你可能希望跳过有损优化,以完全保真度传达复杂的细节。在其他情况下,你可能能够应用积极的有损优化来降低图像资产的文件化。这是你自己的判断和上下文需要发挥作用的地方 —— 没有一个通用的环境。

作为实践示例,当使用有损格式(如 JPEG)时,压缩器通常会公开一个可自定义的 "质量" 设置(例如,Adobe Photoshop 中的 "为 Web 保存" 功能提供的质量滑块),该滑块通常是控制特定无损和无损算法集合的内部工作值的数字 1 和 100 之间。为了获得最佳效果,请对图像进行各种质量设置的实验,不要害怕降低质量 ,视觉效果通常非常好,文件化节省可能相当大。

请注意,由于用于对图像进行编码的算法不同,不同图像格式的质量级别无法直接比较:90 质量 JPEG 将产生的结果与90 质量 WebP 的结果非常不同。事实上,即使同一图像格式的质量级别,也可能根据压缩机制的实现产生明显不同的输出!

图像优化清单

在优化图像时,需要牢记一些提示和技术:

  • 首选矢量格式:矢量图像是分辨率和比例独立的,这使得它们非常适合多设备和高分辨率世界。
  • 压缩和压缩 SVG 资产:[XML] [SVG] GZIP
  • 与较旧的栅格格式不同,WebP 更喜欢 WebP:WebP 图像通常比旧图像小得多。
  • 选择最佳栅格图像格式:确定你的功能要求,并选择适合每个特定资产的格式。
  • 尝试栅格格式的最佳质量设置:不要害怕拨下 "质量" 设置,结果通常非常好,字节节省显著。
  • 删除不必要的图像元数据:许多栅格图像包含有关资产的不必要元数据:地理信息、摄像机信息等。使用适当的工具删除此数据。
  • 提供缩放图像:调整图像大小,确保 "显示" 大小尽可能接近图像的 "自然" 大小。尤其要密切注意大型图像,因为它们在调整大小时占最大开销!
  • 自动化、自动化、自动化:投资于自动化工具和基础架构,确保你的所有映像资产始终得到优化。
了解 CommonJS 如何使捆绑包变得更大
在这篇文章中,我们将研究什么是 CommonJS,以及为什么它会使你的 JavaScript 包超出必需的范围。

乐客互联
by 乐客互联

了解 CommonJS 如何使捆绑包变得更大

河北乐客互联
  •  9

了解 CommonJS 如何使捆绑包变得更大

发布时间:2020-11-19 17:41:29


在这篇文章中,我们将研究什么是 CommonJS,以及为什么它会使你的 JavaScript 包超出必需的范围。

简介:为了确保捆绑程序能够成功优化你的应用程序,请避免依赖 CommonJS 模块,并在整个应用程序中使用 ECMAScript 模块语法。

什么是 CommonJS?

CommonJS 是 2009 年以来的一项标准,为 JavaScript 模块建立了约定。它最初打算在 Web 浏览器之外使用,主要用于服务器端应用程序。

使用 CommonJS,你可以定义模块,从中导出功能,以及将其导入其他模块中。例如,下面定义了片段其中出口 5 个功能的模块:addsubtractmultiplydivide,和max

// utils.js
const { maxBy } = require('lodash-es');
const fns = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
  max: arr => maxBy(arr)
};

Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]); 

稍后,另一个模块可以导入和使用以下部分或全部功能:

// index.jsconst { add } = require(‘./utils');console.log(add(1, 2)); 

调用index.jsnode将输出数量3在控制台中。

由于 2010 年代初期浏览器中缺乏标准化的模块系统,CommonJS 也成为 JavaScript 客户端库的流行模块格式。

CommonJS 如何影响捆绑包大小?

服务器端 JavaScript 应用程序的大小并不像浏览器中那样重要,这就是为什么 CommonJS 并非在设计时就考虑到了减小生产包的大小。同时,分析表明,JavaScript 软件包的大小仍然是使浏览器应用程序变慢的第一原因。

JavaScript 捆绑程序和压缩程序(例如webpackterser)执行不同的优化以减小应用程序的大小。他们在构建时分析你的应用程序,他们尝试从你不使用的源代码中尽可能多地删除。

例如,在上面的代码段中,你的最终捆绑包应仅包含add函数,因为这是utils.js你导入的唯一符号index.js

让我们使用以下webpack配置来构建应用程序:

const path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
}; 

在这里,我们指定我们要使用生产模式优化并将其index.js用作入口点。调用后webpack,如果我们探索输出大小,我们将看到类似以下内容:

$ cd dist && ls -lah
625K Apr 13 13:04 out.js 

注意,这个包是 625KB。如果我们查看输出,会发现 utils.js 中的所有函数以及 lodash 中的许多模块。尽管我们在 index.js 中没有使用 lodash,但它是输出的一部分,这给我们的生产资产增加了很多额外的权重。

现在让我们将模块格式更改为 ECMAScript 模块,然后再试一次。这一次,utils.js 看起来是这样的:

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

import { maxBy } from 'lodash-es';

export const max = arr => maxBy(arr); 

而 index.js 会使用 ECMAScript 模块语法从 utils.js 中导入:

import { add } from './utils';

console.log(add(1, 2)); 

使用相同的webpack配置,我们可以构建应用程序并打开输出文件。它现在是40个字节,输出如下:

(()=>{"use strict";console.log(1+2)})(); 

请注意,最终的包没有包含来自 util.js 中我们不使用的任何函数,并且没有来自 lodash 的跟踪!更进一步,terser (webpack 使用的 JavaScript 缩小器) 将 add 函数内联到 console.log 中。

你可能会问一个合理的问题,为什么使用 CommonJS 会导致输出包几乎增大 16000 倍?当然,这是一个玩具样例,实际上,大小的差异可能没有那么大,但是 CommonJS 很有可能为你的生产构建增加了很大的权重。

在一般情况下,CommonJS 模块更难优化,因为它们比 ES 模块更动态。为了确保你的 bundler 和 minifier 能够成功地优化你的应用程序,请避免依赖于 CommonJS 模块,并在整个应用程序中使用 ECMAScript 模块语法。

请注意,即使你在中使用 ECMAScript 模块,如果你使用 index.js 的模块是 CommonJS 模块,应用程序的分发包大小也会受到影响。

为什么 CommonJS 会让你的应用变大?

为了回答这个问题,我们将研究webpackModuleConcatenationPlugin 的行为,然后讨论静态可分析性。这个插件将你所有模块的范围连接到一个闭包中,让你的代码在浏览器中有更快的执行时间。让我们来看一个例子:

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b; 
// index.js
import { add } from ‘./utils';
const subtract = (a, b) => a - b;

console.log(add(1, 2)); 

上面,我们有一个 ECMAScript 模块,我们在 index.js 中导入它。我们还定义了一个减法函数。我们可以使用与上面相同的 webpack 配置来构建这个项目,但是这一次,我们将禁用最小化:

const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    filename: 'out.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    minimize: false
  },
  mode: 'production',
}; 

让我们看看输出结果:

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";

// CONCATENATED MODULE: ./utils.js**
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// CONCATENATED MODULE: ./index.js**
const index_subtract = (a, b) => a - b;**
console.log(add(1, 2));**

/******/ })(); 

在上面的输出中,所有函数都在同一个名称空间中。为了防止冲突,webpackindex.js 中的减法函数重命名 为 index_subtract

如果使用压缩程序处理上面的源代码,它会:

  • 删除未使用的函数 subtractindex_subtract
  • 删除所有注释和多余的空格
  • console.log 调用中内联 add 函数的主体

通常,开发人员将这种未使用导入的移除称为“摇树”。是因为 webpack 能够静态地(在构建时)理解我们从 util .js 导入哪些符号,导出哪些符号。

CommonJS 相比,ES模块在默认情况下启用了这种行为,因为它们更容易静态分析。

让我们看看完全相同的例子,但这次改变 util .js 使用 CommonJS 而不是ES模块:

// utils.js
const { maxBy } = require('lodash-es');

const fns = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
  max: arr => maxBy(arr)
};

Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]); 

这个小更新将显著改变输出。由于它太长,嵌入这个页面,我只分享了它的一小部分:

...
(() => {

"use strict";
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
const subtract = (a, b) => a - b;
console.log((0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .add */ .IH)(1, 2));

})(); 

注意,最终的包包含一些 webpack “运行时”注入的代码,负责从绑定模块导入/导出功能。这一次,我怕,我们没有把所有的符号从utils.jsindex.js 放在同一个命名空间下,我们需要动态地在运行时,该add功能使用__webpack_require__

这是必要的,因为使用 CommonJS,我们可以从任意表达式中获得导出名称。例如,下面的代码是一个绝对有效的构造:

module.exports[localStorage.getItem(Math.random())] = () => { … }; 

在构建时,绑定者无法知道导出符号的名称,因为只有在运行时才能在用户浏览器上下文中使用的信息。

这样,minifier 无法从依赖关系中理解 index.js 到底使用了什么,所以它无法将其树式删除。我们还将观察到第三方模块的完全相同的行为。如果我们从 node_modules 导入一个 CommonJS 模块,则你的构建工具链将不能正确地优化它。

CommonJS 中的 Tree-shaking

由于 CommonJS 模块是动态定义的,因此要分析它们要困难得多。例如,与作为表达式的 CommonJS 相比,ES 模块中的导入位置始终是字符串文字。

在某些情况下,如果你使用的库遵循了使用 CommonJS 的特定约定,那么可以使用第三方 webpack 插件在构建时删除未使用的导出。尽管这个插件增加了对树晃动的支持,但它并没有涵盖你的依赖项使用 CommonJS 的所有不同方式。这意味着你不会获得与 ES 模块相同的保证。此外,它还增加了构建过程中在默认 webpack 行为之上的额外成本。

结论

为确保捆绑程序可以成功优化应用程序,请避免依赖 CommonJS 模块,并在整个应用程序中使用 ECMAScript 模块语法。

以下是一些可行的技巧,可用来验证你是否处于最佳状态:

  • 使用 Rollup.js 的 node-resolve 插件并设置modulesOnly标志以指定你仅希望依赖 ECMAScript 模块。
  • 使用该软件包 is-esm 来验证 npm 软件包是否使用 ECMAScript 模块。
  • 如果你使用的是 Angular,则默认情况下,如果你依赖不可摇树的模块,则会收到警告。
Nginx如何设置负载均衡
负载平衡是一种非常有用的技术,可以在多个服务器之间分配传入的网络流量。使用此技术,您可以减少资源使用量,缩短响应时间并避免服务器过载。在本教程中,我们将指导您完成在Linux VPS上配置Nginx负载平衡的步骤。Nginx负载平衡是实现完全应用程序冗余的最有效的选项之一,并且相对容易且快速设置。我们将使用循环机制配置Nginx负载平衡。这样,它将所有请求转发到Nginx配置中包括的相应服务器。

乐客互联
by 乐客互联

Nginx如何设置负载均衡

河北乐客互联
  •  98

Nginx如何设置负载均衡

发布时间:2019-10-25 16:07:14


负载平衡是一种非常有用的技术,可以在多个服务器之间分配传入的网络流量。使用此技术,您可以减少资源使用量,缩短响应时间并避免服务器过载。在本教程中,我们将指导您完成在Linux VPS上配置Nginx负载平衡的步骤。Nginx负载平衡是实现完全应用程序冗余的最有效的选项之一,并且相对容易且快速设置。我们将使用循环机制配置Nginx负载平衡。这样,它将所有请求转发到Nginx配置中包括的相应服务器。

目录

  1. 登录SSH
  2. 更新所有软件
  3. 安装Nginx Web 服务器
  4. 添加负载均衡
  5. 在Nginx中添加上游模块
  6. 重新启动Nginx
  7. 设置权重平衡
  8. 设置最大失败次数
  9. 设置IP哈希平衡

以root用户身份登录到服务器

ssh root@IP_Address

更新所有软件

apt-get update && apt-get upgrade

安装Nginx Web服务器

apt-get install nginx

安装完成后,检查Web服务器是否正在运行。

	service nginx status
nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running)  

添加负载均衡

使用文本编辑器打开网站的Nginx配置文件。

vim /etc/nginx/sites-available/yourdomain.com.conf

并将负载平衡配置附加到文件顶部。

	upstream loadbalancer {
server vps1.yourdomain.com;
server vps2.yourdomain.com;
server vps3.yourdomain.com;
} 

在Nginx中添加上游模块

在相同的配置文件yourdomain.com.conf中,我们需要在virtualhost配置中添加上游模块。

server {
location / {
proxy_pass http://loadbalancer;
}
}

重新启动Nginx服务器

保存所有文件只有重启Nginx服务器。

service nginx restart

此配置将在三台服务器(vps1.yourdomain.com,vps2.yourdomain.com,vps3.yourdomain.com)之间平均分配所有传入流量。Nginx也可以配置为更有效地分配流量。它带有平衡选项,例如权重平衡,最大失败数和IP哈希平衡。

权重平衡

我们可以使用此选项来指定分配给上游列出的每个服务器的流量的比例。

upstream loadbalancer {
server vps1.yourdomain.com weight=1;
server vps2.yourdomain.com weight=2;
server vps3.yourdomain.com weight=5;
}

此示例中,vps2.yourdomain.com的流量是vps2.yourdomain.com的两倍,vps3.yourdomain.com的流量是vps1.yourdomain.com的五倍。

最大失败次数

如果使用默认的Nginx设置,即使服务器关闭,它也会将数据发送到服务器。我们可以使用“最大失败次数”选项来防止这种情况。

upstream loadbalancer {
server vps1.yourdomain.com max_fails=4  fail_timeout=20s;
server vps2.yourdomain.com weight=2;
server vps3.yourdomain.com weight=4;
}

在上面的示例中,Nginx将尝试连接到vps1.yourdomain.com,如果响应时间超过20秒,它将进行另一次尝试。经过四次尝试,vps1.yourdomain.com将被视为关闭。

设置IP哈希平衡

使用此方法,访问者将始终被发送到同一服务器。因此,如果访问者收到vps1.yourdomain.com的内容,则除非服务器停机或无法访问,否则它将始终传输到该服务器。

upstream loadbalancer {
ip_hash;
server vps1.yourdomain.com;
server vps2.yourdomain.com;
server vps3.yourdomain.com down;
}
IIS如何开启HSTS(HTTPS严格传输)
HTTP Strict Transport Security(通常简称为HSTS)是一个安全功能,它告诉浏览器只能通过HTTPS访问当前资源,而不是HTTP。启用 HSTS 不仅仅可以有效防范中间人攻击,同时也为浏览器节省来一次 302/301 的跳转请求,如果配置了HSTS,网站则通过HTTP Strict Transport Security通知浏览器,这个网站禁止使用HTTP方式加载,浏览器应该自动把所有尝试使用HTTP的请求自动替换为HTTPS请求。

乐客互联
by 乐客互联

IIS如何开启HSTS(HTTPS严格传输)

河北乐客互联
  •  279

IIS如何开启HSTS(HTTPS严格传输)

发布时间:2019-08-29 18:17:00


HTTP Strict Transport Security(通常简称为HSTS)是一个安全功能,它告诉浏览器只能通过HTTPS访问当前资源,而不是HTTP。启用 HSTS 不仅仅可以有效防范中间人攻击,同时也为浏览器节省来一次 302/301 的跳转请求,如果配置了HSTS,网站则通过HTTP Strict Transport Security通知浏览器,这个网站禁止使用HTTP方式加载,浏览器应该自动把所有尝试使用HTTP的请求自动替换为HTTPS请求。

HTTP严格传输安全(英语:HTTP Strict Transport Security,缩写:HSTS)是一套由互联网工程任务组发布的互联网安全策略机制。网站可以选择使用HSTS策略,来让浏览器强制使用HTTPS与网站进行通信,以减少会话劫持风险。

作用

HSTS的作用是强制客户端(如浏览器)使用HTTPS与服务器建立连接。服务器开启HSTS的方法是,当客户端通过HTTPS发出请求时,在服务器返回的超文本传输协议(HTTP)响应头中包含Strict-Transport-Security字段。非加密传输时设置的HSTS字段无效。

比如,https://example.com/ 的响应头含有Strict-Transport-Security: max-age=31536000; includeSubDomains。这意味着两点:

  1. 在接下来的31536000秒(即一年)中,浏览器向example.com或其子 域名发送HTTP请求时,必须采用HTTPS来发起连接。比如,用户点击 超链接或在地址栏输入 http://www.example.com/ ,浏览器应当自动将 http 转写成 https,然后直接向 https://www.example.com/ 发送请求。
  2. 在接下来的一年中,如果 example.com 服务器发送的TLS 证书无效,用户不能忽略浏览器警告继续访问网站。

HSTS可以用来抵御SSL剥离攻击。SSL剥离攻击是中间人攻击的一种,由Moxie Marlinspike于2009年发明。他在当年的黑帽大会上发表的题为“New Tricks For Defeating SSL In Practice”的演讲中将这种攻击方式公开。SSL剥离的实施方法是阻止浏览器与服务器建立HTTPS连接。它的前提是用户很少直接在地址栏输入https://,用户总是通过点击链接或3xx重定向,从HTTP页面进入HTTPS页面。所以攻击者可以在用户访问HTTP页面时替换所有https://开头的链接为http://,达到阻止HTTPS的目的。

HSTS可以很大程度上解决SSL剥离攻击,因为只要浏览器曾经与服务器建立过一次安全连接,之后浏览器会强制使用HTTPS,即使链接被换成了HTTP

IIS开启HSTS

此方法未在IIS7/8.5版本测试,如果设置后网站出现500状态码则撤销更改;在配置HSTS前需要将http请求重定向到https请求上。

方法一:添加自定义HTTP响应头

在网站根目录下的web.config文件里添加以下代码:

	 <configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name=&quot;Strict-Transport-Security&quot; value=&quot;max-age=31536000&quot; />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration> 

方法二:利用URL重写工具

安装URL重写模块,并为具有HTTP和HTTPS绑定的单个网站配置重写规则。HTTP到HTTPS重定向可以由入站规则指定,而将STS标头添加到HTTPS回复可以通过出站规则来实现。

	<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name=&quot;Redirect HTTP to HTTPS&quot; stopProcessing=&quot;true&quot;>
                    <match url=&quot;(.*)&quot; />
                    <conditions>
                        <add input=&quot;{HTTPS}&quot; pattern=&quot;off&quot; />
                    </conditions>
                    <action type=&quot;Redirect&quot; url=&quot;https://{HTTP_HOST}/{R:1}&quot; redirectType=&quot;Permanent&quot; />
                </rule>
            </rules>
            <outboundRules>
                <rule name=&quot;Add the STS header in HTTPS responses&quot;>
                    <match serverVariable=&quot;RESPONSE_Strict_Transport_Security&quot; pattern=&quot;.*&quot; />
                    <conditions>
                        <add input=&quot;{HTTPS}&quot; pattern=&quot;on&quot; />
                    </conditions>
                    <action type=&quot;Rewrite&quot; value=&quot;max-age=31536000&quot; />
                </rule>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>

如果配置以上代码后网站未出现500等错误,既可以打开浏览器测试HSTS是否配置成功。

测试HSTS是否成功

使用Google Chrome 浏览器打开站点,按下F12打开控制台,转到Network,点击列表中的页面,查看Response Headers中的消息头列表:

查看IIS是否配置了HSTS

如果有类似Strict-Transport-Security: max-age=31536000; includeSubDomains; preload的代码,则证明HSTS配置成功。

如何下载并分析网站的日志文件
网站日志是记录web服务器接收处理请求以及运行时错误等各种原始信息的以.log结尾的文件,确切的讲,应该是服务器日志。网站日志最大的意义是记录网站运营中比如空间的运营情况,被访问请求的记录。通过网站日志可以清楚的得知用户在什么IP、什么时间、用什么操作系统、什么浏览器、什么情况下访问了你网站的哪个页面,是否访问成功等等。

乐客互联
by 乐客互联

如何下载并分析网站的日志文件

河北乐客互联
  •  153

如何下载并分析网站的日志文件

发布时间:2019-08-20 09:39:29


网站日志是记录web服务器接收处理请求以及运行时错误等各种原始信息的以.log结尾的文件,确切的讲,应该是服务器日志。网站日志最大的意义是记录网站运营中比如空间的运营情况,被访问请求的记录。通过网站日志可以清楚的得知用户在什么IP、什么时间、用什么操作系统、什么浏览器、什么情况下访问了你网站的哪个页面,是否访问成功等等。

网站日志存放在哪里?

大部分主机包括虚拟主机都会提供一个网站日志功能。网站日志不同于流量统计,流量统计只是统计网站的IP、PV、UV等信息,而网站日志则是整个网站的运行情况,包括用户的IP,访问详情,页面来源,还有用户的UA等等。站长们可以根据用户UA来判断是否有假的蜘蛛来采集网站内容。

虚拟主机日志存放路径:

  1. 阿里云虚拟主机:需要登陆虚拟主机"控制台"=>"文件管理"=>"网站日志下载",选择某一天的日志点击下载,之后会在网站里创建一个文件夹名为wwwlogs的文件夹,从FTP里下载即可。
  2. 西部数据虚拟主机:需要登录虚拟主机管理页面,找到"网站情报系统"下的"WWW日志",点击下载WebLog日志,之后会在网站里创建一个名为logfiles的文件夹,同样从FTP里下载即可。(西部数据的日志有日期限制,只能下载近几天的日志。)
  3. 百度云虚拟主机:需要登录虚拟主机管理页面,点击"日志管理"=>"主机日志",开启FTP日志,保存目录为根目录/ftplogs
  4. 其他虚拟主机请咨询客服。

下载到网站目录里的网站日志文件

云服务器的日志存放路径

  1. Windows Server系列操作系统:一般情况下在C盘下的intepub/logs/LogFiles文件夹下,比如W3SVC6000,其中"6000"为站点的ID。
  2. Linux系列系统因使用的管理软件不同其日志文件存放路径也不同,以宝塔面板为例,登录宝塔管理面板,找到左侧的"文件",打开路径"根目录=>www=>wwwlogs"文件夹,使用宝塔面板创建的网站日志文件通常会在一个文件里保存,网站日志文件名通常以创建网站时的名称+"access_log"命名,错误信息通常以网站名称+"error_log"结尾。

如何查看IIS站点的ID:

打开IIS,找到要查看ID的站点,在右侧点击高级设置,在常规栏目下找到ID即可。

在IIS中查看网站的ID

分析日志文件

从服务器上下载日志文件后,可以利用第三方日志分析网站来分析日志详情,也可以使用Excel等工具分析网站日志。

利用第三方日志分析网站分析

将网站日志上传到第三方日志分析网站上,比如 LogHao日志分析工具,上传之后输入网站URL,点击分析即可在右侧看到日志分析详情。

在线网站日志分析工具

利用Excel工具查看

在导入到Excel之前,需要打开日志文件把列表头的一些无用字段删除掉,比如"#Software: Microsoft Internet Information Services 10.0"、"#Version: 1.0"等等字段。打开Excel,在菜单里找到"数据=>获取外部数据=>自文本",打开导入文件对话框,将右下角的文件类型选择"所有文件(*.*)",选中日志文件。

接着会出现文本导入向导对话框,在原始数据类型中选择"分隔符号",点击"下一步","分割符号"选择"空格",点击下一步、完成,将数据放置到=$A$1位置下即可。

导入成功后会在表格中显示整个日志信息,其中一些列表头的意义为:

date time s-ip cs-method cs-uri-stem cs-uri-query s-port
日期 时间 服务器内网IP 方法 URL地址 URL参数(?后面的字符) 服务器端口

c-ip cs(User-Agent) cs(Referer) sc-status sc-win32-status time-taken
用户(访问者)IP 浏览器UA(用户标识) 链接来源(从哪个页面点击进来,通过该信息可以找到盗取资源的家伙) 服务端状态码 是否64为操作系统("0"为32位,"64"为64为) 访问延迟(单位:毫秒ms)

站长们需要重点关注的几点是:访问的URL地址、浏览器UA(非常重要,此字段可以分辨真假蜘蛛)、服务器状态码(重要,如果有404或非200等正常状态码就需要检查网站链接)、访问延迟(最好关注下,如果延迟很高说明服务器带宽低或者有人在盗取你网站上的资源)。

重要关注点说明

访问的URL地址(cs-uri-stem)

cs-uri-stem为用户访问、搜索引擎抓取的地址,如果搜索引擎抓取了不是自己网站上的链接,请及时向站站长平台反馈信息;如果出现经常有用户访问css、img和js等文件,却没有访问网页的情况时,需要站长们注意自己网站的资源是否已经被别人盗用,被别人盗用会增加自己网站的请求量,增加用户打开网站加载时间,甚至还会增加你的流量费用(有流量限制的虚拟主机)。如果被盗用资源可以联系主机服务商是否可以开启防盗链功能。

用户UAcs(User-Agent)

用户UA代表用户是以哪种浏览器访问,或搜索引擎的标识,比如"Sogou+web+spider"、"compatible;+Baiduspider/2.0"等等,如果你没有提交站点给某一个搜索引擎,用户UA却出现了这个搜素引擎的标识,比如国外的“MJ12bot”等等(需要注意的是,搜索引擎抓取频率过多也会导致网站服务器压力过大),请及时将其他没有提交的搜索引擎标识写进robots.txt文件里并设置禁止抓取(Disallow: /);如果发现有其他网站采集本站的数据,需要站长们做好防采集功能。

常见的搜索引擎UA有:

搜索引擎名称 搜索引擎标识
百度蜘蛛 compatible;+Baiduspider
Google蜘蛛 compatible; Googlebot/2.1
Google图片蜘蛛 Googlebot-Image/1.0
必应蜘蛛 msnbot/2.0b
搜狗蜘蛛 Sogou+web+spider

请求状态码(sc-status)

请求状态码反映了网站的链接或者资源是否可以打开,常见的状态码有:200(ok)表示访问正常;301(永久重定向);302(暂时重定向);403(禁止访问);404(页面或资源不存在);500系列(通常为网站内部错误,比如代码语法错误等原因导致页面无法呈现)。

如果网站上出现了大量的400、500等状态码,需要站长们重点注意:网站是否有死链;是否有拼写错误的链接;网站的环境配置是否正确,比如php.Net环境等,以及php代码或asp(x)代码是否书写正确。

访问延迟(time-taken)

访问延迟(或者说响应时间)一般在30~200毫秒之间为最佳,超过了1000毫秒则说明网站配置较低或带宽低,客户访问的地理位置和服务器的地理位置比较远,也不排除有其他网站盗用资源或者采集数据。建议选购主机时选择离客户地理位置近的区域或是升级服务器配置、增加网站带宽。

参考链接:
简书:如何分析网站日志文件
使用CSS变量来为Web开发更便捷
CSS变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的 var() 来访问。(比如 color: var(--main-color);)。其中变量类型分为两种,局部变量和全局变量,局部变量用于一个选择其中,而全局变量用于整个文档。

乐客互联
by 乐客互联

使用CSS变量来为Web开发更便捷

河北乐客互联
  •  75

使用CSS变量来为Web开发更便捷

发布时间:2019-08-16 17:28:18


CSS变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名,并使用特定的 var() 来访问。(比如 color: var(--main-color);)。其中变量类型分为两种,局部变量和全局变量,局部变量用于一个选择其中,而全局变量用于整个文档。

CSS变量简介

在一些命令式编程语言中,像Java、C++亦或是JavaScript,通过变量我们能够跟踪某些状态。变量是一种符号,关联着一个特定的值,变量的值能随着时间的推移而改变。在像CSS这种声明式语言中,随着时间而改变的值并不存在,也就没有所谓变量的概念了。 CSS引入了一种层级变量的概念,从而能够从容应对可维护性的挑战。这就会使得在整个CSS中都可以象征性的引用一个变量。

CSS变量形式

CSS 变量当前有两种形式:

变量:

变量,就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如:var(--example-variable)会返回--example-variable所对应的值。

自定义变量:

使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句,意思是将20px赋值给--example-varibale变量。

什么时候需要用CSS变量

在构建大型站点时,设计师通常会面对可维护性的挑战。在这些网页中,所使用的CSS的数量是非常庞大的,并且在许多情况下大量的值会重复使用。例如,在网页中维护一个配色方案,意味着一些颜色在CSS文件中多次出现,并被重复使用。当你修改配色方案时,不论是调整某个颜色或完全修改整个配色,都会成为一个复杂的问题,而单纯查找替换是远远不够的。

如果使用了其他CSS 框架,这种情况会变得更为糟糕。如果要修改颜色,则需要对框架本身进行修改。在这些场合使用 LESS 或 Sass 类似的预处理器是非常有帮助的,但是这种通过添加额外步骤的方式,可能会增加整个网站的复杂性。CSS变量为我们带来一些预处理器的便利,并且不需要额外的编译。

使用CSS变量的优势就是变量名称本身可以包含语义信息,使CSS文件变得易读和理解。比如main-text-color比文档中的#00ff00更容易理解,特别是同样的颜色出现在不同的文件中的时候。

使用示例

声明一个局部变量:

	element {
  --main-bg-color: brown;
} 

声明一个全局变量:

	:root {
  --global-color: #666;
  --pane-padding: 5px 42px;
} 

使用方法很简单,在需要使用的地方调用即可,比如:

局部变量

	element {
  background-color: var(--main-bg-color);
} 

全局变量

	.demo{
   color: var(--global-color);
} 

Var()函数

Var()函数用来读取已经定义好的变量,假如变量foo和bar已经定义好。

	a {
  color: var(--foo);
  text-decoration-color: var(--bar);
} 

Var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

	color: var(--foo, #7F583F); 

全局变量可以在任何地方调用。CSS变量的前缀是--,Sass的前缀是$,而Less的前缀是@

参考链接:
使用CSS变量
CSS 变量教程
HTML5 input标签中的pattern属性详解
表单在网页中经常会被用到,尤其是在注册、登录和搜索模块中。如果不验证用户输入的字符串,很可能会造成SQL注入,甚至会对整个数据库造成不可挽回的风险。要进行表单验证,可以借助javascript和input的pattern属性来限制用户的输入。

乐客互联
by 乐客互联

HTML5 input标签中的pattern属性详解

河北乐客互联
  •  94

HTML5 input标签中的pattern属性详解

发布时间:2019-08-14 16:30:53


表单在网页中经常会被用到,尤其是在注册、登录和搜索模块中。如果不验证用户输入的字符串,很可能会造成SQL注入,甚至会对整个数据库造成不可挽回的风险。要进行表单验证,可以借助javascript和input的pattern属性来限制用户的输入。

什么是SQL注入

SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。

更详细的SQL注入介绍,请查看简书 sql注入基础原理(超详细)

如何防止SQL注入

常见的防止SQL注入方法有以下几种:

  1. 永远不要信任用户的输入。对用户的输入进行校验,可以通过正则表达式,或限制长度;对单引号和 双"-"进行转换等。
  2. 永远不要使用动态拼装sql,可以使用参数化的sql或者直接使用存储过程进行数据查询存取。
  3. 永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。
  4. 不要把机密信息直接存放,加密或者hash掉密码和敏感的信息。
  5. 应用的异常信息应该给出尽可能少的提示,最好使用自定义的错误信息对原始错误信息进行包装。
  6. sql注入的检测方法一般采取辅助软件或网站平台来检测,软件一般采用sql注入检测工具jsky,网站平台就有亿思网站安全平台检测工具。MDCSOFT SCAN等。采用MDCSOFT-IPS可以有效的防御SQL注入,XSS攻击等。

SQL注入原理

使用JS(javascript)进行表单验证已经烂大街,这篇文章不再赘述。

使用input标签的pattern属性进行表单验证

pattern属性用于验证输入字段的模式,需要输出正则表达式来限制。

要使用pattern属性,必须了解正则表达式才能正确的使用。

正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。

限制用户只能输入数字:

	<input type="text" value="" name="title" placeholder="请输入要搜索的内容" required="" pattern="[^\d]/g"> 

限制用户只能输入英文字母:

	<input type="text" value="" name="title" placeholder="请输入要搜索的内容" required="" pattern="[/W]/g"> 

限制用户只能输入数字和英文字母:

	<input type="text" value="" name="title" placeholder="请输入要搜索的内容" required="" pattern="[\w]/g"> 

pattern属性设置为:/[\W]/g时,用户只能输入数字和英文,如果输入的字符串不匹配,则会提示"请与所请求的格式保持一致"(Chrome)。

限制用户只能输入5-20个以字母开头、可带数字、“_”、“.”的字串

	<input type="text" value="" name="title" placeholder="请输入用户名 " required="" pattern="^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$"> 

设置了以上规则后即可简单的来限制用户输入。你可以学习更多的正则表达式语法,来为表单设置其他规则。但要做到更高级别的限制,需要在服务端设置字符串过滤和转换。

政治投票网站前端设计

乐客互联
by 乐客互联

政治投票网站前端设计

河北乐客互联
  •  140

政治投票网站前端设计

发布时间:2019-09-06 15:52:25


最后更新
创建
古腾堡优化 没有
高分辨率
小工具准备好了
兼容的浏览器 IE11FirefoxSafariOperaChromeEdge
兼容 Bootstrap 4.x
骨架 Unyson
软件版本 WordPress 5.2.x
包含ThemeForest文件 PHP文件CSS文件JS文件
4+
文档 记录良好
布局 响应
标签 竞选候选人慈善机构众筹捐赠选举事件非营利组织非营利组织政治政治领袖政党政治wordpress主题政治家政治

多概念企业业务网站前端页面设计

乐客互联
by 乐客互联

多概念企业业务网站前端页面设计

河北乐客互联
  •  128

多概念企业业务网站前端页面设计

发布时间:2019-09-06 15:30:12


最后更新
创建 8月8日19日
古腾堡优化
高分辨率
小工具准备好了
兼容的浏览器 IE11FirefoxSafariOperaChromeEdge
兼容 ElementorBootstrap 4.x
骨架 Unyson
软件版本 WordPress 5.2.xWordPress 5.1.xWordPress 5.0.xWordPress 4.9.xWordPress 4.8.x
包含ThemeForest文件 PHP文件CSS文件JS文件
4+
文档 记录良好
布局 响应
标签 机构应用程序登陆比特币业务企业创意现代多用途投资组合响应saas软件启动技术Web应用程序





教育网站前端设计

乐客互联
by 乐客互联

教育网站前端设计

河北乐客互联
  •  98

教育网站前端设计

发布时间:2019-09-06 15:13:08


最后更新
创建
古腾堡优化
高分辨率
小工具准备好了
兼容的浏览器 IE10IE11FirefoxSafariOperaChromeEdge
兼容 bbPress 2.5.xBuddyPress 4.1.xBuddyPress 3.0.xBuddyPress 2.5.xElementorVisual Composer 5.1.xVisual Composer 4.12.xVisual Composer 4.11.xVisual Composer 4.11.2.1WooCommerce 3.5.xWooCommerce 3.4.xWooCommerce 3.3.xWooCommerce 3.2.xWooCommerce 3.1.xWooCommerce 3.0.xWPBakery Page Builder 5.5.xWPBakery Page Builder 5.4.xWPBakery Page Builder 5.3WPBakery Page Builder 5.2.xWPMLBootstrap 3.x
软件版本 WordPress 5.2.xWordPress 5.1.xWordPress 5.0.xWordPress 4.9.xWordPress 4.8.xWordPress 4.7.xWordPress 4.6.1WordPress 4.6WordPress 4.5.xWordPress 4.5.2WordPress 4.5 .1WordPress 4.5
包含ThemeForest文件 PHP文件CSS文件JS文件
4+
文档 记录良好
布局 响应
标签 学院coursera教育教育wordpress主题电子学习学习学习管理系统lms教学培训培训中心udemy大学wordpress教育主题wp lms





响应正常运行时间的商务WordPress主题前端设计

乐客互联
by 乐客互联

响应正常运行时间的商务WordPress主题前端设计

河北乐客互联
  •  66

响应正常运行时间的商务WordPress主题前端设计

发布时间:2019-08-27 18:13:10


Last Update
Created 7 August 19
Gutenberg Optimized Yes
High Resolution Yes
Widget Ready Yes
Compatible Browsers IE11, Firefox, Safari, Opera, Chrome, Edge
Compatible With Elementor
Software Version WordPress 5.2.x, WordPress 5.1.x, WordPress 5.0.x, WordPress 4.9.x, WordPress 4.8.x
ThemeForest Files Included PHP Files, CSS Files, JS Files
Columns 4+
Documentation Well Documented
Layout Responsive
Tags app, bootstrap, business, corporate, education, event, landing, magazine, marketing, multipurpose, parallax, portfolio, shop, startup

点燃前端页面设计
要像专业人士一样在网上启动您的项目,Ignite是要考虑的免费托管网站模板。任何网络托管和域名注册商公司都可以将Ignite充分利用并在线发挥作用。您现在可以从Ignite及其附带的所有特权中受益,而不是从头开始进行网页设计。该工具的布局灵敏,灵活,遵循所有最新的网络实践,非常吸引眼球。

乐客互联
by 乐客互联

点燃前端页面设计

河北乐客互联
  •  62

点燃前端页面设计

发布时间:2019-08-27 16:49:10


要像专业人士一样在网上启动您的项目,Ignite是要考虑的免费托管网站模板。任何网络托管和域名注册商公司都可以将Ignite充分利用并在线发挥作用。您现在可以从Ignite及其附带的所有特权中受益,而不是从头开始进行网页设计。该工具的布局灵敏,灵活,遵循所有最新的网络实践,非常吸引眼球。

Ignite的其他特色是粘性导航,动画统计,号召性用语按钮,滚动内容加载和定价计划。您还可以通过集成的推荐建立客户信任,并通过创建有关托管和域名的博客回馈社区。添加联系页面还为您提供了工作表单和Google地图。通过使用免费托管网站模板Ignite,从一开始就像一个冠军一样在网上开始。


Trans Free Ultramodern单页网站模板

乐客互联
by 乐客互联

Trans Free Ultramodern单页网站模板

河北乐客互联
  •  98

Trans Free Ultramodern单页网站模板

发布时间:2019-08-16 18:26:39


这个Trans Free Ultramodern PSD单页网站模板是一个时尚的黑暗网站PSD模板,它使用独特的网站布局,有吸引力的图像和时尚的平面网格设计。选择的颜色的基调是一个强烈的声明,将让用户满意。在源头检查模板设计并继续欢乐。

BlazRobar.com是作者回馈这个社区的一种方式,通过分享他在7年的平面设计师中学到的设计技巧和窍门。本网站的重点是赠送免费PSD,免费PSD模板,网站模板和Photoshop文件,供设计师和开发人员欣赏和使用。

本网站上的所有文件都是免费的,无论如何您都可以使用。非常放松,你如何使用甚至Creative Commons太严格的文件!不需要归属,您甚至可以在商业上使用它。